Text Css Shadow Animation

Text Css Shadow Animation

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

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.



<h1 data-shadow='CreativeBuck'>CreativeBuck!</h1>


@import url(http://fonts.googleapis.com/css?family=Righteous);

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;

html, body {
  height: 100%;
  body {
    text-align: center;
    background-color: hsla(230,40%,50%,1);
  body:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    height: 100%;

h1 {
  display: inline-block;
  color: white;
  font-family: 'Righteous', serif;
  font-size: 12em; 
  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
  h1:after {
    content: attr(data-shadow);
    position: absolute;
    top: .06em; left: .06em;
    z-index: -1;
    text-shadow: none;
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
    background-size: .05em .05em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shad-anim 15s linear infinite;

@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}


Related Articles

Leave a comment

Creative Buck ©2016. All Rights Reserved.


Back to Top