8 consejos y trucos esenciales de CSS que todo desarrollador debe saber

CSS se usa para agregar estilo a una página web después de configurar el esqueleto HTML. Además, puede crear diseños ingeniosos en CSS con solo unas pocas líneas de código.

Todo desarrollador debería conocer estos trucos de CSS para desarrollar sus proyectos de manera rápida y eficiente. Seguro que aumentarán su productividad al siguiente nivel. Empecemos.

1. Efectos de desplazamiento

Puede agregar un efecto de desplazamiento a un elemento HTML usando el :flotar selector.

Ejemplo: Agregar efecto de desplazamiento a un elemento de botón.

Código HTML:

Pase el ratón sobre mí

Código CSS:

botón: flotar {
color: #0062FF;
borde: #0062FF sólido 1px;
fondo: #FFFF99;
}

Puedes jugar con este código y agregar efectos como fundirse,crecer en, sesgar, y así. ¡Hazlo tuyo!

Efecto de aparición gradual de CSS al pasar el mouse

botón{
opacidad: 0,5;
}
botón: flotar{
opacidad: 1;
}

Efecto de crecimiento de CSS en Hover

botón: flotar{
-webkit-transform: escala (1.2);
-ms-transformada: escala (1.2);
transformar: escala (1.2);
}

2. Cambiar el tamaño de las imágenes para que se ajusten a un contenedor div

Puede cambiar el tamaño de una imagen para que se ajuste a un contenedor div usando el altura, ancho, y ajuste de objeto propiedades

Código HTML:

Código CSS:

.Imagen aleatoria {
 altura: 100%;
 ancho: 100%;
 ajuste de objeto: contener;
 }

3. Anulando todos los estilos

Puede anular todas las demás declaraciones de estilo de un atributo (incluidos los estilos en línea) utilizando el !importante directiva al final de un valor.

Código HTML:

 Hola Mundo!

Código CSS:

pags {
 color de fondo: amarillo;
 }
 .nombre de la clase {
 color de fondo: azul !importante;
 }
 #idNombre {
 color de fondo: verde;
 }

En este ejemplo, el !importante la regla anula todas las demás color de fondo declaraciones y garantiza que el color de fondo se establecerá en azul en lugar de verde.

4. Truncar texto con puntos suspensivos

Puede truncar el texto desbordado con puntos suspensivos (...) utilizando el desbordamiento de texto Propiedad CSS.

Código HTML:

 Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.

Código CSS:

.texto {
 espacios en blanco: nowrap;
 desbordamiento: oculto;
 desbordamiento de texto: puntos suspensivos;
 ancho: 200px;
 }

Relacionado: El modelo de caja CSS explicado con ejemplos

5. Usando la transformación de texto

Puede forzar que el texto esté en mayúsculas, minúsculas o mayúsculas usando el transformación de texto Propiedad CSS.

Mayúsculas

Código HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Código CSS:

.mayúsculas {
 transformación de texto: mayúsculas;
 }

Minúsculas

Código HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Código CSS:

.minúsculas {
 transformación de texto: minúsculas;
 }

Capitalizar

Código HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Código CSS:

.mayúsculas {
 transformación de texto: capitalizar;
 }

6. Uso de la declaración de propiedad de una sola línea

Puede usar las propiedades abreviadas en CSS para que su código sea conciso y fácil de leer.

Por ejemplo, CSS antecedentes es una propiedad abreviada que le permite definir los valores de color de fondo, imagen de fondo, repetición de fondo, y posición de fondo. Del mismo modo, puede definir propiedades para fuente, frontera, margen, y relleno.

Declaración de propiedad de fondo de una sola línea

color de fondo: negro;
imagen de fondo: url (images/xyz.png);
repetición de fondo: sin repetición;
posición de fondo: arriba a la izquierda;

Puede simplificar la declaración anterior a una sola línea:

fondo: URL negra (images/xyz.png) superior izquierda sin repetición;

Las propiedades abreviadas son muy convenientes de usar, pero debe considerar algunas casos extremos complicados (como se describe en MDN Web Docs) mientras los usa.

La información sobre herramientas es una forma de proporcionar más información sobre un elemento cuando el usuario mueve el puntero del mouse sobre el elemento.

Código HTML:

