"title 3d"
Bootstrap 3.3.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section> <div class="cover"> <p class="stack">Computation</p> </div> </section>
/* using meyers reset */ /* Box-Sizing */ box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Web Font */ @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700); body { background-color: black; font-size: 100%; width: 80%; margin: 2em auto 0; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; } section { /*overflow: hidden;*/ width: 60em; margin: 0 auto; } p { margin: 0; } .cover { color: white; width: 40%; margin: 0; padding: 1% 7% 1% 10%; float: left; margin-right: 2em; display: block; /* box-shadow: 0em 0em 5em rgba(10,10,10,0.7); */ } .stack { text-transform: uppercase; font-size: 12em; line-height: 0.7em; word-wrap: break-word; overflow-wrap: break-word; } span { position: relative; } /* C */ .char1 { margin-left: -.2em; z-index: 4; text-shadow: 0.05em 0.05em 0.2em rgba(10,10,10,0.9); } /* O */ .char2 { z-index: 3; margin-left: -.175em; top: 0.08em; text-shadow: -0.02em 0.02em 0.2em rgba(10,10,10,0.9); } /* M */ .char3 { z-index: 9; margin-left: -.125em; text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9); } /* P */ .char4 { z-index: 5; margin-left: -.175em; text-shadow: 0.02em -0.02em 0.2em rgba(10,10,10,0.9); } /* U */ .char5 { z-index: 2; margin-left: -.125em; top: 0.08em; text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9); } /* T */ .char6 { z-index: 10; margin-left: -.125em; top: -0.04em; text-shadow: 0em 0em 0.2em rgba(10,10,10,0.9); } /* A */ .char7 { z-index: 8; margin-left: -.3em; top: 0em; text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9); } /* T */ .char8 { z-index: 6; margin-left: -.135em; top: -0.05em; text-shadow: 0.02em -0.01em 0.2em rgba(10,10,10,0.9); } /* I */ .char9 { z-index: 7; margin-left: -.125em; top: 0em; text-shadow: 0.03em -0.03em 0.2em rgba(10,10,10,0.8); } /* O */ .char10 { z-index: 1; margin-left: -.125em; top: 0em; text-shadow: 0.05em -0.05em 0.2em rgba(10,10,10,0.9); } /* N */ .char11 { z-index: 0; top: -.04em; margin-left: -.125em; text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9); }
/*Using Lettering.js https://github.com/davatron5000/Lettering.js/*/ $(document).ready(function() { $(".stack").lettering(); });

Related: See More


Questions / Comments: