Aprendamos algunos trucos útiles de CSS para aumentar nuestra productividad. Estos trucos de CSS nos ayudarán a los desarrolladores a construir proyectos de manera rápida y eficiente.
Ahora, comencemos.
1. Pseudoclases CSS :dentro del rango y :fuera del rango
Estas pseudoclases se utilizan para aplicar estilo a la entrada dentro y fuera de los límites de rango especificados.
(a) : dentro del rango
Un elemento input> está dentro del rango si su valor actual está entre los límites de los atributos min y max.
Esta pseudoclase facilita determinar si el valor actual de un campo es aceptable.
(b): fuera de rango
Un elemento input> está fuera de los límites si su valor actual está fuera del rango de los atributos min y max.
Proporciona una indicación visual al usuario si el valor del campo está fuera de su rango.
Código CSS:
/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}
producción:
Debe tener en cuenta que estas pseudoclases solo se aplican a elementos con ámbito. Sin esta restricción, los elementos no pueden estar dentro o fuera de los límites.
2. función de escala de grises ( )
Podemos usar un valor de 100% para convertir una imagen de color a blanco y negro. Cuando establecemos este valor en 0%, la imagen permanecerá sin cambios.
Usar un valor del 100 % convertirá la imagen a blanco y negro, lo que significa que no habrá colores en la foto.
Podemos usar valores entre 0 y 100% para crear varios efectos.
Código CSS:
.grayscale-image{
filter: grayscale(100%);
}
producción:
3. Efecto de cristal
Podemos agregar efectos de vidrio a su próximo proyecto con solo unas pocas líneas de código. Sí, realmente es así de simple. El efecto de vidrio es hermoso y puede agregar un toque elegante a su diseño.
Glass.CSS (dirección: https://css.glass/) es actualmente el generador de formas de vidrio más popular, podemos usarlo para crear efectos de vidrio CSS para nuestros proyectos. Todo lo que tenemos que hacer es ajustar algunas configuraciones de acuerdo con las necesidades del proyecto y luego copiar y pegar el código CSS en el proyecto de desarrollo real.
Código CSS:
.glass-effect{
-webkit-backdrop-filter: blur(6.2px);
backdrop-filter: blur(6.2px);
background: rgba(255, 255, 255, 0.4);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
}
4. Use el siguiente código CSS para diseñar el texto
Estos son algunos consejos de estilo de texto muy básicos que todos deberían saber. Sin embargo, hay muchas otras opciones avanzadas disponibles.
Código CSS:
p{
font-family: Helvetica, Arial, sans-serif;
font-size: 5rem;
text-transform: capitalize;
text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
text-align: center;
font-weight: normal;
line-height: 1.6;
letter-spacing: 2px;
}
5. Función abrazadera CSS ()
La función CSS clamp( ) fija los valores a un rango entre dos límites superior e inferior. Debe haber un valor preferido, un valor mínimo y un valor máximo.
Clamp() es útil cuando el tamaño de la fuente cambia según la ventana gráfica.
Código CSS:
p{
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
6. Centre un div
La tarea más importante para un desarrollador es centrar el div. Hay muchas otras opciones para centrar divs. En este ejemplo, usamos CSS flexbox para centrar un div horizontal y verticalmente.
Código CSS:
div{
display: flex;
justify-content: center;
align-items: center;
}
7. Gradiente CSS Gradiente lineal
Para crear un degradado lineal CSS de degradado, solo use el código CSS a continuación.
Código CSS:
div {
background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}
8. Efecto de fluctuación de CSS
Este efecto de animación de "sacudida" sacude el campo de entrada cuando el usuario ingresa una entrada no válida. Es simple y elegante. Por ejemplo, si el usuario ingresa un número en lugar de una letra en un campo de texto, el campo de entrada temblará.
Código HTML:
<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>
Código CSS:
input:invalid{
animation: shake 0.2s ease-in-out 0s 2;
box-shadow: 0 0 0.4em red;
}
@keyframes shake {
0% { margin-left: 0rem; }
25% { margin-left: 0.5rem; }
75% { margin-left: -0.5rem; }
100% { margin-left: 0rem; }
}
9. Desbordamiento de texto
Podemos usar esta propiedad para truncar el texto desbordado. Se puede recortar y mostrar usando puntos suspensivos (...) o una cadena personalizada.
Código CSS:
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
width: 200px;
}
div.text {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
div.text:hover {
overflow: visible;
}
10. El atributo 'recuento de columnas'
Especifica el número de columnas en las que se deben dividir los elementos.
Código CSS:
p{
column-count: 2;
}
11. Animación CSS
Las animaciones cambian gradualmente el estilo de un elemento. Solo se puede usar si los fotogramas clave se asignan primero. Los fotogramas clave describen cómo aparecen los elementos animados en puntos específicos de una secuencia de animación.
Código CSS:
div{
width: 200px;
height: 200px;
background-color: blue;
animation-name: square;
animation-duration: 8s;
}
@keyframes square{
from {background-color: blue;}
to {background-color: black;}
}
12. Efecto de sombra
Con CSS, puede agregar efectos al texto y los elementos. Defina los atributos como text-shadow y box-shadow. Use text-shadow para agregar sombras al texto y box-shadow para agregar sombras a los elementos.
(i) text-shadow: Da una sombra al texto.
h1{
color: blue;
text-shadow: 2px 2px 4px #000000;
}
(ii) box-shadow: se utiliza para dar al elemento un efecto de sombra. El div real en el ejemplo a continuación es púrpura, la sombra del cuadro es azul cielo y está configurada en 10 píxeles a la derecha y al fondo.
div{
width: 200px;
height: 200px;
padding: 15px;
background-color: purple;
box-shadow: 10px 10px skyblue;
}
13. Recorte de CSS
Usando la propiedad clip-path, puede mostrar solo una parte de un elemento mientras oculta el resto.
Código CSS:
.bg{
height: 100%;
width: 100%;
background-color: rgba(199, 62, 133, 0.9);
clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
position: absolute;
}
Clippy - CSS Clipping Path Generator es una forma rápida y fácil de crear formas complejas en CSS recortando elementos a formas básicas (círculos, elipses, polígonos o ilustraciones) o fuentes SVG.
14. Propiedad CSS background-blend-mode
Esta propiedad describe cómo deben combinarse el color de fondo y la imagen (o dos imágenes).
La lista de modos de fusión correspondientes a cada imagen de fondo forma el valor. Un modo de fusión especifica cómo se fusiona la capa de fondo (color o imagen).
Puede crear fondos impresionantes con la propiedad background-blend-mode.
Código CSS:
div{
width: 600px;
height: 400px;
background-repeat: no-repeat, repeat;
background-position: center;
background-image: url("flower.png"), url("background-image.png");
background-blend-mode: color;
}
Si necesita información de front-end o código fuente completo, haga clic para descargar la información