With CSS you can create shadow effects!
CSS Shadow Effects
With CSS you can add shadow to text and to elements.
In this chapter you will learn about the following properties:
CSS3 2D transformations rotating elements, 344-346 scaling elements. 359-360 cubes, CSS3 3D transformations, 354-358 current line, text flow and, 264 cursors. 404 rounded corners, creating, 128-130 transitions (CSS3), 359-360 em>. A 3D cube can be created solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intuitively navigated. A 3D cube that rotates using the Up, Down, Left and Right arrow keys. Supported browsers: WebKit Nightly r46042+.
text-shadow
box-shadow
CSS Text Shadow
The CSS
text-shadow
property applies shadow to text.In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
Text shadow effect!
Example
Try it Yourself »Next, add a color to the shadow:
Text shadow effect!
Example
Try it Yourself »Then, add a blur effect to the shadow:
Text shadow effect!
Example
Try it Yourself »The following example shows a white text with black shadow:
Text shadow effect!
Example
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Try it Yourself »color: white;
text-shadow: 2px 2px 4px #000000;
}
The following example shows a red neon glow shadow:
Text shadow effect!
Example
Try it Yourself »Multiple Shadows
To add more than one shadow to the text, you can add a comma-separated list of shadows.
The following example shows a red and blue neon glow shadow:
Text shadow effect!
Example
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Try it Yourself »text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
The following example shows a white text with black, blue, and darkblue shadow:
Text shadow effect!
Example
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Try it Yourself »color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
You can also use the text-shadow property to create a plain border around some text (without shadows):
Border around text!
Example
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Try it Yourself »color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
CSS box-shadow Property
The CSS
box-shadow
property applies shadow to elements.In its simplest use, you only specify the horizontal shadow and the vertical shadow:
This is a yellow <div> element with a black box-shadow
Example
Try it Yourself »Next, add a color to the shadow:
This is a yellow <div> element with a grey box-shadow
Example
Try it Yourself »Next, add a blur effect to the shadow:
This is a yellow <div> element with a blurred, grey box-shadow
Example
Try it Yourself »You can also add shadows to the ::before and ::after pseudo-elements, to create an interesting effect:
Example
#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; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
Try it Yourself »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; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
Cards
An example of using the
box-shadow
property to create paper-like cards:January 1, 2016
Example
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;
}
Try it (Text Card) »Try it (Image 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;
}
Test Yourself with Exercises!
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit long and a mixes visual style with the cube basics, so I've decided to write a post which provides just the basic detail needed to create a CSS cube. I'm basing my example off of an outstanding CodePen demo by Mircea Georgescu.
The HTML
The cube element, a wrapper in itself, will actually have a wrapper of its own:
Each face of the cube will have its own element. As you can imagine, we'll be CSS-ing the hell out of them to put them in the proper position.
The CSS
Let's take this one meaningful bit at a time. The first meaningful element is the entire animation wrapper, which will provide a CSS perspective for the 3D element:
CSS perspective is a difficult concept to explain but MDN does a great job so I wont duplicate their explanation. To better understand perspective, I recommend modifying the perspective property to see how it effects the demo. Next up is the cube container which will hold all of the different cube faces:
The cube will be 200 pixels wide, with relative positioning so that the absolutely positioned faces will stay within bounds. We'll also use preserve-3d to keep the element 3D and not flat. Before getting to any of the specific face rules, there will be a few general styles that will apply to each face:
With the position and dimensions of the faces set, we can get to creating the transformation code for individual faces:
The rotateY values rotate the faces of the to move the face show the text at the correct angled, while the
translateZ
setting moves the elements forward and backward within the stack. The translateY
setting may be confusing, but note that it represents raising or lowering a face to show 3D effect via the transparent panes. Each face has its own translations settings to place them in the appropriate place, so feel free to modify those values to see why each corresponds to its face.Horizontal Spinning of the Cube
Of course, what good is a 3D element set without animating it. The answer: none. No good at all. So here are a few steps we need to take to making our precious cube animate horizontally:
Probably easier than you think, yes? The text looks correct due to the facing rotation we implemented originally, and I've used keyframe animation in case we want to add more sexiness in the future.
Vertical Spinning of the Cube
Spinning the cube vertically should simple require changing the animation to Y axis, right? Unfortunately not -- the panes as they are would show text backward in some cases, so we'll need to revise the rotation of a few elements:
... as well as change the animation.
Flattening the Cube
To remove the 3D look of the cube, and simply display one block at a time (without other face hinting), remove the perspective and origin settings from the wrapper:
Now the only one face will display at any given time.
CSS cubes have been around for a while but I hope this article simplified their composition enough for you to attack your own. And don't get discouraged if you run into issues creating your cube -- I did too! I look forward to seeing what you create!