Información sobre herramientas derecha
Este es el texto de información sobre herramientas

Código CSS:

cuerpo {
 alineación de texto: centro;
 }
 .tooltip_div {
 posición: relativa;
 pantalla: bloque en línea;
 }
 .tooltip_div .tooltip {
 visibilidad: oculto;
 ancho: 170px;
 color de fondo: azul;
 color: #fff;
 alineación de texto: centro;
 borde-radio: 6px;
 relleno: 5px 0;
 /* Posicionamiento de la información sobre herramientas */
 posición: absoluta;
 índice z: 1;
 arriba: -5px;
 izquierda: 105%;
 }
 .tooltip_div: desplazar .tooltip {
 visibilidad: visible;
 }

Código HTML:

Información sobre herramientas izquierda
Este es el texto de información sobre herramientas

Código CSS:

cuerpo {
 alineación de texto: centro;
 }
 .tooltip_div {
 posición: relativa;
 pantalla: bloque en línea;
 }
 .tooltip_div .tooltip {
 visibilidad: oculto;
 ancho: 170px;
 color de fondo: azul;
 color: #fff;
 alineación de texto: centro;
 borde-radio: 6px;
 relleno: 5px 0;
 /* Posicionamiento de la información sobre herramientas */
 posición: absoluta;
 índice z: 1;
 arriba: -5px;
 derecha: 105%;
 }
 .tooltip_div: desplazar .tooltip {
 visibilidad: visible;
 }

Código HTML:

Información sobre herramientas superior
Este es el texto de información sobre herramientas

Código CSS:

cuerpo {
 alineación de texto: centro;
 }
 .tooltip_div {
 margen superior: 100px;
 posición: relativa;
 pantalla: bloque en línea;
 }
 .tooltip_div .tooltip {
 visibilidad: oculto;
 ancho: 170px;
 color de fondo: azul;
 color: #fff;
 alineación de texto: centro;
 borde-radio: 6px;
 relleno: 5px 0;
 /* Posicionamiento de la información sobre herramientas */
 posición: absoluta;
 índice z: 1;
 inferior: 100%;
 izquierda: 50%;
 margen izquierdo: -60px;
 }
 .tooltip_div: desplazar .tooltip {
 visibilidad: visible;
 }

Código HTML:

Información sobre herramientas inferior
Este es el texto de información sobre herramientas

Código CSS:

cuerpo {
 alineación de texto: centro;
 }
 .tooltip_div {
 margen superior: 100px;
 posición: relativa;
 pantalla: bloque en línea;
 }
 .tooltip_div .tooltip {
 visibilidad: oculto;
 ancho: 170px;
 color de fondo: azul;
 color: #fff;
 alineación de texto: centro;
 borde-radio: 6px;
 relleno: 5px 0;
 /* Posiciona la información sobre herramientas */
 posición: absoluta;
 índice z: 1;
 Top 100%;
 izquierda: 50%;
 margen izquierdo: -60px;
 }
 .tooltip_div: desplazar .tooltip {
 visibilidad: visible;
 }

También puede usar la biblioteca Bootstrap para crear Información sobre herramientas de Bootstrap.

8. Agregar efectos de sombra

Puede agregar efectos de sombra CSS a textos y elementos usando el sombra de texto y el sombra de la caja propiedades CSS respectivamente.

Sombra de texto CSS

El sombra de texto La propiedad CSS agrega sombras y capas al texto. El sombra de texto La propiedad acepta una lista de sombras separadas por comas que se aplicarán al texto.

Sintaxis de la propiedad CSS text-shadow:

/* Puedes usar 4 argumentos con la propiedad CSS text-shadow:
offset-x, offset-y, radio de desenfoque y color */
/* desplazamiento-x | desplazamiento-y | radio de desenfoque | color */
sombra de texto: 2px 2px 4px rojo;
/* color | desplazamiento-x | desplazamiento-y | radio de desenfoque */
sombra de texto: #18fa3e 1px 2px 10px;

Nota: Los argumentos de color y radio de desenfoque son opcionales.

Relacionado: Cómo usar la sombra de texto CSS: trucos y ejemplos

Por ejemplo:

