/* Este código implementa el efecto de degradado cuando el mouse se desliza sobre el enlace*/
a {
color: #007c21;
transición: color .4s facilidad;
}
a: flotar { color: #00bf32 }Con CSS3 puedes crear esquinas redondeadas para la mayoría de los elementos, incluidos elementos de formulario, imágenes e incluso texto de párrafo, sin introducir marcas o imágenes adicionales.
<!DOCTYPE html> <html lang="es"> <cabeza> <meta juego de caracteres="utf-8" /> <title>Esquinas redondeadas</title> <enlace rel="hoja de estilo" href="css/esquinas-redondeadas.css" /> </cabeza> <cuerpo> <div class="todas las esquinas"></div> <div class="una esquina"></div> <div class="esquinas-elípticas"></div> <div class="círculo"></div> </cuerpo> </html>
Cuatro ejemplos que utilizan esquinas redondeadas de CSS, incluidos los prefijos de proveedores necesarios para admitir versiones anteriores de Android, Mobile Safari y los navegadores Safari. Para .circle , usar 75px tiene el mismo efecto que 50% porque el elemento mide 150像素*150像素.
div {
fondo: #999;
flotador: izquierda;
altura: 150 px;
margen: 10px;
ancho: 150 px;
}
.todos los rincones {
-webkit-border-radio: 20px;
radio del borde: 20px;
}
.una esquina {
-webkit-border-arriba-izquierda-radio: 75px;
radio del borde superior izquierdo: 75 px;
}
.esquinas elípticas {
-webkit-border-radio: 50px / 20px;
radio del borde: 50px / 20px;
}
.círculo {
-radio-borde-webkit: 50%;
radio fronterizo: 50%;
} div {
fondo: #ff9;
borde: 5px sólido #326795;
flotador: izquierda;
altura: 150 px;
margen: 10px;
ancho: 150 px;
}
.ejemplo-1 {
/* Hace que el radio de las esquinas superior izquierda e inferior derecha sea 10px y
las esquinas superior derecha e inferior izquierda 20px */
radio del borde: 10px 20px;
}
.ejemplo-2 {
/* Hace que el radio de la esquina superior izquierda sea de 20px y el de todas las demás esquinas de 0 */
radio de borde: 20px 0 0;
}
.ejemplo-3 {
/* Hace que el radio de la esquina superior izquierda sea de 10px, la esquina superior derecha de 20px,
la esquina inferior derecha 0 y la esquina inferior izquierda 30px */
radio del borde: 10px 20px 0 30px;
}-webkit-border-radius: r , donde r es el radio del filete, expresado como longitud (con unidades). Ingrese border-radius: r , donde r es el radio del filete, use el mismo valor que en el paso uno. Esta es la sintaxis abreviada estándar para esta propiedad.-webkit-border-top-left-radius: r , donde r es el radio de la esquina superior izquierda, expresado como longitud (con unidades). Ingrese border-top-left-radius: r , usando el mismo valor para r que en el primer paso. Ésta es la sintaxis estándar de formato largo para esta propiedad. Para crear una esquina superior derecha, use top-right para crear una esquina inferior derecha, use bottom-right para crear una esquina inferior izquierda, use bottom-left .-webkit-border-radius: x/y , donde x es el radio del filete en la dirección horizontal, y es el radio del filete en la dirección vertical, ambos expresados como longitud (con unidad) . Ingrese border-radius: x/y y x iguales a los valores del primer paso.-webkit-border-radius: r donde r es el radio del elemento (con unidad de longitud). Para crear un círculo, utilice la forma corta de la sintaxis, donde el valor de r debe ser igual a la mitad de la altura o el ancho del elemento. Ingrese border-radius: r donde r es el radio del elemento (con unidad de longitud), que es igual a r en el primer paso. Ésta es la sintaxis estándar sin prefijo. Nota: Los navegadores más antiguos que no admiten border-radius solo mostrarán elementos con esquinas cuadradas. border-radius solo afecta las esquinas del elemento al que se aplica el estilo, no las esquinas de sus elementos secundarios. Por lo tanto, si un elemento secundario tiene un fondo, el fondo puede aparecer en las esquinas de uno o más elementos principales, lo que afecta el estilo de las esquinas redondeadas. A veces, el fondo de un elemento (aquí no el fondo de sus elementos secundarios) se mostrará a través de sus esquinas redondeadas. Para evitar esto, puede agregar una regla de estilo después de la declaración border-radius del elemento: background-clip: padding-box;
Utilice text-shadow para agregar efectos de sombra dinámicos al texto en párrafos, títulos y otros elementos sin utilizar imágenes para representar el texto.
text-shadow: . Ingrese los valores que representan x-offset (desplazamiento horizontal), y-offset (desplazamiento vertical), blur-radius (radio de desenfoque) y color respectivamente (los primeros tres valores tienen unidades de longitud y no hay coma entre los cuatro valores separados), por ejemplo -2px 3px 7px #999 .text-shadow: . Ingrese los valores de x-offset (desplazamiento horizontal), y-offset (desplazamiento vertical), blur-radius (radio de desenfoque) y color respectivamente (los primeros tres valores tienen unidades de longitud y no hay coma separación entre los cuatro valores). El valor del blur-radius es opcional. Ingrese, (coma). Repita el paso dos con valores diferentes para las cuatro propiedades.<!DOCTYPE html> <html lang="es"> <cabeza> <meta juego de caracteres="utf-8" /> <título>Sombra de texto</título> <enlace rel="hoja de estilo" href="css/text-shadow.css" /> </cabeza> <cuerpo> <p class="basic">Sombra básica</p> <p class="basic-negative">Sombra básica</p> <p class="blur">Radio de desenfoque</p> <p class="blur-inversed">Radio de desenfoque</p> <p class="multiple">Múltiples sombras de texto</p> </cuerpo> </html>
cuerpo {
fondo: #fff;
color: #222;
fuente: 100%/1,05 helvética, sans-serif;
relleno superior: 20px;
}
pag {
color: #222; /* casi negro */
tamaño de fuente: 4,5 em;
peso de fuente: negrita;
margen: 0 0 45px;
}
p: último hijo {
margen: 0;
}
.básico {
sombra de texto: 3px 3px #aaa;
}
/* utiliza compensaciones negativas; también puedes mezclar compensaciones positivas y negativas */.
.básico-negativo {
text-shadow: -4px -2px #ccc /* un gris un poco más claro que #aaa */
}
.desenfoque {
sombra de texto: 2px 2px 10px gris;
}
.desenfoque-invertido {
color: blanco;
sombra de texto: 2px 2px 10px #000 /* negro */
}
/* este ejemplo tiene dos sombras, pero puedes incluirlas
más separando cada uno con una coma */
.múltiple {
sombra de texto:
2px 2px blanco,
6px 6px rgba(50,50,50,.25);
} Estas clases demuestran varios efectos text-shadow . El primero, el segundo y el quinto omiten el valor del radio de desenfoque. La clase .multiple nos dice que se pueden agregar múltiples estilos de sombra a un solo elemento, con comas separando cada conjunto de atributos. De esta manera, al combinar múltiples estilos de sombras, puedes crear efectos especiales e interesantes.
Es decir, ingrese text-shadow: none; No es necesario ingresar este atributo y utiliza el prefijo del fabricante.
La propiedad text-shadow acepta cuatro valores: x-offset con unidades de longitud, y-offset con unidades de longitud, blur-radius opcional con unidades de longitud y color . Si no se especifica blur-radius , se supone que su valor es 0. x-offset e y-offset positivos o negativos, lo que significa que 1px y -1px son válidos. El valor blur-radius debe ser un número entero positivo. Los tres valores pueden ser 0. Aunque la sintaxis de text-shadow es similar a la de las propiedades de borde y fondo, no puede especificar cuatro valores de propiedad separados como borde y fondo. Si no se especifica text-shadow , utiliza el valor inicial none .
Utilice la propiedad text-shadow para agregar una sombra al texto de un elemento y use la propiedad box-shadow para agregar una sombra al elemento mismo. Su conjunto de propiedades base es el mismo, pero box-shadow también permite el uso de dos propiedades opcionales: la propiedad de palabra clave inset y spread (usada para expandir o contraer la sombra).
box-shadow acepta seis valores: x-offset y y-offset y con unidades de longitud, blur-radius opcional con unidades de longitud, palabra clave inset opcional, valor spread opcional con unidades de longitud y valor color . Si no se especifican los valores de blur-radius y spread , se establecen en 0.
<!DOCTYPE html> <html lang="es"> <cabeza> <meta juego de caracteres="utf-8" /> <título>Sombra del cuadro</título> <enlace rel="hoja de estilo" href="css/box-shadow.css" /> </cabeza> <cuerpo> <div clase="sombra"> <p>Sombra con Desenfoque</p> </div> <div class="sombra-negativa"> <p>Sombra con desplazamientos negativos y desenfoque</p> </div> <div class="sombra-spread"> <p>Sombra con desenfoque y extensión</p> </div> <div class="sombra-compensaciones-0"> <p>Sombra con desplazamientos cero, desenfocado y extendido</p> </div> <div class="inset-sombra"> <p>Sombra insertada</p> </div> <div clase="múltiple"> <p>Múltiples sombras</p> </div> <div class="sombra-negativa-propagación"> <p>Sombra con desenfoque y extensión negativa</p> </div> </cuerpo> </html>
cuerpo {
fondo: #000;
color: #fff;
}
h1 {
familia de fuentes: sans-serif;
tamaño de fuente: 2,25 em;
altura de línea: 1,1;
alineación de texto: centro;
}
/* NOTA: Las URL de las imágenes de fondo son diferentes a las del ejemplo que se muestra en el libro, porque he colocado las imágenes en una subcarpeta (llamada "img"), como es típico al organizar un sitio. Pensé que sería útil para usted ver cómo construir las URL de la imagen de fondo en estas circunstancias. Tenga en cuenta que las URL son relativas al lugar donde se encuentra la hoja de estilo, NO a la página HTML que muestra la imagen */.
.cielo nocturno {
color de fondo: azul marino /* color alternativo */
imagen de fondo:
URL(../img/ovni.png),
URL(../img/stars.png),
URL(../img/stars.png),
URL(../img/sky.png);
posición de fondo:
50% 102%,
100% -150 píxeles,
0-150 píxeles,
50% 100%;
repetición de fondo:
sin repetición,
sin repetición,
sin repetición,
repetir-x;
altura: 300 píxeles;
margen: 25px auto 0 /* ligeramente diferente al libro */
relleno superior: 36px;
ancho: 75%;
} El programa anterior se utiliza para demostrar el efecto de usar box-shadow para agregar una o más sombras. Cada una de las primeras cinco clases aplica un estilo de sombreado diferente entre sí. La última clase aplica dos sombras (se pueden aplicar más). Los navegadores que no entienden box-shadow simplemente ignorarán estas reglas de estilo CSS y renderizarán la página sin sombra.
-webkit-box-shadow: . Ingrese los valores que representan x-offset , y-offset , blur-radius , spread y color respectivamente (los primeros cuatro valores tienen unidades de longitud), por ejemplo 2px 2px 5px #333 . Ingrese box-shadow: y repita el paso dos.-webkit-box-shadow: . Ingrese los valores que representan x-offset , y-offset , blur-radius , spread y color respectivamente (los primeros cuatro valores tienen unidades de longitud), por ejemplo, 2px 2px 5px #333 . Ingrese inset después de los dos puntos y luego ingrese un espacio (también puede ingresar inset y un espacio antes del segundo paso). Ingrese box-shadow: y repita los pasos dos y tres.-webkit-box-shadow: . Ingrese los valores que representan x-offset , y-offset , blur-radius , spread y color respectivamente (los primeros cuatro valores tienen unidades de longitud), por ejemplo, 2px 2px 5px #333 . Si es necesario, incluya la palabra clave inset . Introduzca una coma. Repita el paso dos con valores diferentes para cada atributo. Ingrese box-shadow: y repita los pasos del dos al cuatro.-webkit-box-shadow: none; Ingrese box-shadow: none; Nota: Los valores x-offset , y-offset y y spread pueden ser enteros positivos o negativos. El valor blur-radius debe ser un número entero positivo. Los tres valores pueden ser cero. La palabra clave inset permite colocar la sombra dentro del elemento.
Se pueden aplicar múltiples fondos a casi cualquier elemento.
<!DOCTYPE html> <html lang="es"> <cabeza> <meta juego de caracteres="utf-8" /> <title>Múltiples fondos</title> <enlace rel="hoja de estilo" href="css/varios-fondos.css" /> </cabeza> <cuerpo> <div class="cielo-nocturno"> <h1>En el cielo nocturno...</h1> </div> </cuerpo> </html>
...
.cielo nocturno {
color de fondo: azul marino /* color alternativo */
imagen de fondo:
URL(../img/ovni.png),
URL(../img/stars.png),
URL(../img/stars.png),
URL(../img/sky.png);
posición de fondo:
50% 102%,
100% -150 píxeles,
0-150 píxeles,
50% 100%;
repetición de fondo:
sin repetición,
sin repetición,
sin repetición,
repetir-x;
altura: 300 píxeles;
margen: 25px auto 0 /* ligeramente diferente al libro */
relleno superior: 36px;
ancho: 75%;
}Aplique varias imágenes de fondo a un solo elemento (no es necesario utilizar prefijos de proveedores)
Ingresebackground-color: b , donde b es el color de fondo alternativo que desea aplicar al elemento. Ingrese background-image: u , donde u es una lista de url a las que se hace referencia mediante rutas absolutas o relativas (separadas por comas. Para los navegadores que admiten varios fondos, las imágenes se superponen entre sí. La primera de la lista está separada por comas en la parte superior. Ingrese background-position: p , donde p es un par de conjuntos de x-offset y y-offset y (pueden ser positivos o negativos; con unidad de longitud o palabra clave, como center top ). comas. Para cada url especificada en el segundo paso, debe haber un conjunto de x-offset y y-offset . Ingrese background-repeat: r , donde r es repeat-x , repeat-y o no-repeat , separado por comas, un valor para cada url especificada en el segundo paso.Para varias imágenes de fondo, se puede utilizar la sintaxis estándar de formato abreviado, utilizando comas para separar cada conjunto de parámetros de fondo. El beneficio de esta representación es que los desarrolladores pueden especificar un color de fondo alternativo o una imagen para navegadores más antiguos.
.cielo nocturno {
/* respaldo con un color y una imagen */
fondo: URL azul marino (../img/ufo.png) parte inferior central sin repetición;
/* para navegadores compatibles */
fondo:
url(../img/ufo.png) sin repetición 50% 102%,
url(../img/stars.png) sin repetición 100% -150px,
url(../img/stars.png) sin repetición 0 -150px,
url(../img/sky.png) repetir-x 50% 100%;
altura: 300 píxeles;
margen: 25px automático 0;
relleno superior: 36px;
ancho: 75%;
}<!DOCTYPE html> <html lang="es"> <cabeza> <meta juego de caracteres="utf-8" /> <title>Fondos degradados</title> <enlace rel="hoja de estilo" href="css/gradients.css" /> </cabeza> <cuerpo> <div class="vertical-down"><p>predeterminado</p></div> <div class="vertical-up"><p>arriba</p></div> <div class="horizontal-rt"><p>a la derecha</p></div> <div class="horizontal-lt"><p>hacia la izquierda</p></div> <div class="angle-bot-rt"><p>a <br />abajo a la derecha</p></div> <div class="angle-bot-lt"><p>a <br />abajo a la izquierda</p></div> <div class="angle-top-rt"><p>arriba a la derecha</p></div> <div class="angle-top-lt"><p>arriba a la izquierda</p></div> <div class="angle-120deg"><p>120deg</p></div> <div class="angle-290deg"><p>290deg</p></div> <sección clase="radial"> <div class="radial-center"><p>predeterminado</p></div> <div class="radial-top"><p>en la parte superior</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70 % 90 % en <br />abajo a la izquierda</p></div> <div class="radial-various-1"><p>varios 1</p></div> <div class="radial-various-2"><p>varios 2</p></div> </sección> <sección clase="paradas-color"> <div class="color-stops-1"><p>amarillo 10%, verde</p></div> <div class="color-stops-2"><p>arriba a la derecha, amarillo, <br>verde 70%, <br>azul</p></div> </sección> </cuerpo> </html>
cuerpo {
relleno: 1,25 em; /* 20px/16px, por lo que 20px en cada lado */
tamaño de fuente: 100%;
}
div {
flotador: izquierda;
altura: 150 px;
margen: 10px;
ancho: 150 px;
}
pag {
color: #fff;
fuente: negrita 1,25em/1 sans-serif /* 20px/16px */
relleno superior: 1,65 em /* 33px/16px */
alineación de texto: centro;
}
/* NOTA: Los gradientes a continuación están en la sintaxis estándar CSS3. Los navegadores que los admiten son Chrome 26+, Firefox 16+, IE 10+ y Opera 12.10+. Consulte gradientes-con-prefijos-de-navegador.css para ver los mismos. efectos de degradado, pero con el código de prefijo del proveedor también incluido para que los degradados funcionen en varios navegadores más antiguos. Un fondo con un comentario "alterno" es el color que se mostrará en los navegadores. que no admiten la sintaxis de degradado. También puedes usar una imagen de fondo como respaldo (ya sea sola o en combinación con un color). Por ejemplo, fondo: URL roja (imagen-gradiente.jpg) no-repeat; .*/
/* GRADIENTE LINEAL
------------------------------------------ */
/* :::: Vertical :::: */
.vertical-abajo {
fondo: plata; /* respaldo */
/* gradiente predeterminado, por lo que no es necesario especificar "hasta abajo" antes de los colores */
fondo: degradado lineal (plateado, negro);
}
.vertical-arriba {
fondo:plata;
fondo: degradado lineal (arriba, plateado, negro);
}
/* :::: Horizontal :::: */
.horizontal-rt {
fondo: plata; /* respaldo */
fondo: degradado lineal (a la derecha, plateado, negro);
}
.horizontal-lt {
fondo: plata; /* respaldo */
fondo: degradado lineal (a la izquierda, plateado, negro);
}
/* :::: Ángulos diagonales :::: */
/* Nota: Las figuras de la página 377 muestran el aguamarina como color alternativo, pero lo cambié.
a azul marino a continuación porque el texto blanco será más fácil de leer sobre un fondo azul marino */.
.ángulo-bot-rt {
fondo: azul marino; /* respaldo */
fondo: gradiente lineal (abajo a la derecha, aguamarina, azul marino);
}
.angle-bot-lt {
fondo: azul marino; /* respaldo */
fondo: gradiente lineal (abajo a la izquierda, aguamarina, azul marino);
}
.ángulo-superior-rt {
fondo: azul marino; /* respaldo */
fondo: gradiente lineal (arriba a la derecha, aguamarina, azul marino);
}
.ángulo-superior-lt {
fondo: azul marino; /* respaldo */
fondo: gradiente lineal (arriba a la izquierda, aguamarina, azul marino);
}
/* :::: Ángulos vía Grados :::: */
.ángulo-120 grados {
fondo: azul marino; /* respaldo */
fondo: gradiente lineal (120 grados, aguamarina, azul marino);
}
.ángulo-290 grados {
fondo: azul marino; /* respaldo */
fondo: gradiente lineal (290 grados, aguamarina, azul marino);
}
/* GRADIENTE RADIAL
------------------------------------------ */
/* :::: Radial :::: */
.radial p {
sombra de texto: 0 0 3px #000;
}
.centro-radial {
fondo: rojo; /* respaldo */
fondo: gradiente radial (amarillo, rojo) /* predeterminado */);
}
.radial-top {
fondo: rojo; /* respaldo */
fondo: degradado radial (arriba, amarillo, rojo);
}
.radial-tamaño-1 {
fondo: rojo; /* respaldo */
fondo: degradado radial (100 px 50 px, amarillo, rojo);
}
.radial-tamaño-2 {
fondo: rojo; /* respaldo */
fondo: gradiente radial (70% 90% en la parte inferior izquierda, amarillo, rojo);
}
.radial-varios-1 {
fondo: rojo; /* respaldo */
fondo: degradado radial (lado más cercano a 70 px 60 px, amarillo, lima, rojo);
}
.radial-varios-2 {
fondo: rojo; /* respaldo */
fondo: degradado radial (30px 30px al 65% 70%, amarillo, lima, rojo);
}
/* DEGRADADOS LINEALES CON PARADAS DE COLOR
------------------------------------------ */
.color-paradas div {
margen inferior: 30px;
}
.color-paradas p {
relleno superior: 25px;
sombra de texto: 0 0 3px #000;
}
.color-paradas-2 p {
tamaño de fuente: 18px;
altura de línea: 1,05;
}
.color-paradas-1 {
fondo: verde; /* respaldo */
fondo: gradiente lineal (amarillo 10%, verde);
}
.color-paradas-2 {
fondo: verde; /* respaldo */
fondo: gradiente lineal (arriba a la derecha, amarillo, verde 70%, azul);
} Ingrese background: color o background-color: color , donde color puede ser un número hexadecimal, un valor RGB o cualquier otro nombre de color admitido. También se pueden usar imágenes. Es mejor no utilizar valores RGBA, HSL o HSLA como colores de fondo alternativos (no se preocupe si no planea admitir IE), porque IE8 y las versiones anteriores no lo admiten.
background: linear-gradient( . Si desea que la dirección del degradado sea de arriba a abajo (la dirección predeterminada), puede omitir este paso. Agregue una coma después de la dirección de entrada, y las direcciones se refieren to top , to right , to bottom right , to top right , etc. O agregue una coma después de la dirección de entrada, donde la dirección se refiere al valor del ángulo (como 45deg , 107deg , etc.) Defina el color del degradado de acuerdo con el "color especificado" que se menciona más adelante );background: radial-gradient( . Especifique la forma del degradado. Si desea especificar el tamaño, puede determinarlo usted mismo según el tamaño especificado en el paso 3. De lo contrario, ingrese circle o ellipse . Especifique el tamaño del degradado Si desea que el tamaño sea el valor especificado automáticamente (el valor predeterminado es ·esquina más alejada·, la esquina más alejada), de lo contrario ingrese un valor de longitud que represente el ancho y la altura del degradado (como 200px o 7em ) o un par. de valores que representan el ancho y alto ( 390px 175px o 60% 85% ) Tenga en cuenta que si solo se usa un valor, el valor no puede ser un porcentaje ni ingresar closest-side , farthest-side , closest-corner cercana o farthest-corner . Estas palabras clave representan hasta dónde puede extenderse el degradado en relación con su centro. Los límites determinan el tamaño del degradado at right Puede omitir este paso si desea que el degradado comience at top el centro del elemento. at bottom left , at top right , etc. para representar la posición del centro del degradado. O ingrese un par de coordenadas que representen la posición del centro del degradado, comenzando con at , como at 200px 43px , at 30% 40% , at 50% -10px , etc. Defina el color del degradado ); complete el degradado. Utilice el atributo opacity para modificar la transparencia de un elemento. El método consiste en ingresar opacity: x , donde x representa la opacidad del elemento (dos decimales, sin unidad).
El valor predeterminado de opacity es 1 (completamente opaco) y el rango es 0~1 .
Al utilizar el atributo opacity y el pseudoatributo :hover , puede producir algunos efectos interesantes y prácticos. Por ejemplo, img { opacity: .75; } puede establecer la imagen en un 75% de opacidad de forma predeterminada, e img:hover { opacity: 1; } puede hacer que el elemento se vuelva opaco cuando el usuario pasa el mouse sobre él. Este efecto se ve a menudo al vincular miniaturas a versiones de tamaño completo. Para los visitantes, la levitación potencia el movimiento de la imagen.
El atributo opacity y el color de fondo transparente configurado mediante RGBA o HSLA son dos conceptos que se confunden fácilmente. opacity afecta a todo el elemento (incluido su contenido), mientras que background-color: rgba(128,0,64,.6); dicha configuración solo afecta la transparencia del fondo.
Usar :before y :after es una excelente manera de agregar algunos efectos de diseño increíbles a sus páginas. Se pueden combinar con el atributo content para crear el llamado contenido generado. El contenido generado se refiere al contenido creado a través de CSS en lugar de HTML.
... <p>Esta zona es uno de los espacios más tranquilos de la Villa. Mientras deambulaba, disfrutando de la sombra de los sicomoros y laureles y de la serenata del agua de dos fuentes escultóricas, no pude evitar pensar … href="victoria.html" class="more">Leer más</a></p> ...
/* El contenido generado */
.más:después {
contenido: " "";
} A través del código anterior, el elemento con class="more" puede mostrar una flecha doble después. Si necesita cambiarlo en el futuro, solo necesita modificar la clase .more sin cambiar una gran cantidad de páginas HTML.
El texto se muestra rápidamente en el navegador, pero las imágenes tienden a ralentizar la carga de la página. Para resolver este problema, puede combinar varias imágenes en una sola imagen de fondo ( sprite ) y luego controlar qué parte de la imagen se muestra a través de CSS, utilizando el atributo background-position .
.documentos li {
margen superior: 0,45 em;
}
/* Cada enlace en el HTML tiene esta clase */
.icono {
pantalla: bloque en línea;
altura de línea: 1,1;
tamaño de fuente: .875em;
min-height: 16px; /* establece la altura del icono para que no se corte en absoluto */
relleno-izquierda: 23px;
relleno superior: 2px;
/* permite posicionar el ícono absolutamente en relación con elementos con class="icon" en el HTML */
posición: relativa;
}
.icono:antes {
imagen de fondo: url(../img/sprite.png);
contenido: " ";
mostrar: bloquear;
altura: 16px; /* altura del icono */
izquierda: 0; /* valor predeterminado. cambie esto si desea que el icono aparezca en un lugar diferente */
posición: absoluta;
ancho: 16px /* ancho del icono */
top: 0; /* valor predeterminado. cambie esto si desea que el icono aparezca en un lugar diferente */
}
/* Cambia la posición de la imagen del sprite para cualquier nombre de archivo de documento que termine en .xls */
a[href$=".xls"]:antes de {
posición de fondo: -17px 0;
}
/* Cambia la posición de la imagen del sprite para cualquier nombre de archivo de documento que termine en .docx */
a[href$=".docx"]:antes de {
posición de fondo: -34px 0;
} sprite se pueden aplicar a cualquier cantidad de elementos. En el ejemplo anterior, utilice .icon:before para lograr el efecto deseado. De esta forma, sprite es la imagen de fondo del espacio generado por content: " "; Configúrelo para display: block; para que pueda configurar la altura y el ancho para que coincidan con el tamaño del icono. Sin estas tres propiedades, la imagen no se mostrará. Al usar background-position puede colocar el ícono correcto en esa posición.
Con esto concluye este artículo sobre el uso de CSS3 para mejorar los efectos de estilo. Para obtener más información sobre cómo mejorar los efectos de estilo CSS3, busque artículos anteriores en downcodes.com o continúe explorando los artículos relacionados a continuación. Espero que admita downcodes en el futuro.