CSS Avanzado
CategoríaRecursos y guías sobre CSS a nivel avanzado.
Crear un logotipo con CSS
¿Tienes curiosidad por aprender a realizar logotipos en CSS como el de Internet Explorer u Opera, entre otros? En este artículo explicaré como crear un logotipo con CSS, teniendo como fuente de inspiración el logotipo que asocio a la entrada. Se resumen en varios pasos, bastante sencillos, que dan como resultado un logotipo muy interesante … Lee más!
Selectivizr, compatibilizando atributos CSS3 y pseudo-clases a IE6-8
Siempre tenemos incompatibilidades y problemas con Internet Explorer, por suerte existen herramientas y arreglos para solucionar dichos problemas. :Select[ivizr] es una librería javascript que nos permitirá aplicar las pseudo-clases y atributos CSS3 a Internet Explorer (versión 6 a la 8). Es muy fácil de utilizar, únicamente tendremos que subir los archivos correspondientes a nuestro servidor y … Lee más!
Bonita caja de búsqueda con CSS3
Son miles las maravillas que podemos hacer con CSS3. Smashing Magazine ha estado investigando y ha creado una bonita caja de búsqueda realizada con CSS3, aplicando degradados con CSS Gradient, creando círculos redondeados con border-radius y aplicando sombra inferior con box-shadow inset. Ahora vamos a comprobar como se crea cada elemento que forma parte de … Lee más!
Animación de Spiderman y sistema solar con CSS3
Es impresionante lo que puede llegar a hacer CSS3. CSS3 nos está ayudando a todo el mundo, para crear sitios web más elegantes y accesibles, quitando relevancia poco a poco a Flash. CSS3, junto con HTML5, es el futuro. Por ejemplo, con un poco de jquery, HTML5 y teniendo como principal protagonista, CSS3, podemos lograr … Lee más!
Simular la realidad con CSS3
CSS3 es, de largo, la versión de CSS que más opciones nos deja para personalizar y maquetar nuestro sitio web de forma cómoda y sencilla. Los chicos de InspectElement han desarrollado algunos ejemplos que simulan la realidad, como pueden ser Animación de DVD, Polaroids, Giro de imagen y botones presionados, demostrando así el potencial de … Lee más!
Cómo mejorar la usabilidad de tu sitio con CSS
La usabilidad es muy importante de cara a cualquier proyecto, y más si este es importante, ya que habrá mayor diversidad de usuarios. Es necesario optimizar todos los elementos del sitio para conseguir una buena usabilidad. En esta entrada muestro 7 sencillos trucos para mejorar la usabilidad de nuestro sitio con CSS. Seleccionar con distinto … Lee más!
Soluciona una gran lista de errores en IE con IE7-JS
IE7-JS es una librería en Javascript (versión 2.0 beta) creada por Dean Edwards, que nos permitirá solucionar una gran cantidad de errores en IE. La librería está disponible en dos archivos, IE7.JS e IE8.JS (En IE7.JS encontramos una gran cantidad de arreglos a fallos de IE7, mientras que el resto de mejoras están incluidas en IE8.JS. … Lee más!
Varias soluciones a la transparencia PNG en IE6
La transparencia PNG en Internet Explorer 6 no es posible, pero podemos aplicar algunos hacks para, por lo menos, simularla. Anteriormente publiqué una entrada exponiendo algunas soluciones para hacer posible la transparencia en Internet Explorer 6. Ahora, os enseñaré otros métodos. En muchas ocasiones necesitamos usar imágenes .PNG en nuestros diseños, y también que se … Lee más!
Crear una vista adaptable estilo Youtube con CSS y JQuery
Desde que Youtube implementó la novedad de “change view” (cambiar vista), permite a los usuarios cambiar entre el modo de vista normal y panorámica y así ampliar/reducir el área del vídeo. A pesar de esta novedad, la accesibilidad no se pierde, lo que es un gran punto a favor. En esta entrada aprenderemos a crear … Lee más!
Modificar y expandir tu CSS con Rosemary
Todo el mundo busca que sus códigos CSS sean compatibles con todos los navegadores. Rosemary es un sistema de modificación basado en un filtro open source modular para archivos CSS (OSMCFBMS4CSS). Hay que destacar que no es un framework CSS. Todo el que lo desee puede ir creando filtros para Rosemary, solo es necesario tener … Lee más!
Solución a la transparencia PNG en IE 6 (II)
La transparencia PNG en IE 6 no funciona correctamente, pero podemos encontrar una solución a este problema con el hack que os voy a mostrar a continuación. Se puede usar con imágenes de fondo o para imágenes HTML en línea. Esta entrada es una ampliación de la expuesta anteriormente. Imágenes de fondo No puede ser … Lee más!
Gráfica de compatibilidad de navegadores con WebKit
Los navegadores basados en Webkit cada vez van siendo más compatibles, pero aún falta bastante para que todos tengan el mismo índice de compatibilidad. Desde Ajaxian nos muestran una gráfica comparativa de compatibilidad de todos los navegadores que utilizan como motor de renderizado a WebKit. Safari 4.0 está en primer lugar (94%), seguido por la … Lee más!
