Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Estilar elementos HTML específicos con CSS3 con ejemplos

Categorías:  Autor: Diego C Martin 
diseño web CSS

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.

Compatibilidad de CSS3 en navegadores

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:

  • -moz para el motor Gecko de Firefox
  • -webkit para Safari y Chrome
  • -o para Opera
  • -ms para los de Microsoft
  • -khtml para ciertos navegadores Linux

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.

Ejemplos de estilado de elementos HTML específicos con CSS3

Estilado de enlaces con CSS

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:link

Estado por defecto de un enlace cuando no ha sido visitado.

a:visited

Enlace que ya ha sido visitado.

a:active

Para el momento en que seleccionamos el enlace.

a:hover

Cuando pasamos el ratón por encima.

Ejemplo:

a:hover {color:green;}

Truco para incrementar el área clicable de un enlace

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.

Estilado de listas con CSS

Con la propiedad list-style-type especificamos el tipo de viñeta que se va a mostrar en una lista. Algunos valores posibles son:

  • none. Nada
  • disc. Disco
  • circle. Círculo
  • square. Cuadrado
  • decimal. Número decimal.
  • lower-roman. Número romano minúscula.
  • upper-roman. Número romano mayúscula.

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 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.

Estilado de tablas con CSS

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;}

Estilado de menús horizontales con CSS

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.

Estilado de formularios con CSS

No es que haya estilos específicos, pero aplicando lo que hemos aprendido hasta ahora, podemos mostrar los formularios de forma muy elegante:

  • Modificando el display de label, podemos hacer que las etiquetas aparezcan encima o al lado de los campos.
  • Podemos agregar padding a los campos de texto para queden más elegantes.
  • Con pseudo clases podemos aportar mayor control en función de lo que hace el usuario.
  • Con los bordes, aplicamos efectos más modernos que los predefinidos por el navegador.
  • También podemos estilar los botones.

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 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.

Formulario estilado 02

Formulario estilado 01

Agregar sombras con CSS3

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:

Uso de bordes redondeados en CSS3

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:

Disponer el texto en columnas con CSS3

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;

Novedades para texto en CSS3

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: normalkeep-all, donde no se permite dividir entre dos letras y break-all, donde se permiten.

Ejemplos de botones con efectos CSS3

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;  ... }

Uso de degradados en CSS3

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:

  • angle, para indicar un ángulo en grados.
  • to: indicamos la posición de partida del degradado con top, right, bottom o left.
  • color-stop: para indicar el o los colores y su porcentaje.

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 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:

Westciv

Fondos con imágenes múltiples

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-imagebackground-positionbackground-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.

Posicionamiento, recorte y tamaño de imágenes de fondo

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:

https://jsfiddle.net/diegocmartin/abk9ckbn/1/

También podemos especificar el tamaño con background-size asignando valores enpx, % o indicando cover o contain.

https://jsfiddle.net/diegocmartin/abk9ckbn/2/

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.

Fusión de fondos con CSS3

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:

Transformaciones con CSS3 (transform)

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 leftcenterrighttop bottom.

Translate sirve para desplazar. Podemos usarla en ambos ejes con dos valores

transform: translate(10px, 10px);

O por separado con translateX 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);

Transiciones CSS3

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:

Animaciones CSS3

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/

Generadores de CSS3

Existen gran cantidad de generadores de código en línea. Aquí algunos de ellos:

Multipropósito:

css3gen.com

css3maker.com (este tiene utilidad para generar RGBA)

css3 by Mike Plate

css3 Generator

Layer Styles

Para crear bordes con imágenes:

Boder-image

Librería de transiciones en Hover:

https://github.com/IanLunn/Hover

¡Recibe un cupón de un 10% sólo por darte de alta!

Usaré la info para informarte de novedades y ofertas sobre mis cursos y servicios.

* Más info en el Aviso legal.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram