"Transparent shadow on the bottom area of a paragraph"
Bootstrap 3.0.0 Snippet by victorgaldamezstarshot

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="shadowed"> 1 - Create your snippet's HTML, CSS and Javascript in the editor tabs<br/> 2 - Create your snippet's HTML, CSS and Javascript in the editor tabs<br/> 3 - Create your snippet's HTML, CSS and Javascript in the editor tabs<br/> 4- Create your snippet's HTML, CSS and Javascript in the editor tabs<br/> 5- Create your snippet's HTML, CSS and Javascript in the editor tabs<br/> <div class="veil"/> </div> </div> </div> </div>
.shadowed { position:relative; display:block; width:500px; height:130px; margin:auto; border: solid 1px blue; } .veil{ position:absolute; bottom: 0px; float:left; height:80px; width: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%); /*background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); */ }

Related: See More


Questions / Comments: