Varios consejos de CSS3 que debes conocer

Es posible que muchos de ustedes hayan escuchado muchos rumores sobre CSS3, pero ¿cuáles son algunas de las técnicas de CSS3 que realmente podemos usar hoy en día? En este artículo, le mostraré algunas técnicas distintivas de CSS3 que funcionan bien en algunos de los principales navegadores (como Firefox, Chrome, Safari, Opera). Estos efectos degradarán la representación en navegadores no compatibles (como Internet Explorer). Muchos de los estilos CSS3 propuestos se pueden utilizar de forma inmediata mediante declaraciones específicas del navegador.

Si no sabe cuáles son las declaraciones específicas del navegador, solo debe recordar que todos son prefijos específicos antes de las propiedades de estilo CSS relacionadas con el proveedor del kernel. Debido a que CSS3 aún no es totalmente compatible, debemos utilizar estas declaraciones específicas. La forma específica es la siguiente:

* Prefijo del navegador Mozilla/Firefox/Gecko: -moz-
* Prefijo del navegador Webkit (Safari/Chrome): -webkit- (Nota: algunos prefijos de Wbkit solo se pueden usar en Safari y no son compatibles con Chrome).

Como habrás visto, una desventaja de usar estas declaraciones es que si queremos obtener efectos CSS3 en Firefox, Safari y Chrome, necesitamos usar todos los prefijos anteriores. No es sorprendente que Internet Explorer no sea compatible con CSS3 y, por lo tanto, no tenga una declaración de prefijo específica como otros navegadores importantes.

Bien, basta de eso, intentémoslo ahora mismo. Nota: Las declaraciones de estilo menos estos prefijos son las propuestas de especificaciones reales del estándar W3.

Descripción de demostración (ejemplo) sobre esta página

Todos estos ejemplos están en esta página. Si no puede ver los efectos de los ejemplos normalmente (o solo puede ver parte de ellos), significa que el navegador que está utilizando no admite estos efectos CSS3.

efecto de sombra

Los efectos de sombra aceptan múltiples valores de parámetros. El primero es el color de la sombra, que también acepta otros cuatro valores de longitud (longitud). Los dos primeros valores de longitud son el desplazamiento X (horizontal) y el desplazamiento Y (vertical). El siguiente parámetro es un valor que refleja la borrosidad. El cuarto y último valor se utiliza para definir la extensión del desenfoque.

sombra de cuadro: #333 3px 3px 4px;
-moz-box-sombra: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Demostración del efecto de sombra

efecto degradado

Los estilos de degradado CSS3 pueden resultar confusos al principio, especialmente las diferencias entre los degradados -moz y -webkit. En -moz, primero debe definir la dirección del degradado y luego definir los colores inicial y final. El degradado de -webkit es un poco más complicado. Primero debe definir el tipo de degradado, luego los dos valores siguientes definen la dirección y los dos últimos valores definen el color inicial y el color final. del gradiente.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(lineal, arriba a la izquierda, abajo a la izquierda, desde(#1aa6de), hasta(#022147));

Demostración del efecto degradado

Modo de color RGBA

La definición de color real de RGBA no es tan complicada como parece. Acepta cuatro valores de parámetros: valor rojo, valor verde, valor azul y transparencia. No utilizamos el valor hexadecimal de color hex (#). Configuramos el color en modo RGB, donde la transparencia puede establecer el efecto transparente del color. La transparencia varía de 0 a 1, siendo 0 completamente opaco y 1 completamente transparente. La transparencia de los siguientes ejemplos de demostración es 0,5, la transparencia del elemento es 50% y rgba no requiere ninguna declaración de prefijo de navegador específica.

color de fondo: rgba(0, 54, 105, .5);

Modo de color HSL (Tono H, Saturación S, Luminosidad L)

Además de RGBA, CSS3 también admite el modo de color HSL. Esto nos da mucho margen de maniobra a la hora de elegir colores y tonos. En el modelo de color HSL, H representa tono, S representa croma y L representa brillo. El tono es el valor del ángulo en la rueda de colores, mientras que la saturación y el brillo son los valores porcentuales del color.

color de fondo: hsl(209,41,2%, 20,6%);

Ejemplo de demostración de HSL

color del borde

Para utilizar este estilo CSS, debe definir el borde superior, el borde derecho, el borde inferior y el borde izquierdo respectivamente para lograr los siguientes efectos. Observa que se define un borde de 8 píxeles y luego el borde se define en 8 colores diferentes. Esto se debe a que la cantidad de colores del borde debe corresponder al valor del ancho de píxeles del borde.

borde: 8px sólido #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Demostración del color del borde

Configuración de color de selección de texto

Debo decir que la definición del color de la selección de texto es una característica nueva bastante interesante. Cuando vi esto por primera vez en CSS Tips, pensé que era muy reflexivo. Con el par de pseudoelementos ::selection, puede cambiar el color y el fondo cuando el usuario selecciona un elemento de texto. Si estás pidiendo una opinión, creo que es muy hermosa. Aunque ::selection se eliminó del borrador actual de CSS3, esperamos agregarlo más adelante.

::selección {fondo: #3C0; /* Safari */color: #90C;}::-moz-selection {fondo: #3C0;* Firefox */color: #90C;}

Demostración de color de selección de texto

deformación

Con los estilos de transformación, puede hacer que un elemento parezca más grande al pasar el mouse. Establezca el valor de Escala en un valor mayor que 1 y el elemento se reducirá. Por el contrario, si el valor es inferior a 1, se reduce el tamaño del elemento. Además de Escala, hay muchas otras deformaciones diferentes disponibles. Puedes visitar la página del desarrollador de Firefox para ver lo que pueden lograr.

-moz-transform: escala (1,15); -webkit-transform: escala (1,15);

Demostración del efecto de deformación.

diseño de varias columnas

Con este nuevo estilo de diseño de varias columnas, puedes darle a tu texto un efecto de diseño de "periódico". En comparación con el método de implementación en CSS2, en CSS3, es mucho más sencillo para nosotros lograr este tipo de efecto. A continuación, especifico la cantidad de columnas que necesita el pájaro, así como el tipo de reglas de separación y el tamaño de los espacios entre las columnas. Es fácil de usar, ¿verdad?

-moz-column-count:3;-moz-column-rule: sólido 1px negro;-moz-column-gap: 20px;

Resumir

Espero estar tan entusiasmado con estas características de CSS3 como lo estoy. Ofrece a los diseñadores y desarrolladores web más poder y simplifica muchos aspectos. Ahora solo queda esperar a que todos los navegadores lo soporten. Por supuesto, el conocimiento que demuestro aquí es sólo la punta del iceberg de las nuevas funciones de CSS3. Si quieres más información, consejos y ayuda te recomiendo visitar las siguientes webs.