Shadow effect in CSS
The Shadow attribute in CSS is used to set the shadow for the element elements in the website.
In this article, TipsMake.com will work with you to learn about the 2 most used effects:
- text-shadow for text.
- box-shadow for box elements.
Text Shadow
The text-shadow attribute used to create shadows for elements in the form of text helps display text prominently similar to 3D text.
Syntax
text-shadow: h-shadow v-shadow blur-radius color
Text-shadow consists of 4 parameters:
- h-shadow: position of the ball falling horizontally, negative number pushes the ball upwards, positive number pushes the ball downwards (required).
- v-shadow: position of the shadow vertically, negative number pushes the ball backward, positive number pushes the ball forward (required).
- blur-radius: shadow blur (optional).
- color: color of the ball (optional).
Examples
Example 1: Simplest, you format the 2px vertical shadow, 2px horizontally, the result is as follows:
h1 {
text-shadow: 2px 2px;
}
Website TipsMake.com
Note: Internet Explorer 9 and earlier versions do not support the text-shadow attribute
Example 2: Change the color for the shadow
h1 {
text-shadow: 5px 5px violet;
}
Website TipsMake.com
Example 3: Add blur effect - blur the shadow
h1 {
text-shadow: 5px 5px 10px violet;
}
Website TipsMake.com
Example 4: Shadow highlights neon style
h1 {
text-shadow: 0 0 3px red;
}
Use lots of Shadow for text
If you want a colorful shadow, add more by adding the same values for the property and separating the values by commas.
For example: Shadow style neon lights are green and yellow
h1 {
text-shadow: 0 0 5px gold, 0 0 7px #0000FF;
}
Example: Shadow combines 3 colors
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Website TipsMake.com
Example: Use text-shadow to create a simple border around the text
h1 {
color: #e9d8f4;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Website TipsMake.com
Box Shadow
The box-shadow attribute used to create shadows for box-like elements, works with borders, makes the display element stand out similar to a 3D box.
Box-shadow syntax
box-shadow: h-offset v-offset blur spread color
Box-shadow consists of 5 parameters:
- h-offset: where the ball falls horizontally, the positive number pushes the ball down, the negative number pushes the ball upwards (required).
- v-offset: the position of the ball vertically, the positive number pushes the ball forward, the negative number pushes the ball backward (required).
- spread: size of the ball (optional).
- blur: shadow blur (optional).
- color: color of the ball (optional).
Examples
Example 1: Simplest, you format the shadow vertically 10px, width 10px, the result is as follows:
div {
box-shadow: 10px 10px;
}
Box-shadow attribute
Example 2: Change the color for the shadow
div {
box-shadow: 10px 10px midnightblue;
}
Example 3: Add blur effect - blur the shadow
div {
box-shadow: 10px 10px 5px midnightblue;
}
Example 4: Add shadows to the elements pseudo-element :: before and :: after to create more special effects:
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* ẩn shadow phía sau hình ảnh */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* một nửa của 30% còn lại */
height: 100px;
bottom: 0;
}
Example 5: Create a 3D box, calendar format
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
You should read it
May be interested
- Tips for playing Shadow Warrior 3tips for playing shadow warrior 3, tips gamers need to know when playing shadow warrior 3, the latest part of the first-person shooter masterpiece – shadow warrior
- Shadow, the service that allows Windows 10 to be used on any deviceshadow service will allow you to access to a powerful windows 10 computer. this computer is configured with the latest generation intel cpu and nvidia 1080 graphics card, located on a server farm.
- Middle-earth experience offer: Shadow of War is free on Steam through the DEMO versionfrom now on, players can experience middle-earth: shadow of war through a free demo before deciding whether or not to buy a game.
- Turn off window shading on Windows 10some effects of the windows operating system will increase the aesthetics, which are more prominent when used, such as window shading. however, some people do not like to use those effects, or want to turn them off to increase computer performance. so you can follow ....
- How to create a shadow effect on PowerPointpowerpoint shadow effects can create images or text, adding art to the subject.
- Strategies for characters in Shadow Fight Arenashadow fight arena is one of the best fighting games on mobile and it's great that it transitions to the online pvp gameplay that fighting game fans crave.
- How to download and play Shadow of the Tomb Raider for free on your computerthis time, you can download and play shadow of the tomb raider for free on pc, stadia's sequel without any fees from the epic games store. shadow of the tomb raider is currently being sold for more than 1 million vnd on steam and many other platforms.
- How to create beautiful shadow effects in Photoshophow to create beautiful shadow effects in photoshop. creating shadow effects is an interesting ability that you can do with photoshop. applying this technique will make the photo more natural and beautiful.
- Invite to download Shadow Warrior, a classic FPS game that is free on Steam and GOGshadow warrior is a first-person shooter, action game on the pc platform that was released in 1997. this classic game is being converted to a completely free form on steam and gog. if you are a nostalgic gamer, download and try it out.
- How to create sky effect for photos with B612normally, to get a photo with a beautiful sky effect, we need expensive cameras as well as a lot of time and effort. however, today network administrator will show you how to use b612 to create a very simple sky effect with this new feature.