elWebmaster.com

CSS | estilos | botones

Crear un bot√≥n en estado “hover” s√≥lo con CSS

Si bien no es muy utilizado, el estado CSS ‚Äúactive‚ÄĚ de un link es el estado en que se pone un link cuando haces clic en √©l. El momento en que haces clic en un link, este se vuelve activo. Es por eso que el estado ‚Äúactive‚ÄĚ puede resultar muy √ļtil cuando posees botones de estilo personalizado.

Sencillamente mediante la utilizaci√≥n del estado ‚Äúactive‚ÄĚ podremos darle a nuestros botones la apariencia de que est√°n siendo presionados, o cualquier otro estilo que deseemos que tengan, para hacer que nuestro sitio se destaque. Seguir leyendo

19/ene/09, 10.15 Micaela 3 comentarios

Dise√Īo | CSS | recursos

Typechart: dando formato a los p√°rrafos de tu blog con CSS

Desde la web Xybernéticos nos traen una aplicación muy interesante que nos da la posibilidad de otorgarle diferentes formatos a los párrafos de nuestro sitio web.

Typechart nos permite comparar a tiempo real cómo se ve determinada tipografía tanto en Windows como en Mac OS X y una vez que estemos a gusto con el formato de esta podremos extraer su código CSS.
Seguir leyendo

26/sep/08, 11.25 Micaela Comentar

CSS | recursos | código

Encuentra los selectores inncesarios de tu CSS

Ya mencioné alguna vez la importancia de mantener el código de nuestro sitio limpio y ordenado para poder revisarlo sin mayores inconvenientes. La web CSS Redundancy Checker puede sernos de mucha ayuda en esta tarea.

CSS Redundancy Checker es una aplicaci√≥n online que nos permitir√° conocer cu√°les son los selectores CSS de nuestro c√≥digo que no est√°n siendo utilizados por ning√ļn archivo HTML y que, por lo tanto, son precisamente redundantes.
Seguir leyendo

01/sep/08, 16.00 Micaela Comentar

CSS | código | estilos

Uso avanzado de CSS con reglas “arroba”

Uso avanzado de CSS con reglas arrobaM√°s all√° de las funciones que uno generalmente usa en las hojas de estilo CSS (como los selectores) existen reglas menos comunes, como las “reglas @” (at-rules, en ingl√©s). Este tipo de reglas tienen usos muy diversos y algunas son espec√≠ficas de ciertos navegadores.

Las reglas @ comienzan siempre con el s√≠mbolo de la arroba y luego su nombre clave. Dependiendo de cual se trate podr√° necesitar un √ļnico argumento (la regla “import por ejemplo) o un bloque de c√≥digo (la regla “media“). Veamos bien cu√°les son. Seguir leyendo

05/ago/08, 16.00 Micaela Comentar

Dise√Īo | CSS | recursos

Plantillas CSS gratuitas para tu p√°gina web

Plantillas CSS gratuitas para tu página webLos que tengan poca idea sobre CSS o simplemente quieran usar uno de estos excelentes layouts, pueden descargarlos directamente desde el sitio de Intensivstation.ch. Las plantillas sólo tienen organización de sectores y color, de modo que puedes ponerles tus imágenes o texto.

Para facilitarte a√ļn m√°s las cosas se encuentran organizadas por categor√≠as: ajustadas, el√°sticas, centradas, de una, dos o tres columnas, etc. Todas cumplen con los est√°ndares y tienen XHTML y CSS2 v√°lidos. Haz clic aqu√≠ para ir al sitio.

19/jun/08, 12.15 Juan Manuel 1 comentario

Dise√Īo | CSS | html

Los jardines Zen del CSS: El camino a la iluminación

Los jardines Zen del CSS: El camino a la iluminaci√≥nCss Zen Garden es una demostraci√≥n de lo que se puede lograr visualmente a trav√©s del CSS. Su prop√≥sito es que el css sea tomado en serio por los artistas gr√°ficos y demostrar el gran valor de separar la maquetaci√≥n HTML del dise√Īo.

B√°sicamente, consiste en una p√°gina donde distintos usuarios suben sus hojas de estilo. Lo interesante es ver c√≥mo podemos cambiar los distintos dise√Īos pero el c√≥digo html es siempre el mismo. Seguir leyendo

17/jun/08, 16.00 Micaela Comentar

Dise√Īo | CSS | recursos

Creando un mapa interactivo con CSS

Creando un mapa interactivo con CSSNo necesariamente tiene que tratarse de un mapa geográfico, sino que puede ser cualquier mapa de imagen que al pasar el puntero del mouse por encima despliegue información adicional, otras imágenes, etc. Todo con CSS.

En la web de MikeCherim.com tenemos un ejemplo para que veamos cómo funciona y también desde allí podemos descargar los archivos XHTML y CSS necesarios para que revises el código y lo uses en tu sitio web. Haz clic aquí para ir al sitio.

05/jun/08, 13.36 Juan Manuel 2 comentarios

Dise√Īo | CSS | fotos

Galería de imágenes que se amplían con CSS

Galer√≠a de im√°genes que se ampl√≠an con CSSHoy en d√≠a todo lo que a dise√Īo y presentaci√≥n en un sitio web se refiere se hace con estilos CSS, por lo que siempre vienen bien estos trucos para aplicar alg√ļn detalle de calidad a nuestra p√°gina, claro, respetando los est√°ndares.

Si tienes una galer√≠a de im√°genes con vistas previas puedes usar este sencillo truco para ir ampliando las fotos al pasar el puntero del mouse por encima. Como utiliza la propiedad overflow, no desarma el dise√Īo del sitio, adem√°s es muy veloz. Seguir leyendo

04/jun/08, 16.12 Juan Manuel 3 comentarios

Dise√Īo | Trucos | CSS

Los 12 trucos de CSS m√°s usados… y necesarios

Los 12 trucos de CSS m√°s usados‚Ķ y necesariosAhora todo se maqueta y/o dise√Īa con CSS. Los potentes estilos reducen el peso de la p√°gina, permiten que el HTML se centre en un sentido “sem√°ntico” y se posicione mejor en los buscadores, as√≠ como tambi√©n nos permiten redise√Īar un sitio entero en dos patadas.

Por eso son tan √ļtiles esos peque√Īos trucos de bolsillo que uno suele ir recolectando por ah√≠, para echar mano en un momento de necesidad. Con gusto te dejo esta lista de 12 trucos de CSS que a mi modo de ver son muy usados y tambi√©n muy necesitados. Seguir leyendo

22/may/08, 12.35 Juan Manuel 21 comentarios

Dise√Īo | CSS | tipograf√≠a

7 fuentes tipográficas que seguro no usas en CSS, aunque podrías

7 fuentes tipogr√°ficas que seguro no usas en CSS, aunque deber√≠asLos estilos CSS nos trajeron muchas ventajas en cuanto al dise√Īo de nuestros sitios web, pero por alguna raz√≥n parece que estamos limitados al uso de 4 o 5 tipos de fuentes que est√°n presentes en cualquier computadora, por miedo a que las dem√°s no se visualicen correctamente.

As√≠ es como no vemos otra cosa que Arial, Helvetica o Georgia en la mayor√≠a de los blogs de la red. Pero hoy en d√≠a tenemos una gama m√°s amplia de opciones a la hora de elegir, siempre dentro de las fuentes “seguras”. Te recomiendo 7 que sin duda deber√≠as tener en cuenta. Seguir leyendo

12/may/08, 16.12 Juan Manuel 3 comentarios

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder