"Stylish Blockquote"
Bootstrap 4.0.0 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="foo"> <span class="letter" data-letter="P">P</span> <span class="letter" data-letter="R">R</span> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="K">K</span> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="S">S</span> <span class="letter" data-letter="H">H</span> </div>
@import url(https://fonts.googleapis.com/css?family=Lato:900); *, *:before, *:after{ box-sizing:border-box; } body{ font-family: 'Lato', sans-serif; background: #383030; ; } div.foo{ width: 90%; margin: 0 auto; text-align: center; } .letter{ display: inline-block; font-weight: 900; font-size: 13em; margin: 0.2em; position: relative; color: #00B4F1; transform-style: preserve-3d; perspective: 400; z-index: 1; } .letter:before, .letter:after{ position:absolute; content: attr(data-letter); transform-origin: top left; top:0; left:0; } .letter, .letter:before, .letter:after{ transition: all 0.3s ease-in-out; } .letter:before{ color: #fff; text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8); z-index: 3; transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg); } .letter:after{ color: rgba(0,0,0,.11); z-index:2; transform: scale(1.08,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,1deg); } .letter:hover:before{ color: #fafafa; transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg); } .letter:hover:after{ transform: scale(1.08,1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg,22deg); }

Related: See More


Questions / Comments: