CSS - Texteffekte

Hit the floor

3D Block mit Schatten Effekt

http://codepen.io/ThatGuySam/pen/CytDA (2016-12)

<div class="hit-the-floor">404</div>

.hit-the-floor {
color: #fff;
font-size: 12em;
font-weight: bold;
font-family: Helvetica;
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);
}

.hit-the-floor {
  text-align: center;
}

body {
  background-color: #f1f1f1;
}

Background Clip FX

Sehr schicker Effekt mit Bildern im Text-Background

http://codepen.io/Jintos/pen/crlxk (2016-12)

HTML

<div class="wrapper">
      <p class="title">Play with background-clip text</p>
      <div class="clip-text clip-text_one">JINTOS</div>
  <div class="clip-text clip-text_fifteen clip-text--no-textzone">JINTOS</div>
      <div class="clip-text clip-text_twelve clip-text--cover">JINTOS</div>
  <div class="clip-text clip-text_tree clip-text--no-textzone">JINTOS</div>
      <div class="clip-text clip-text_two">JINTOS</div>
      <div class="clip-text clip-text_fourteen clip-text--cover">JINTOS</div>
      <div class="clip-text clip-text_tree">JINTOS</div>
      <div class="clip-text clip-text_eleven clip-text--cover">JINTOS</div>
      <div class="clip-text clip-text_four">JINTOS</div>
      <div class="clip-text clip-text_five">JINTOS</div>
      <div class="clip-text clip-text_six">JINTOS</div>
      <div class="clip-text clip-text_seven">JINTOS</div>
      <div class="clip-text clip-text_eight">JINTOS</div>
      
      <div class="clip-text clip-text_nine">JINTOS</div>
      <div class="clip-text clip-text_ten">JINTOS</div>
      <div class="clip-text clip-text_thirteen clip-text--cover">JINTOS</div>
  </div>

CSS (scss)

/* 
  Based from this article from Divya Manian - 
  http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
*/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

* {
    margin: 0;
    padding: 0;
}

*,
:before,
:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: 'Oswald', sans-serif;
    color: #fff;
    background-color: #000;
}

.wrapper {
    text-align: center;
}

.title {
    font-size: 2em;
    position: relative;
    margin: 0 auto 1em;
    padding: 1em 1em .25em 1em;
    text-align: center;
    text-transform: uppercase;
}
.title:after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 240px;
    height: 4px;
    margin-left: -120px;
    content: '';
    background-color: #fff;
}

/* Clip text element */
.clip-text {
    font-size: 6em;
    font-weight: bold;
    line-height: 1;
    position: relative;
    display: inline-block;
    margin: .25em;
    padding: .5em .75em;
    text-align: center;
    /* Color fallback */
    color: #fff;
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}

.clip-text:before,
.clip-text:after {
    position: absolute;
    content: '';
}

/* Background */
.clip-text:before {
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: inherit;
}

/* Text Background (black zone) */
.clip-text:after {
    position: absolute;
    z-index: -1;
    top: .125em;
    right: .125em;
    bottom: .125em;
    left: .125em;
    background-color: #000;
}

/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
    background-position: -.65em 0;
}

.clip-text--no-textzone:after {
    content: none;
}

/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
}

/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
    background-image: url(http://lorempixel.com/480/200/abstract/7);
}

