Adding Image Effects
Learn how to add image effects to our article design.
We'll cover the following...
In this lesson, we’ll explore how we can make our images more visually appealing. We’ll add sepia and drop-shadow effects by using the corresponding Tailwind filters. Besides that, we’ll use arbitrary values to clip the image and make text flow around it.
Here’s the code with image effects added. Click the “Run” button to see our app.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="tailwind.css">
<style>
.box {
color: white;
background-color: green;
min-height: 150px;
padding-top: 10%;
padding-left: 15%;
font-size: 1.5rem;
font-weight: 700;
}
</style>
</head>
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="tailwind.css">
</head>
<body>
<div class="m-6 md:mx-auto p-8 space-y-6 md:w-1/2 xl:w-1/3 bg-sky-50">
<p
class="first-letter:-mt-2 first-letter:mr-3 first-letter:float-left
first-letter:text-7xl first-letter:font-bold first-letter:text-cyan-400
first-line:uppercase first-line:tracking-widest first-line:text-cyan-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas varius vitae ipsum et commodo. In scelerisque est
magna, ut fringilla purus congue eu.
Mauris id metus ac metus porta aliquet.
Aliquam quam ipsum, consequat malesuada
lectus nec, blandit condimentum enim.
Donec varius mattis facilisis.
Morbi rhoncus erat vel erat pellentesque
suscipit. Nunc dictum euismod libero sed tristique.</p>
<quote
class="px-4 py-2 block border-l-4 border-cyan-400
font-light italic bg-gradient-to-r from-teal-100 to-cyan-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas varius vitae ipsum et commodo. In scelerisque est
magna, ut fringilla purus congue eu.
Mauris id metus ac metus porta aliquet.</quote>
<p class="indent-6">Aliquam id nulla dignissim felis bibendum aliquam. Cras vulputate blandit semper. Nam quam dolor,
tincidunt non odio ac, condimentum molestie justo.
In ornare maximus tortor, aliquam consequat arcu sagittis id.
Vivamus condimentum varius ante,
pulvinar laoreet tortor dignissim ac.
Curabitur egestas in arcu sit amet feugiat.
Aenean interdum, purus eget sodales tincidunt,
magna sem lobortis nunc, at porttitor arcu velit sed augue.
Praesent porttitor nisl enim, eget sollicitudin ipsum porta a.
Integer tincidunt, lorem sit amet gravida hendrerit, arcu
felis convallis metus, vitae vehicula diam dolor vulputate sapien.
Nulla finibus lectus nec porta faucibus. Praesent
in massa sollicitudin, dignissim quam at, volutpat mauris.
Morbi in turpis sapien. Morbi ante est, gravida vitae
ipsum quis, pretium scelerisque massa.</p>
<img
class="mr-3 w-1/2 float-left rounded hover:sepia hover:drop-shadow-lg
[clip-path:circle(80%_at_30%_20%)] [shape-outside:circle(80%_at_30%_20%)]"
src="./beach.jpeg">
<p class="indent-6">Vestibulum congue felis at posuere commodo.
Praesent sapien magna, aliquet ut efficitur et, luctus
at neque. Donec vitae nunc convallis, maximus ex sit amet,
consequat tellus. Aenean eleifend cursus urna, sed
fermentum felis cursus eget.
Sed accumsan hendrerit turpis at ullamcorper.
Integer quam sapien, rutrum ac pharetra
eget, maximus id lacus. Vivamus sollicitudin molestie hendrerit.
Proin sem quam, tempus in felis et, elementum
dignissim felis. Integer odio tellus, semper at commodo at, euismod id magna.
Aenean nisl metus, maximus a eros sit
amet, facilisis malesuada lorem. Mauris est tortor,
accumsan ac aliquet et, sagittis vitae velit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos.</p>
<p class="indent-6">Aenean scelerisque urna id dictum tempor.
Pellentesque ipsum orci, convallis eget purus nec,
placerat laoreet nulla. Nullam vitae lectus porta,
lacinia neque at, rutrum felis. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Morbi luctus,
magna eget gravida lobortis, elit elit rutrum urna,
at volutpat ex orciaccumsan urna. Sed et ligula magna.
Ut dignissim semper ligula, at lacinia mi dignissim non.
In eleifend ultricies viverra. Nunc euismod ac lacus ac molestie.
Nam sem lectus, malesuada a ipsum vitae, viverra condimentum elit.
Ut at vulputate tortor, nec suscipit leo.
In non dolor nec purus semper tempus:</p>
<ul class="ml-6 pl-6 space-y-3 list-disc marker:text-cyan-400
text-gray-600">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<p class="indent-6">Pellentesque tincidunt non orci id congue.
Donec blandit pulvinar leo et tincidunt. Sed venenatis
venenatis justo, ut congue neque lobortis sit amet.
Nam tempus vehicula nisi, vitae commodo magna condimentum id.
In quis vehicula massa. Fusce id congue lorem.
Duis imperdiet placerat metus, vitae hendrerit lorem sollicitudin sit
amet. Integer varius justo non velit semper elementum.
Donec scelerisque magna nibh, at efficitur elit hendrerit id.
Aenean sagittis lectus odio, eu varius lectus vestibulum eget.
Sed gravida mattis auctor.</p>
<hr class="text-cyan-600">
<div class="flex pt-6">
<img class="mr-6 mb-6 w-24 h-24 rounded border-4 border-b-[16px]
border-red-600 shadow-md shadow-red-900"
src="./author.jpeg" />
<div>
<p class="-mt-3 font-semibold text-stone-900">David Smith</p>
<p class="mt-2 text-sm">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas <a href="#"
class="underline underline-offset-1 decoration-1
decoration-wavy decoration-cyan-600
hover:text-cyan-600">varius
vitae</a> ipsum et commodo.</p>
</div>
</div>
</div>
</body>
</html>Image effects
Note: You can ...