¿Cómo trabajar con los selectores CSS3
A mediados de 2010, los diseñadores y desarrolladores web se regocijaron como CSS3 comenzó a hacer su camino en la corriente principal. Desde entonces, el apoyo del navegador para CSS3 ha aumentado y mejorado constantemente, a pesar de CSS3 aún no es oficialmente un estándar W3C.
De hecho, el único inconveniente (si aún quieres llamarlo así) para el uso de estos selectores de hoy es que es posible que de vez en cuando todavía tendrá que añadir algunos prefijos específicas del navegador a tu CSS para asegurar que todos los estilos CSS3 aparecen correctamente en la mayor versiones de los navegadores más populares.
Para ilustrar, si todos los navegadores admiten el CSS3 columnas selector, sólo se necesitaría para especificar un solo columnas declaración en su estilo como esto:
div {columnas: 100px 3-}Sin embargo, debido a este selector no se admite en la misma forma por todos los navegadores populares, la solución es escribir su declaración CSS3 solo primero, y luego directamente debajo de él se puede incluir declaraciones duplicadas con prefijos específicas del navegador. Nota cómo los comentarios CSS se añade a la CSS para identificar los navegadores asociados a cada prefijo:
div {columnas: 100px 3--webkit-columnas: 100px 3- / * Safari y Chrome * /-moz-columnas: 100px 3- / * Firefox * /}Aquí está una lista de prefijos CSS3 por navegador:
| Navegador | Prefijo |
|---|---|
| explorador de Internet | -Sra- |
| Firefox | -moz- |
| Google Chrome | -webkit- |
| Safari | -webkit- |
| Opera | -o- o -xv- |
Para una lista puesta al día de la compatibilidad con exploradores para todas las propiedades de CSS3, echa un vistazo a la tabla al w3schools.com.
También asegúrese de descargar una copia gratuita de la revista Smashing CSS3 Cheat Sheet PDF, que puede ayudarle a descubrir cómo utilizar CSS3 en sus diseños web: Smashing Magazine.
Recursos en línea para generar gradientes CSS3 La capacidad de generar mezclas complejas de gradiente es una de las mejoras realmente dramáticos en CSS3. Hasta el advenimiento de CSS3, los diseñadores se basaron en los archivos de imagen de baldosas para crear fondos texturizados detrás de…
4 lugares para encontrar generadores css3 CSS3 generators, que son herramientas que puede utilizar para crear, interactuar con, o código de prueba. Estas herramientas incluyen una amplia gama de tipos específicos, incluyendo asistentes, diseñadores, Entornos de Desarrollo Integrado…
Soporte CSS3 y navegador El estado actual de las normas para la compatibilidad con exploradores web para efectos CSS3 y transformaciones es en flujo. Lo más probable, con el tiempo los poderes fácticos estar en el mundo del navegador - quienes publican Internet Explorer,…
Cómo agregar varias imágenes de fondo y rotar objetos con css3 Con CSS3, puede agregar fácilmente como muchas imágenes de fondo a cualquier elemento a su gusto. También puede rotar las imágenes. La ilustración muestra un ejemplo de un recipiente con tres imágenes de fondo, un patrón, y dos archivos PNG…
¿Cómo aplicar la opacidad / transparencia en css3 La opacidad o transparencia es un nuevo efecto en CSS3. Los diseñadores están realmente en las primeras etapas de la experimentación con este efecto. En CSS3, la transparencia se define mediante la asignación de un valor a la propiedad de…
Cómo aplicar el efecto de la frontera de radio css3 El efecto CSS3 border-radius define esquinas redondeadas. Y, es necesario utilizar prefijos específicas del navegador cuando se define un radio de frontera. Aquí algunas reglas para la definición de un radio de frontera:No se puede aplicar un…
Cómo diseñar efectos de capa usando css3 layerstyles La creación de la apariencia correcta para una capa CSS3 puede ser difícil. Una capa se compone de la sombra exterior, frontera y sombra interior de los elementos (como un ) Que cree. LayerStyles permite diseñar visualmente los efectos de capa…
¿Cómo optimizar aplicaciones CSS3 con Modernizr Hay muchos navegadores diferentes y versiones de navegadores en uso hoy en día. No todos ellos son óptimas para CSS3. Aquí es donde entra en juego Modernizr. Sus desarrolladores llaman "una biblioteca javascript que detecta características…
Cómo redondear los bordes y crear varias columnas con css3 En lugar de tener que utilizar hasta cuatro imágenes separadas para dar la ilusión de una forma curvada en su sitio web, con CSS3 ahora puede crear contenedores con esquinas curvas! Aquí está el código, que cuenta con la declaración de CSS3…
Cómo utilizar un selector de etiquetas o un elemento en css3 Tag (o elemento) selectores son secuencias de caracteres en CSS3 que se utilizan para seleccionar las etiquetas como y. De hecho, usted puede seleccionar cualquier etiqueta HTML de esta manera. Un selector de etiquetas siempre se basa en el nombre…
Cómo utilizar los valores de color en css3 CSS3 soporta un número de sistemas de valores de color. El único requisito es que el navegador también es compatible con el sistema de color. Aquí están los sistemas de color que apoyan la mayoría de los navegadores:Rojo, Azul, Verde (RGB):…
¿Cómo trabajar con varias columnas en css3 CSS3 ofrece un nuevo método para trabajar con columnas que no le obliguen a tener un grado de matemáticas y realizar configuraciones de prueba con estilos arcanos.Los estilos de columna proporcionan los medios para crear varias columnas en una…