CSS3 Box Shadows Effects
How do I make an css3 box shadows effects?
Here how You can create realistic CSS3 box shadows effects. What is a css3 box shadows effects? How do you make a css3 box shadows effects? This script and codes were developed by Twikito on 11 September 2022, Sunday.
CSS3 Box Shadows Effects - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Box Shadows Effects</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Rock+Salt'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure class="effect1"> <img src="http://www.catsuka.com/videos/player/vignettes/lascars_le_film_bande_annonce_old.jpg" alt="Skadoosh" width="350"> <figcaption>Skadoosh!</figcaption>
</figure>
<figure class="effect2"> <img src="http://www.catsuka.com/videos/player/vignettes/lascars_le_film_bande_annonce_old.jpg" alt="Skadoosh" width="350"> <figcaption>Skadoosh!</figcaption>
</figure>
<!-- Another Pen? codepen.io/Twikito -->
</body>
</html>
CSS3 Box Shadows Effects - Script Codes CSS Codes
/* BASE */
figure { display:inline-block; padding:10px; margin:30px; border:1px solid #ddd; background:#fff;
}
figcaption { font:1.5em/2em "Rock Salt", cursive; color:#5b5983;
}
/* EFFECTS */
.effect1 { position:relative;
}
.effect1::before, .effect1::after { position:absolute; bottom:15px; top:80%; left:10px; z-index:-1; width:50%; max-width:300px; background:rgba(0,0,0,.8); content:""; box-shadow:0 15px 10px rgba(0,0,0,.7); -webkit-transform: rotate(-3deg); transform: rotate(-3deg);
}
.effect1::after { right:10px; left:auto; -webkit-transform: rotate(3deg); transform: rotate(3deg);
}
.effect2 { position:relative; box-shadow:0 1px 4px rgba(0,0,0,.1), 0 0 40px rgba(0,0,0,.05) inset;
}
.effect2::after { position:absolute; top:50%; bottom:0; left:10px; right:10px; z-index:-1; border-radius:100px / 10px; content:""; box-shadow:0 0 20px rgba(0,0,0,.8);
}
/* BLAH BLAH */
html, body { height: 100%; }
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background:url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; text-align:center; }
Developer | Twikito |
Username | Twikito |
Uploaded | September 11, 2022 |
Rating | 3.5 |
Size | 2,193 Kb |
Views | 26,312 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Realistics radio buttons with only css | 3,376 Kb |
Beautiful Textual Map of the USA with CSS | 7,816 Kb |
Input focus effect with only CSS | 4,411 Kb |
Beautiful Textual Map of French towns with CSS | 6,387 Kb |
Easy and Bulletproof ScrollTo Script | 4,111 Kb |
Summary with pseudo-element | 2,971 Kb |
UI with UX improvements with only CSS | 5,668 Kb |
Image with hover CSS3 effect and bottom overlay | 2,630 Kb |
Beautiful Textual Map of France with CSS | 5,035 Kb |
Menu item 3D effect on hover with only css | 2,710 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Addthis_button | Esambino | 1,691 Kb |
Off Canvas | Mariamarica | 1,870 Kb |
DIV wormhole | Heydon | 1,932 Kb |
Console fun | Dviate | 1,500 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!