fondo: #e74c3c;
color: #fff;
familia de fuentes: lato;
sombra de texto: 1px 1px rgba (123, 25, 15, 0.5), 2px 2px rgba (129, 28, 18, 0.51), 3px 3px rgba (135, 31, 20, 0.52), 4px 4px rgba (140, 33, 22, 0.53), 5px 5px rgba (145, 36, 24, 0.54), 6px 6px rgba (150, 38, 26, 0.55), 7px 7px rgba (154, 40, 28, 0.56), 8px 8px rgba (158, 42, 30, 0.57), 9px 9px rgba (162, 44, 31, 0.58), 10px 10px rgba (166, 45, 33, 0.59), 11px 11px rgba (169, 47, 34, 0.6), 12px 12px rgba (173, 48, 36, 0.61), 13px 13px rgba (176, 50, 37, 0.62), 14px 14px rgba (178, 51, 38, 0.63), 15px 15px rgba (181, 52, 39, 0.64), 16px 16px rgba (184, 54, 40, 0.65), 17px 17px rgba (186, 55, 41, 0.66), 18px 18px rgba (189, 56, 42, 0.67), 19px 19px rgba (191, 57, 43, 0.68), 20px 20px rgba (193, 58, 44, 0.69), 21px 21px rgba ( 195, 59, 45, 0,7), 22 píxeles 22 píxeles RGB (197, 60, 46, 0,71), 23 píxeles 23px rgba (199, 61, 47, 0.72), 24px 24px rgba (201, 62, 47, 0.73), 25px 25px rgba (202, 62, 48, 0.74), 26px 26px rgba (204, 63, 49, 0.75), 27px 27px rgba (206, 64, 49, 0.76), 28px 28px rgba (207, 65, 50, 0,77), 29 px 29 px rgba (209, 65, 51, 0,78), 30 px 30 px rgba (210, 66, 51, 0,79), 31 px 31 px rgba (211, 67, 52, 0,8), 32 px 32 px rgba ( 213, 67, 52, 0,81), 33 píxeles 33 píxeles rgba (214, 68, 53, 0,82), 34 píxeles 34px rgba (215, 69, 53, 0.83), 35px 35px rgba (216, 69, 54, 0.84), 36px 36px rgba (218, 70, 54, 0.85), 37px 37px rgba (219, 70, 55, 0.86), 38px 38px rgba (220, 71, 55, 0.87), 39px 39px rgba (221, 71, 56, 0.88), 40px 40px rgba (222, 72, 56, 0.89), 41px 41px rgba (223, 72, 57, 0.9), 42px 42px rgba (224, 73, 57, 0.91), 43px 43px rgba ( 225, 73, 57, 0,92), 44 píxeles 44 píxeles rgba (225, 73, 58, 0,93), 45 píxeles 45px rgba (226, 74, 58, 0.94), 46px 46px rgba (227, 74, 58, 0.95), 47px 47px rgba (228, 75, 59, 0.96), 48px 48px rgba (229, 75, 59, 0.97), 49px 49px rgba (230, 75, 59, 0.98), 50px 50px rgba (230, 76, 60, 0.99);

Sombra de caja CSS

El sombra de la caja La propiedad se utiliza para aplicar una sombra a los elementos HTML.

Sintaxis de la propiedad CSS box-shadow

box-shadow: [desplazamiento horizontal] [desplazamiento vertical] [radio de desenfoque] [radio de dispersión opcional] [color];

Nota: Los parámetros de desenfoque, dispersión y color son opcionales.

Relacionado: Cómo usar CSS box-shadow: trucos y ejemplos

Por ejemplo:

sombra de caja: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Si desea echar un vistazo al código fuente completo utilizado en este artículo, aquí está el repositorio de GitHub.

Dale estilo a tu sitio web usando trucos modernos de CSS

Agregar sombras de texto CSS a un sitio web es una excelente manera de llamar la atención de los usuarios. Puede darle al sitio web una cierta elegancia y una sensación única. Sea creativo y experimente con algunos sombra de texto ejemplos que pueden alinearse con el tema de su sitio web.

11 ejemplos de sombras de texto CSS para que pruebes en tu sitio web

Puede hacer mucho con los efectos de sombra de texto en CSS, pero puede ser difícil saber exactamente qué es posible. Obtenga ayuda con estos ejemplos visuales.

Leer siguiente

Sobre el Autor