.clip-text_two {
    background-image: url(http://lorempixel.com/480/200/abstract);
}

.clip-text_tree {
    background-image: url(http://lorempixel.com/480/200/abstract/2);
}

.clip-text_four {
    background-image: url(http://lorempixel.com/480/200/abstract/4);
}

.clip-text_five {
    background-image: url(http://lorempixel.com/480/200/abstract/5);
}

.clip-text_six {
    background-image: url(http://lorempixel.com/480/200/abstract/9);
}

.clip-text_seven {
    background-image: url(http://lorempixel.com/480/200/abstract/8);
}

.clip-text_eight {
    background-image: url(http://lorempixel.com/410/200/people);
}

.clip-text_nine {
    background-image: url(http://lorempixel.com/480/200/nightlife);
}

.clip-text_ten {
    background-image: url(http://lorempixel.com/480/200/nightlife/8);
}

.clip-text_eleven {
    background-image: url(http://lorempixel.com/480/200/fashion/10/cc);
    background-size: cover;
}

.clip-text_twelve {
    background-image: url(http://lorempixel.com/480/200/people/7/cc);
}

.clip-text_thirteen {
    background-image: url(http://lorempixel.com/480/200/food/5/cc);
}

.clip-text_fourteen {
    background-image: url(http://lorempixel.com/480/200/city/9/cc);
}

.clip-text_fifteen {
    background-image: url(http://lorempixel.com/480/200/nightlife/5);
}

Schicke Text-Schatteneffekte

http://codepen.io/juanbrujo/pen/yGpAK (2016-12)

CSS (SASS)

h1 {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 92px;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
  
  &.elegantshadow {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
  }
  &.deepshadow {
    color: #e0dfdc;
    background-color: #333;
    letter-spacing: .1em;
    text-shadow: 
      0 -1px 0 #fff, 
      0 1px 0 #2e2e2e, 
      0 2px 0 #2c2c2c, 
      0 3px 0 #2a2a2a, 
      0 4px 0 #282828, 
      0 5px 0 #262626, 
      0 6px 0 #242424, 
      0 7px 0 #222, 
      0 8px 0 #202020, 
      0 9px 0 #1e1e1e, 
      0 10px 0 #1c1c1c, 
      0 11px 0 #1a1a1a, 
      0 12px 0 #181818, 
      0 13px 0 #161616, 
      0 14px 0 #141414, 
      0 15px 0 #121212, 
      0 22px 30px rgba(0, 0, 0, 0.9);
  }
  &.insetshadow {
    color: #202020;
    background-color: #2d2d2d;
    letter-spacing: .1em;
    text-shadow: 
      -1px -1px 1px #111, 
      2px 2px 1px #363636;
  }
  &.retroshadow {
    color: #2c2c2c;
    background-color: #d5d5d5;
    letter-spacing: .05em;
    text-shadow: 
      4px 4px 0px #d5d5d5, 
      7px 7px 0px rgba(0, 0, 0, 0.2);
  }
}

Schatteneffekte 2

http://www.htmlgoodies.com/html5/client/mastering-css3.-7-cool-text-shadow-samples-you-cant-miss.html

We’ve been exploring the basics on how to use CSS3 shadows: box-shadow and text-shadow. Today we are going to improve our skills and will look into how to build some amazing text-shadows.

Some of the ideas for shadows, I found in various tutorials for Photoshop — and I was interested whether I can achieve similar effects by using just text-shadow.

Internet Explorer and Windows 8

To try all these samples yourself and express your creativity with the text-shadow, try downloading Internet Explorer 10. All mentioned techniques will also work with metro style apps for Windows 8 built using html and javascript. May The Shadow be with you!

Arcade Love

color: hsl(80, 70%, 55%);
text-shadow: 0 0 2px #fff,
/* embossed text */
           -1px -1px 0 hsl(80, 70%, 35%),
           -2px -2px 1px hsl(80, 70%, 35%),
           /* transition to substrate */ 
           -2px -2px 2px hsl(80, 10%, 15%),
           /* substrate */                           
           -2px -2px 0 7px hsl(60, 80%, 95%),
           -3px -3px 0 7px hsl(60, 10%, 65%),
           -4px -4px 0 7px hsl(60, 10%, 65%),
           -5px -5px 0 7px hsl(60, 10%, 65%),
           -6px -6px 0 7px hsl(60, 10%, 65%),
           /* shadow for substrate */                           
           -7px -7px 4px 8px hsl(60, 10%, 40%),
           -8px -8px 6px 9px hsl(60, 10%, 55%);

Color Happiness

In the second sample we will reuse some ideas of the first one: we a going to build multiple colorful substrates making a pyramid of them. We will start with a very simple pink text:

Final result

color: hsl(330, 100%, 50%);
text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),
            0 3px 2px 0px hsla(330, 100%, 15%, 0.5),
            /* next */
            0 3px 0 3px hsl(350, 100%, 50%),
            0 5px 0 3px hsl(350, 100%, 25%),
            0 6px 2px 3px hsla(350, 100%, 15%, 0.5),
            /* next */
            0 6px 0 9px hsl(20, 100%, 50%),
            0 8px 0 9px hsl(20, 100%, 25%),
            0 9px 2px 9px hsla(20, 100%, 15%, 0.5),
            /* next */
            0 9px 0 18px hsl(50, 100%, 50%)
            0 11px 0 18px hsl(50, 100%, 25%),
            0 12px 2px 18px hsla(50, 100%, 15%, 0.5),
            /* next */
            0 12px 0 30px hsl(70, 100%, 50%),
            0 14px 0 30px hsl(70, 100%, 25%),
            0 15px 2px 30px hsla(70, 100%, 15%, 0.5),
            /* next */
            0 15px 0 45px hsl(90, 100%, 50%),
            0 17px 0 45px hsl(90, 100%, 25%),
            0 17px 2px 45px hsla(90, 100%, 15%, 0.5);

Chocolate

The third sample I built while experimenting with alternating shadows. Final result

color: hsl(20, 100%, 20%);
text-shadow: 0 0 1px hsl(20, 100%, 18%),
           -1px 1px 0 hsl(20, 100%, 16%),                            
            -2px 2px 2px -1px hsl(20, 100%, 14%),                            
            -4px 4px 2px -2px hsl(20, 100%, 12%),
            -6px 6px 3px -3px hsl(20, 100%, 10%),
            -8px 8px 2px -4px hsl(20, 100%, 9%),
            -10px 10px 3px -5px hsl(20, 100%, 8%),
            -12px 12px 2px -6px hsl(20, 100%, 7%),
            -14px 14px 2px -7px hsl(20, 100%, 6%),
            -15px 15px 2px -8px hsl(20, 100%, 5%),                            
            -15px 15px 0 -8px hsla(20, 50%, 10%, 0.25);

Cream Cake In the fourth sample we will build a cream-text effect for some cake. Just text:

Final result

color: hsl(35, 100%, 30%);
background: hsl(35, 60%, 80%);
text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),
            /* transition to substrate */
            0 0 4px 4px hsla(30, 100%, 55%, 0.5),
            /* substrate */
            -1px 1px 2px 7px hsl(45, 60%, 95%),
            /* adding volume */
            -3px 3px 1px 4px hsl(35, 70%, 30%),
            /* transition to background */
            -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5);

Plastic

I was playing with the last one sample thinking what I can do on top of it… As in many other samples final results depends on both: the text itself (size, font and so on) and applied shadow effects. In my fifth sample I’m using the CabinSketch font.

Final result

color: hsl(65, 60%, 20%);
background: hsl(65, 60%,95%);
text-shadow: 0 0 3px 2px hsl(65, 60%,75%),
           /* light substrate */
           0 0 1px 5px hsl(65, 60%,95%),
           /* blurring */
           0 0 4px 4px hsla(65, 100%, 30%, 0.4),
           /* cutting substrate pieces */
           6px 6px 4px 7px hsl(65, 60%,95%),
           -4px -6px 4px 6px hsl(65, 60%,95%),
           /* dark outlining */
           0 0 1px 9px hsl(65, 60%, 20%);

Painting

The following two samples will open for you some technics on how to use the transparency. Think on it: how would you use the text-shadow to draw something inside the text? Actually you can’t use the text-shadow to draw inner shadows. All the shadows you apply to the text are composed into a stack and are drawn one on top of another, and the text is drawn on top of all of them. So you need to make the text to disappear somehow… and to make it happen you can just make the text transparent!

Final result

color: transparent;
background: hsl(0, 75%,45%);
text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75),
            -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65),
            1px 1px 1px -4px hsla(0, 60%, 100%, 0.65),
            /* background */
            0 0 1px 2px hsla(0, 60%, 100%, 0.65),
            /* additional details */
            -3px -3px 1px 2px hsla(0, 60%, 100%, 0.25),
            3px 3px 1px 2px hsla(0, 60%, 100%, 0.25);

Up & Down

And the final sample! I’m going to continue playing with transparency. I will start with white text (I just have selected it to make visible):

Final result

color: transparent;
text-shadow: -4px 4px hsla(0, 0%, 70%, .4),
            -3px 3px hsla(0, 0%, 60%, .2),
            -2px 2px hsla(0, 0%, 70%, .2),
            -1px 1px hsla(0, 0%, 70%, .2),
            0px 0px hsla(0, 0%, 50%, .5),
            1px -1px hsla(0, 0%, 30%, .6),
            2px -2px hsla(0, 0%, 30%, .7),
            3px -3px hsla(0, 0%, 32%, .8),
            4px -4px hsla(0, 0%, 30%, .9),
            5px -5px hsla(0, 0%, 30%, 1.0);

Gradienten

Beispiel: Gold Text

h1, h2  {
  color:  #D5AD6D; /*if no support for background-clip*/
  background: 
    -webkit-linear-gradient(transparent, transparent),
    -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, 
    rgba(213,173,109,1) 26%, 
    rgba(226,186,120,1) 35%, 
    rgba(163,126,67,1) 45%, 
    rgba(145,112,59,1) 61%, 
    rgba(213,173,109,1) 100%);
  background: -o-linear-gradient(transparent, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Flash Text

http://codepen.io/moklick/pen/tAlJB

Slash Text

http://codepen.io/robertmesserle/pen/Lebco/ (2016-12)

HTML (jade)

.slashed
  .top(title='Slashed')
  .bot(title='Slashed')

CSS (stylus)

@import "nib"

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  transform: rotate(-5deg);
  background: radial-gradient(center, crimson, darken(crimson, 60%));
}
.slashed {
  absolute: top 0 left 0 right 0 bottom 0;
  text-shadow: 3px 3px 3px rgba(black, 0.5);
  .top, .bot {
    text-align: center;
    font: 62px/100px arial;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
    color: white;
    &:before {
      content: attr(title);
      transform: rotate(5deg);
    }
  }
  .top {
    absolute: top 0 left 5px right 0 bottom 50%;
    &:before {
      absolute: bottom -50px left 0 right 0;
    }
  }
  .bot {
    absolute: top 50% left 0 right 5px bottom 0;
    &:before {
      absolute: top -50px left 0 right 0;
    }
  }
}