En otros capítulos hemos visto el uso de selectores y otras cuestiones de CSS, no quiere decir esto que eso fuera CSS2 y ahora pasemos a CSS3.
La versión 3 es una evolución que simplemente aporta nuevos elementos a los que ya había y quizá elimina otros que quedan obsoletos según las nuevas formas de diseñar las páginas web.
Índice de contenidos del artículo
Para bien o para mal, CSS3 consta de múltiples módulos que están en constante evolución. Podemos ver el estado y evolución de los mismos en www.w3.org/Style/CSS/current-work
También podemos consultar en caniuse.com
A consecuencia de lo anterior, es posible que haya cosas que no se visualicen de la misma forma en los diferentes navegadores.
Para paliar el problema podemos agregar prefijos específicos para hacer que las reglas funcionen según el motor del navegador. Estos prefijos van precedidos por un guión -, siendo los siguientes:
Un ejemplo sería:
-moz-border-radius: 10px;Podemos trabajar con la librería -prefix-free para olvidarnos de este problema.
Puedes probar el funcionamiento de prefixfree descargando el archivo en el destino del enlace anterior y posteriormente llamándolo en el head del HTML mediante:
Dónde en src va la ruta a dónde hayamos puesto el código descargado.
Un ejemplo en el que se puede observar un funcionamiento distinto según el navegador es con la pseudo-clase ::placeholder, con la que podemos estilar el texto del atributo placeholder de un input de formulario:
::placeholder {color: red;}El código anterior en principio no surte efecto en Edge, para el que deberíamos agregar lo siguiente:
::-ms-input-placeholder {
/* Microsoft Edge */ color: red; }Podemos entonces en su lugar agregar prefixfree para ver que lo soluciona.
Como sabemos, los navegadores aplican un estilado predefinido a los enlaces. Por ejemplo, color de fuente azul subrayada y que cuando visitamos el enlace pasa a estar de otro color.
Por tanto, además de aplicar lo que hemos aprendido hasta ahora, también debemos saber que existen pseudo-clases que sirven para definir estados especiales de elementos como los enlaces.
Estas pseudo-clases son selectores que podemos emplear para aplicar estilos en los diferentes estados.
Para enlaces tenemos:
a:linkEstado por defecto de un enlace cuando no ha sido visitado.
a:visitedEnlace que ya ha sido visitado.
a:active
Para el momento en que seleccionamos el enlace.
a:hoverCuando pasamos el ratón por encima.
Ejemplo:
a:hover {color:green;}a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}
En el código anterior se asigna a los enlaces inline-block para que podamos asignarles padding y margin y position relative para poder aplicarle el z-index.
El z-index lo aplicamos para que el enlace quede por encima del resto de elementos a su alrededor. Al agregar padding estamos incrementando el área clicable y con el margin negativo conseguimos que el resto de elementos no se vean desplazados por causa del padding.
Con la propiedad list-style-type especificamos el tipo de viñeta que se va a mostrar en una lista. Algunos valores posibles son:
list-style-image nos sirve para mostrar una imagen o icono en lugar de la viñeta. El valor que escificamos incluye la URL de destino al recurso:
list-style-image: url ('imagen.png');list-style-position nos sirve para ubicar la viñeta. Puede tener los valores inside o outsite. Con outside posicionamos la viñeta fuera del flujo de texto y con inside dentro.
list-style. Propiedad shorthand que nos permite usar las anteriores en una en el siguiente orden: type, position, image. ejemplo:
list-style: disc inside;Esto de puede aplicar en li, ol y ul.
border-collapse: Propiedad que sirve para determinar cómo se van a separar los bordes de una tabla. El valor predefinido es separate, con el que, si tenemos dos celdas contiguas, veremos los bordes de cada una de ellas y un hueco de separación.
El otro valor posible es collapse. Con este, veremos sólo un borde como separación, incluso en el marco de la tabla.
Cuando disponemos el valor separate en la propiedad anterior, podemos especificar la distancia de separación entre los bordes con la propiedad border-spacing, en la que podemos especificar uno o dos valores. Si especificamos dos valores estableceremos primero el espaciado horizontal y luego el vertical.
Ejemplos:
#tabla1 {border-collapse:collapse;}
#tabla2 {border-spacing: 5px 10px;}Una forma muy común de crear menús horizontales consiste en transformar una lista en un elemento inline. De esta forma se colocan uno de tras de otro y bastará con aplicar algunos estilos más, como eliminar la viñeta, para que quede como un menú como los que usamos actualmente.
No es que haya estilos específicos, pero aplicando lo que hemos aprendido hasta ahora, podemos mostrar los formularios de forma muy elegante:
Para poder estilar de forma más específica contamos con ciertas pseudo-clases que nos vendrán muy bien:
:enabled, :disabled y :checked nos permiten estilar los elementos de formularios cuando estos están activados, desactivados o seleccionados respectivamente.
También existe la pseudo-clase :indeterminate para los botones de opción y cuadros de verificación que no están ni seleccionados y no seleccionados.
Las pseudo-clases :required y :optional para los campos obligatorios u opcionales.
La pseudo-clase :focus nos permite estilar el aspecto del campo activo. Los navegadores dibujan borde alrededor de algunos campos que podemos estilar con la propiedad outline, que se usa igual que border y con outline-offset especificamos el espacio entre el elemento y el borde.
input:focus { outline: 2px solid black;
outline-offset: 2px; }Podemos estilar o crear mensajes de error con las pseudo-clases valid e invalid, las cuales surtirán efecto en función de si la validación empleada mediante el atributo pattern sea válida o inválida.
A continuación un par de ejemplos de formularios estilados. Muchos emplean efectos que aparecen más abajo y selectores que puedes recordar en Uso de Selectores y Herencia en CSS.
Podemos aplicar sombras mediante las propiedades text-shadow y box-shadow.
En el caso de textos usamos la primera, en la que especificamos dos valores en px para aplicarle la distancia horizontal y vertical respectivamente:
text-shadow: 1px 2px;Adicionalmente podemos indicar el nivel de difuminado también expresado en píxels y un color, quedando:
text-shadow: 1px 2px 2px grey;box-shadow funciona de igual forma para las cajas.
También podemos indicar el punto de desvanecimiento de la sombra, es decir, dónde comienza el degradado. Un valor positivo alarga la sombra y uno negativo la estrecha.
Adicionalmente, con los valores inset o outset (predefinido), indicamos si la sombra va hacia el interior o exterior.
Más ejemplos:
Sin difuminado ni extensión
box-shadow: 10px 15px 0 0 grey;Con difuminado
box-shadow: 10px 10px 5px 0 grey;Con extensión
box-shadow: 10px 10px 5px 5px grey;Con extensión negativa
box-shadow: 10px 10px 5px -5px grey;Sin desplazamiento, sólo difuminado
box-shadow: 0 0 20px 0 grey;Se puede usar más de una sombra sobre el mismo elemento separándolas por comas:
La propiedad border-radius nos sirve para aplicar borde redondeados a las cajas. Lo especificamos normalmente con valores numéricos expresados en píxels que representan el radio de la circunferencia.
Al igual que en otras propiedades como los bordes, podemos especificar un valor distinto para cada equina en este caso.
Veamos las posibilidades:
20 píxels de radio en las cuatro esquinas:
border-radius: 20px;En la esquina superior izquierda:
border-top-left-radius: 20px;Esquina superior derecha:
border-top-right-radius: 20px;Esquina inferior izquierda:
border-bottom-right-radius: 20px;Esquina inferior derecha:
border-bottom-left-radius: 20px;También podemos especificar las 4 medidas en una misma instrucción en el mismo orden en que se han indicado arriba:
border-radius: 20px 10px 20px 10px;Ejemplo de tabla con bordes redondeados de la mano del Red Team Design:
Podemos dividir párrafos en columnas con las siguientes propiedades:
column-count: para especificar el número de columnas.
column-gap: para el espacio entre columnas.
column-rule-style: para el estilo de línea de separación. Valores posibles: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial e inherit.
column-rule-width: para el grosor de la línea.
column-rule-color: para el color.
column-rule: propiedad abreviada con las 3 anteriores.
column-rule: 4px solid blue;text-overflow: similar a overflow en cuanto a la funcionalidad, pero en este caso contamos con los valores clip, que corta lo que sobra y ellipsis, que agrega puntos suspensivos.
word-wrap: para cortar palabras largas que pudieran excederse del ancho de la caja contenedora. El valor predefinido es none y con el valor break-wordpermitimos que se dividan las palabras.
word-break: con la que se indican donde se permiten los saltos de línea de una palabra. Valores: normal, keep-all, donde no se permite dividir entre dos letras y break-all, donde se permiten.
Veamos ejemplos de botones habituales aplicando efectos CSS vistos a lo largo de las unidades anteriores:
Como podemos ver, en el código hay una propiedad que no conocemos, se trata de cursor, que puede tomar múltiples valores y sirve para especificar la forma que tomará el cursor del ratón al pasar por encima del botón.
En W3 Schools podemos ver los posibles valores y ejemplos de uso para ver el aspecto.
Adicionalmente, podemos quitar la línea azul que parece tras hacer clic en uno de los botones del menú. Lo podemos conseguir haciendo uso de la propiedad outline con el valor none:
.boton-menu { ... outline:none; ... }Podemos aplicar degradados lineales en el fondo de las cajas empleando linear-gradient() como valor de la propiedad background.
Linear-gradient() admite hasta 3 valores:
Ejemplos:
background: linear-gradient(to top, blue, white, red);background: linear-gradient(-45deg, blue, white 50%);Para podemos aplicar degradados radiales con radial-gradient (), agregando valores para indicar la posición inicial con position, la forma, shape con circle o ellipse como valores y size para indicar hasta dónde llega, con los valores closest-side (lado más cercano), farthest-side (lado más lejano), closest-corner (esquina más cercana) y farthest-corner (esquina más lejana).
Ejemplos:
background: radial-gradient(red, white 50%, green);background: radial-gradient(farthest-side at left
bottom, red, white 100px, green);Adicionalmente podemos hacer repetitivos estos degradados con repeating-linear-gradient y repeating-radial-gradient.
Algunos generadores visuales:
Anteriormente hemos visto cómo podemos usar la propiedad background-image para especificar una imagen como fondo de una caja.
Podemos usar la propiedad background para especificar varias imágenes de fondo con nomenclatura abreviada a partir de background-image, background-positiony background-repeat.
Ejemplo:
background: url('imagen1.jpg') top left no-repeat,
url('imagen2.jpg') top right no-repeat,
url('imagen3.jpg') bottom left no-repeat,
url('imagen4.jpg') bottom right no-repeat;El orden en que las agregamos indica el orden de colocación a modo de capas, ya que pueden solaparse si no caben todas en la caja.
Con background-origin definimos la posición inicial del a imagen de fondo respecto a la caja, por defecto tiene el valor padding-box, que la sitúa en el límite del margen de la caja.
Podemos asignar adicionalmente los valores border-box para ajustarla al borde o content-box para ajustarla al contenido.
Mediante background-clip con los mismos valores, recortamos la imagen.
Prueba ahora con clip:
También podemos especificar el tamaño con background-size asignando valores enpx, % o indicando cover o contain.
No existe una propiedad para controlar la opacidad en las cajas, de modo que tenemos que recurrir a algún truco. Aquí un ejemplo de la mano de CSS Tricks usando el pseudo elemento after.
Podemos determinar el comportamiento del solapamiento de imágenes de fondo mediante la propiedad background-blend-mode.
A esta se le pueden asignar múltiples valores, que podemos ver en el ejemplo de esta página:
background-blend-mode by Mozilla
Aquí podemos ver el ejemplo anterior de las 4 imágenes de Dragon Ball:
Transform es una propiedad que tiene a su vez diversas funciones.
Por defecto, el punto de referencia es el centro del elemento, que podemos modificar con transform-origin, por defecto con valores 50% 50%.
En esta propiedad se pueden especificar también como valores las palabras left, center, right, top y bottom.
Translate sirve para desplazar. Podemos usarla en ambos ejes con dos valores
transform: translate(10px, 10px);O por separado con translateX y translateY
transform: translateX(10px);Scale sirve para escalar, en escala entre 0 y 1 o con porcentaje. Se puede poner más tamaño también. Con dos valores se puede aplicar una escala no proporcional y también podemos hacerlo hacia una dirección con scaleX e Y.
transform: scale(.5);transform: scaleY(.5);Rotate para rotar, en grados (deg) o radianes (rad).
Con la propiedad skew y dos medidas en grados o radianes modificamos la imagen por los ejes provocando una deformación. También se puede usar por ejes separados con X e Y.
Se recomienda probar con una imagen:
Transform:skew(20deg,-5deg);
Transform:skewY(-20deg);Ejemplo aplicando varias:
Transform:scale(.7) rotate(15deg) translatex(5px)
skew(-5deg);Las transiciones deben dares cuando ocurra un evento, como un :hover o un :focus. Empleamos las propiedades transition-property y transition-duration para especificar la propiedad y duración respectivamente.
Podemos ver una tabla de propiedades que podemos emplear en las transiciones en Mozilla Web Docs.
Con la propiedad transition-timing-function podemos especificar diferentes modalidades en la velocidad del movimiento con los siguientes valores: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier.
Con la propiedad transition-delay podemos especificar un retraso en el comienzo.
Podemos usar la propiedad abreviada transition con todos los valores:
transition: left 2s ease-in 2s;Y transiciones múltiples:
#identificador {Transition: width 3s linear,
height 2s linear 3s, opacity 4s linear 6s;}La transición anterior se especifica en el elemento y en el evento especificamos los nuevos valores de las propiedades empleadas en la transición.
#identificador:hover{width:400px; height:120px;
opacity:.3;}Aquí puedes ver el ejemplo anterior con transiciones múltiples.
Veamos ahora un ejemplo de menú desplegable con hover y transiciones:
Aquí un ejemplo de menú dropdown con una animación sencilla de aparición:
See the Pen Menú dropdown con Transición CSS sencilla by diegocmartin (@diegocmartin) on CodePen.
Aquí otro un poco más completo con varios niveles y transiciones de desplazamiento:
Las animaciones constan de etapas, las cuales creamos mediante la regla @keyframes. Cada animación debe tener el menos una etapa.
Disponemos también de una propiedad abreviada animation en la que especificamos su comportamiento en el siguiente orden:
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count y animation-direction.
Con iteration count especificamos el número de repeticiones y en direction si se realizará en sentido inverso.
Solución al problema propuesto de crear otro cuadro rojo en el lado opuesto que empuje al azul de vuelta al punto inicial:
https://jsfiddle.net/yec1k2L8/130/
Existen gran cantidad de generadores de código en línea. Aquí algunos de ellos:
Multipropósito:
css3maker.com (este tiene utilidad para generar RGBA)
Para crear bordes con imágenes:
Librería de transiciones en Hover:
https://github.com/IanLunn/Hover
