Special Effects using CSS and some fantasy

CSS is amazing, it allows you to do a lot without the need of javascript, I use it to keep responsiveness of a website, for example.. But, I also like to add fancy, pure decoration effects.

Let's see some examples...

 

CSS Animated examples

By just usng CSS, see what can be done...

Bouncing, or jump effect using animation and text-shadow.

@keyframes bouncer_anim { 0% {text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.88);} 20% {text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.88);} 40% {text-shadow: 7px 7px 7px rgba(0, 0, 0, 0.88);} 50% {text-shadow: 8px 8px 8px rgba(0, 0, 0, 0.88);} 70% {text-shadow: 7px 7px 7px 4px rgba(0, 0, 0, 0.88);} 90% {text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.88);} 100% {text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.88);} }

This is done using text-shadow and animation applied to it.

Each line of the animation below represents a 'frame' of the animation, that goes from 0 to 100%, and actually it represent the percentage of the total animation time (that is set within the css of the element to animate)

@keyframes bounce {
 0% {text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.88);}
 20% {text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.88);}
 40% {text-shadow: 7px 7px 7px rgba(0, 0, 0, 0.88);}
 50% {text-shadow: 8px 8px 8px rgba(0, 0, 0, 0.88);}
 70% {text-shadow: 7px 7px 7px 4px rgba(0, 0, 0, 0.88);}
 90% {text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.88);}
 100% {text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.88);}
}

And this is the CSS applied to the element you want to "bounce", or animate.

.bouncer {
 animation-name: bounce;
 animation-duration: 2s;
 animation-iteration-count: infinite;
}

Hover Underline effect

.hover-effect h3:after { content: ""; position: absolute; width: 120%; height: 2px; bottom: 24px; left: -10%; background: #e7308c; transform: scalex(0); transition: .2s; }

hover-effect h3:hover:after { content: ""; position: absolute; width: 120%; height: 2px; bottom: 24px; left: -10%; background: #e7308c; transform: scalex(1); transition: .2s; }

This is done using text-shadow and animation applied to it.

Each line of the animation below represents a 'frame' of the animation, that goes from 0 to 100%, and actually it represent the percentage of the total animation time (that is set within the css of the element to animate)

li.menu-item a:after {
    content: "";
    position: absolute;
    width: 120%;
    height: 2px;
    bottom: 24px;
    left: -10%;
    background: #e7308c;
    transform: scalex(0);
    transition: .2s;
}

li.menu-item a:hover:after {
    content: "";
    position: absolute;
    width: 120%;
    height: 2px;
    bottom: 24px;
    left: -10%;
    background: #e7308c;
    transform: scalex(1);
    transition: .2s;
}
Posted in Code Tricks and tagged , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.