Web Front-endCSS TutorialHow to use css3 to achieve a simple shadow effect on images (complete code attached)How to use css3 to achieve a simple shadow effect on images (complete code attached)
The previous article showed you how to use css3 to achieve the shadow effect of text. This article will continue to show you how to achieve the shadow effect of pictures, which includes two special effects: curved surface/ellipse projection effect and suspended projection effect. . It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The principle of using css3 to achieve the shadow effect of pictures
A graphic needs to have a main projection, and another graphic with radian also has Use your own shadow effect to overlap the two graphics, make their colors consistent, and then expose the arc shadow, so that you can see the effect of a curved shadow.
text-shadow property setting
Horizontal offset, positive value to the right, negative value to the left.
Vertical offset, positive value goes down, negative value goes up.
Fuzziness, cannot be negative.
The color of the shadow.
Use css3 to achieve the surface/ellipse projection effect
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>曲面/椭圆投影效果</title>
<style>
.shadow_wrap{
width: 100%;background:#E6EEF6;max-width: 600px;margin: auto;overflow: hidden;
}
.shadow1{
background-color: #9ecf68;
}
.shadow2{
background-color: #00bcd4;
}
.shadow1,.shadow2{
position:relative;
width:40%;
height:200px;
float:left;
margin:5% 15px;
border-radius:5px;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.shadow_wrap h3{
width:87%;
height:100px;
margin-left:6%;
text-align:center;
padding-top:60px;
color:#fff;
}
/**styling shadows**/
.shadow1:before, .shadow1:after{
position:absolute;
content:"";
bottom:12px;left:15px;top:80%;
width:45%;
background:#9B7468;
z-index:-1;
-webkit-box-shadow: 0 20px 15px #9B7468;
-moz-box-shadow: 0 20px 15px #9B7468;
box-shadow: 0 20px 15px #9B7468;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
transform: rotate(-6deg);
}
.shadow1:after{
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
right: 15px;left: auto;
}
.shadow2:before, .shadow2:after{
position:absolute;
content:"";
top:100px;bottom:5px;left:30px;right:30px;
z-index:-1;
box-shadow:0 0 40px 13px #486685;
border-radius:100px/20px;
}
</style>
</head>
<body>
<div class="shadow_wrap">
<div class="shadow1">
<h3 id="椭圆投影">椭圆投影1</h3>
</div>
<div class="shadow2">
<h3 id="椭圆投影">椭圆投影2</h3>
</div>
</div>
</body>
</html>The effect is as shown in the picture
##Use css3 to achieve the floating projection effect
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>悬浮投影</title>
<style>
.shadow_wrap{
margin-top: 50px; margin-bottom: 10px;
}
.floating {
width:60%;max-width: 180px; height: 150px;line-height: 150px; background: #ff9800;
color:#fff;text-align: center;cursor: pointer;
position: relative;transform: translateY(0);transition: transform 1s;
}
.floating:after {
content: "";
display: block;
position: absolute;
bottom: -30px;
left: 50%;
height: 8px;
width: 100%;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.2);
transform: translate(-50%, 0);
transition: transform 1s;
}
/*鼠标移上去的效果*/
.floating:hover {
transform: translateY(-40px);
transition: transform 1s;
}
.floating:hover:after {
transform: translate(-50%, 40px) scale(0.75);
transition: transform 1s;
}
</style>
<body>
<div class="shadow_wrap">
<div class="floating">
<h3 id="悬浮投影">悬浮投影</h3>
</div>
</div
</body>
</html>
Achieve the effect as follows As shown in the picture
Summary
Use box-shadow directly: 5px 5px 10px black Just set the style using the inset; attribute. The first two values (5px 5px) are the horizontal and vertical offsets. A positive value will offset the shadow to the left and downward, and a negative value will vice versa; the third value (10px) is to set the blur distance; black is the shadow. Color; the last inset is to create a shadow inside the element, which is the inner shadow; deleting the inset is to set the outer shadow. This is an effect achieved using pure CSS. Adding a shadow effect to the area border of the DIV layer looks very vivid, but it is not too difficult to implement. The CSS code is relatively simple and is worth learning.For related content links, please view the video tutorial in the css3 part of this site:
http://www.php.cn/course/list/14.html
The above is the detailed content of How to use css3 to achieve a simple shadow effect on images (complete code attached). For more information, please follow other related articles on the PHP Chinese website!
Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AMYes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo
CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PMCSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust
Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AMUsing scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
Revisiting Image MapsMay 07, 2025 am 09:40 AMLet’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AMThe State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
SublimeText3 Chinese version
Chinese version, very easy to use
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
