Transform Text With Css Shadow

Transform Text With Css Shadow

Animation, Css, Download Resources, HTML, Website No Comments on Transform Text With Css Shadow
Transform Text With Css Shadow

We can do a lot of things with CSS like build modals, make beautiful text effects, draw a Viking shield, and even create a heart shape. There’s also plenty that we can do with CSS3 Box Shadows, and in this post we are going to look at how some designers play around with CSS shadows to some great results.

In this list you will see CSS shadows used in creating ticking counters, 3D effects on text, pixel art, simple animation. To see more of the same work, do check out the designers’ portfolios.



Demo/Download

HTML

<section>
  <div class="cover">
   <p class="stack">Computation</p>  
  </div>
</section>

CSS

/* 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(http://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);
}

JS

/*Using Lettering.js
https://github.com/davatron5000/Lettering.js/*/

$(document).ready(function() {
    $(".stack").lettering();
  });

Author

Related Articles

Leave a comment

Creative Buck ©2016. All Rights Reserved.

Search

Back to Top