CSS Word Wrap, Box-Shadow CSS, And CSS Text-Shadow.
CSS Word Wrap
With the CSS word wrap, long words can be broken and wrapped on the following line. This property allows us to prevent an overflow when an unbreakable string is too long to fit in the containing box.
CSS Word Wrap Values
| Value | Description |
| Normal | This value is used to break words at allowed break points. |
| Break-word | This value is used to break unbreakable words. |
| Initial | This value is used to return the property to its standard value. |
| Inherit | This value inherits this property from its original element. |
CSS Word Wrap Example
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
background-color: #00ff2f;
border: 1px solid #e80707;
padding:10px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test"> Here is a sentence that contains a really long word:
iamsooooooooooooooooooooooooooooooohappyyyyyyyyyyyyyyyy.This long word will break and wrap onto the next line.</p>
</body>
</html>
Box-shadow CSS
This CSS property is used to add shadow-like effects around the frame of any element. Below, the values of box-shadow CSS are explained for your better understanding.
H-offset: It sets the shadow in a horizontal position. It has positive and negative values. The positive value sets the shadow to the right side of the box, while the negative value sets the shadow to the left side of the box.
V-offset: Unsimilar to the h-offset, this value sets the shadow in a vertical position but similar to the h-offset, it has positive and negative values. The positive value sets the shadow below the box, while the negative value sets the shadow above the box.
Blur: This is used to blur the box shadow. This attribute is optional.
Spread: This specifies the shadow size. The spread size usually depends on the spread value.
Color: This attribute is used to specify the color of the shadow. It is also an optional attribute.
Inset: The shadow is normally generated outside the box, but by the inset value, the shadow can be generated within the box.
Initial: This is used to return the property of the box-shadow to its standard value.
Inherit: This is inherited from its original element.
None: This is the default value without shadow properties.
Here’s an example to help us further understand the above attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow Property Example</title>
<style>
div
{
border: 1px solid;
padding: 10px;
}
#hvb
{
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 10px;
}
#spr
{
/* box-shadow: h-offset v-offset blur spread */
box-shadow: 5px 10px 10px 10px;
}
#col
{
/* box-shadow: h-offset v-offset blur spread color */
box-shadow: 5px 10px 10px 10px orange;
}
#ins
{
/* box-shadow: h-offset v-offset blur spread color inset */
box-shadow: 5px 10px 10px 10px orange inset;
}
#init
{
/* box-shadow: initial */
box-shadow: initial;
}
#non
{
/* box-shadow: none */
box-shadow: none;
}
</style>
</head>
<body>
<div id = "hvb">
<h1>Here is a shadow box with the h-offset, v-offset, and blur values.</h1>
</div>
<br><br>
<div id = "spr">
<h1>Here is a box that features the spread value.</h1>
</div>
<br><br>
<div id = "col">
<h1>Here is a box that features the color value.</h1>
</div>
<br><br>
<div id = "ins">
<h1>Here is a box that features the inset value.</h1>
</div>
<br><br>
<div id = "init">
<h1>Here is a box that features the initial value.</h1>
</div>
<br><br>
<div id = "non">
<h1>Here is a box that features the default value i.e. none.</h1>
</div>
</body>
</html>
CSS Text-shadow
As its name suggests, this CSS property adds shadows to text. It allows a comma-separated list of shadows that can be applied to the text. It has a default property which is none. It can apply one or more than one text-shadow effect to the text content.
Values
H-shadow: This is the value required. This parameter specifies how the horizontal shadow will be positioned as well as allowing for negative values.
V-shadow: This is also the required value that specifies the position of the vertical shadow but does not allow negative values.
Blur-radius: This blur-radius is an optional value with a default value of 0.
Color: This is the color of the shadow, and it is also an optional value.
None: This is the default value, and it means no shadow.
Initial: Ths is used to return the property to its standard value.
Inherit: This just inherits the property from its original element.
Let’s see some examples.
Example 1- Simple Shadow
<!DOCTYPE html>
<html>
<head>
<title> font-weight property example </title>
<style>
p.simple{
text-shadow: 3px 3px green;
}
</style>
</head>
<body>
<p class="simple">
Simple Shadow Example
</p>
</body>
</html>
Example 2- Fuzzy Shadow
<!DOCTYPE html>
<html>
<head>
<title> font-weight property example </title>
<style>
p.fuzzy{
text-shadow: 3px 3px 3px pink;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<p class="fuzzy">
Fuzzy Shadow Example
</p>
</body>
</html>
Example 3- Multiple Shadows
<!DOCTYPE html>
<html>
<head>
<title> font-weight property example </title>
<style>
p.multi{
text-shadow: -3px -3px 3px blue, 3px 3px 3px blue;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<p class="multi">
Multiple Shadows Example
</p>
</body>
</html>
Example 4- Glow Effect
<!DOCTYPE html>
<html>
<head>
<title> font-weight property example </title>
<style>
.multi{
text-shadow: 0 0 .1em cyan;
background-color:violet;
font-size:50px;
text-align:center;
}
</style>
</head>
<body>
<div class="multi">
Glow Effect Example
</div>
</body>
</html>
For more CSS blogs
