La clase Drop Shadow se usa para aplicar un filtro a la imagen para establecer la sombra de la imagen. Esta clase crea una sombra borrosa en un desplazamiento y color determinados. En CSS, hacemos eso usando la función CSS drop-shadow(). Tailwind CSS recientemente agregó brillo de funciones en la versión 2.1.
Sombra paralela:
- drop-shadow-sm: esta clase se utiliza para establecer el efecto de sombra pequeña.
- drop-shadow: esta clase se utiliza para establecer el efecto de sombra normal.
- drop-shadow-md: esta clase se utiliza para establecer el efecto de sombra media.
- drop-shadow-lg: esta clase se utiliza para establecer el efecto de sombra grande.
- drop-shadow-xl: esta clase se utiliza para establecer el efecto de sombra extragrande.
- drop-shadow-2xl: esta clase se utiliza para establecer el efecto de doble sombra extra grande.
- drop-shadow-none: esta clase se utiliza para eliminar el efecto de sombra.
Sintaxis:
<element class="filter drop-shadow-{amount}">..</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Drop Shadow Class</b> <div class="grid grid-flow-col text-center p-4"> <img class="rounded-lg filter drop-shadow-sm" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" alt="image"> <img class="rounded-lg filter drop-shadow" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" alt="image"> <img class="rounded-lg filter drop-shadow-md" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" alt="image"> <img class="rounded-lg filter drop-shadow-lg" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" alt="image"> <img class="rounded-lg filter drop-shadow-2xl" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" alt="image"> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA