NiceSnippets.com
Cool Text Shadow Demo With Bootstrap
No one we are posted about text shadow css. in this snippet we are giving you demo of many types of text shadow. this is cool text shadow. we giving emboss font effect usging css text shadow. Engraved text shadow usign css. and also text inset text shadow.
We allows to free snippets of css engraved text white background , you can download full code of emboss text css layout. Here in this post i will give you example of css embossed box snippet and you will get simple code of html, css and jquery. In css emboss div snippet i give you three tab with html, css and js, you can easily get code of css embossed button layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 main-section">
<div class="row-fluid text-center">
<div class="col-lg-12 first-sadow content">
<h2>nicesnippets.com</h2>
</div>
<div class="col-lg-12 second-sadow content">
<h2>nicesnippets.com</h2>
</div>
<div class="col-lg-12 third-sadow content">
<h2>nicesnippets.com</h2>
</div>
<div class="col-lg-12 forth-sadow content">
<h2>nicesnippets.com</h2>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background-color: #8ED2C9;
}
.main-section{
background-color: #fff;
}
.content{
border-radius: 5px;
margin-bottom:15px;
}
.first-sadow,.second-sadow,.third-sadow,.forth-sadow{
padding:30px 0px;
background-color: #222222;
}
.first-sadow h2{
font-size:70px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
.second-sadow{
background-color: #FFF3CD;
}
.second-sadow h2{
font-size:70px;
color:#fff;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}
.third-sadow{
background-color: #3695C1;
}
.third-sadow h2{
font-size:70px;
color:#fff;
text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);
}
.forth-sadow{
background-color: #629552;
}
.forth-sadow h2{
font-size:70px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);
}
