Tecnología

Inicio

Definición de un documento CSS3

Definición de un documento CSS3


Un documento CSS 3 es una hoja de estilo en cascada que especifica cómo la información de un documento HTML pantallas asociadas. Su definición incluye significativamente más funciones que las versiones anteriores de CSS. Además de las funciones de gráficos adicionales, CSS3 le permite seleccionar más etiquetas HTML y definir la forma en que se muestran en una página Web. La estructura modular de CSS3 permite una liberación gradual de nuevas características, y permite que los navegadores se actualizan en etapas para soportar las últimas definiciones.

Cajas y sombras

CSS3 permite la creación de cajas u otros elementos con las esquinas redondeadas y sombras paralelas. El atributo "border-radius: 10px" redondea las esquinas de un cuadro a un cuarto de círculo con un radio de diez píxeles. El atributo "box-shadow: 3px 3px 2px azul" crea una gota de sombra de la caja. La sombra es desplazado por 3 píxeles verticales y tres píxeles horizontalmente. Tiene una mancha de 2 píxeles y el color azul. El mismo atributo, aplicado al texto como "texto-sombra 1px 1px roja" dará una sombra roja sin ninguna falta de definición de desplazados por 1 píxel.

transiciones

Otra característica de la definición de CSS3 es el atributo de "transición". Permite la animación gráfica de un sitio web al hacer la transición de una imagen a otra. Normalmente, cuando un objeto cambia, por ejemplo, en respuesta a un cursor se cierne sobre él, el cambio es instantáneo. Con la transición atribuyen el diseñador puede controlar el cambio. La sintaxis "5s de color transición de facilidad en 1s" significa que el color del objeto cambia después de un retardo de 1 segundo. El cambio se producirá más de 5 segundos de duración y facilidad, lo cual significa que el cambio comenzará lentamente y acelerar. Las alternativas son la facilidad de salida, lo que significa un final lento; lineal, lo que significa un cambio constante y la facilidad, lo que significa un lento comienzo y el final.

selectores

Los selectores permiten a un diseñador para aplicar atributos a los elementos seleccionados. CSS incluye una amplia variedad de selectores en su definición pero CSS3 añade varias otras nuevas para determinar los atributos de algunos elementos de una serie. Estos son los primeros en el niño y el último de los hijos selectores. Por ejemplo, la sintaxis para colorear el primer elemento de una lista roja, es "li: first-child {color: red;}", donde "li" es el elemento de un elemento de una lista. Estos selectores pueden cambiar otros atributos, como el centrado del último párrafo en una página. La sintaxis es "t: last-child {align: center}", donde p es el elemento para parapraph.

gradientes

Otra nueva característica de la definición de CSS3 es la capacidad de especificar los gradientes de colores en lugar de fondos de un solo color. Los diseñadores crearon anteriormente imágenes con degradados y los colocaron como fondos. Con gradientes CSS3, es posible especificar simplemente dos colores y hacer que cambian suavemente de un lado al otro en el fondo de la página Web. La sintaxis "background: lineal gradiente (amarillo, blanco);" da un gradiente horizontal a partir de color amarillo en la parte superior y fundido en blanco.


Artículos relacionados