Everyone loves 3D effects and so do I.Before you check out the demo's below I want to discuss some compatibility issues of CCS3 in different browsers.Css3 is best interpreted by web-kit browsers like Google chrome.Other browsers may not even recognize css3, while browsers like Opera and Firefox will partly recognize but not as smooth as Google Chrome.Check out the Picture below and everything will be crystal clear.
So dont blame me if you are not using Google Chrome :-D
1.Css3 3D Text Effect
3D text effect can be achieved by implementing 12 shadow properties from markdotto.You can also check out other shadow awesomeness here 12 Fun CSS Text Shadows You Can Copy and Paste.
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
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);
}
</style>
<h1>This is a simple 3D text</h1>
2.Css3 Smooth Color Change Effect On Hover
Using basic transition properties of css3,below effect can be achieved.
<style>
body{
margin:0px;
top-margin:0px;
margin-bottom:0px;
}
h1 {
font-size: 55px;
font-family:medula one;
color:fff;
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);
}
h1 span {
-moz-transition: color 1s;
-webkit-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
}
h1:hover .char1 {
-moz-transition: color 0.2s;
-webkit-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
color: red;
-webkit-transform: scale(0.9);
}
h1:hover .char2 {
-moz-transition: color 0.2s 0.1s;
-webkit-transition: color 0.2s 0.1s;
-o-transition: color 0.2s 0.1s;
transition: color 0.2s 0.1s;
color: orange;
}
h1:hover .char3 {
-moz-transition: color 0.2s 0.2s;
-webkit-transition: color 0.2s 0.2s;
-o-transition: color 0.2s 0.2s;
transition: color 0.2s 0.2s;
color: yellow;
}
h1:hover .char4 {
-moz-transition: color 0.2s 0.3s;
-webkit-transition: color 0.2s 0.3s;
-o-transition: color 0.2s 0.3s;
transition: color 0.2s 0.3s;
color: green;
}
h1:hover .char5 {
-moz-transition: color 0.2s 0.4s;
-webkit-transition: color 0.2s 0.4s;
-o-transition: color 0.2s 0.4s;
transition: color 0.2s 0.4s;
color: blue;
}
h1:hover .char6 {
-moz-transition: color 0.2s 0.5s;
-webkit-transition: color 0.2s 0.5s;
-o-transition: color 0.2s 0.5s;
transition: color 0.2s 0.5s;
color: indigo;
}
</style>
<h1>
<span class="char1">Hover</span>
<span class="char2">me</span>
<span class="char3">to</span>
<span class="char4">see</span>
<span class="char5">me</span>
<span class="char6">change</span>
</h1>
3.Css3 Individual Letter Color Change Effect On Hover
This is the modification of the above effect which shows how individual letters changes their color on mouse hover.
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
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);
}
span
{
cursor:pointer;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
span#char1:hover {
color: red;
}
span#char2:hover {
color: yellow;
}
span#char3:hover {
color: Green;
}
span#char4:hover {
color: maroon;
}
span#char5:hover {
color: blue;
}
span#char6:hover {
color: pink;
}
span#char7:hover {
color: orange;
}
span#char8:hover {
color: purple;
}
</style>
<h1>
<span id="char1">A</span>
<span id="char2">m</span>
<span id="char3">a</span>
<span id="char4">z</span>
<span id="char5">i</span>
<span id="char6">n</span>
<span id="char7">g</span>
<span id="char8">!</span>
<span id="char1">A</span>
<span id="char2">m</span>
<span id="char3">a</span>
<span id="char4">z</span>
<span id="char5">i</span>
<span id="char6">n</span>
<span id="char7">g</span>
<span id="char8">!</span>
</h1>
4.css3 3D Text With Shadow On Mouse Hover
This one is my favorite.As you can see I have just given the hover effect to the first demo which does nothing and it turned out to be beautiful.
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:ccc;
-webkit-transition: all .7s ease-out;
-moz-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
}
h1:hover{
cursor:pointer;
color:fff;
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);
}
</style>
<h1>www.amazingthings.in</h1>
5.Css3 Vibration Effect On a Single Letter
Yes,Css3 can also be used for animations using Keyframes.Check out An Introduction To CSS3 Keyframe Animations.
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
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);
}
#vibrate h1 span {
display: inline-block;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
}
#vibrate h1:hover span {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-webkit-animation: amaz 0.2s linear infinite 0.3s;
-moz-animation: amaz 0.2s linear infinite 0.3s;
}
@-webkit-keyframes amaz {
0% {
-webkit-transform: rotate(0) scale(1.3);
}
25% {
-webkit-transform: rotate(5deg) scale(1.3);
}
50% {
-webkit-transform: rotate(0deg) scale(1.3);
}
75% {
-webkit-transform: rotate(-5deg) scale(1.3);
}
100% {
-webkit-transform: rotate(0) scale(1.3);
}
}
@-moz-keyframes amaz {
0% {
-moz-transform: rotate(0) scale(1.3);
}
25% {
-moz-transform: rotate(5deg) scale(1.3);
}
50% {
-moz-transform: rotate(0deg) scale(1.3);
}
75% {
-moz-transform: rotate(-5deg) scale(1.3);
}
100% {
-moz-transform: rotate(0) scale(1.3);
}
}
</style>
<h1>What <span>R</span> you doing here ?</h1></div>
6.Css3 Zoom Effect On Mouse Hover
A Simple Zoom Effect on mouse hover , as simple as that :-)
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
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);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
h1:hover{
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
</style>
<h1>AmazingThings.in</h1>
7.Individual Letter Zoom Effect Using Lettering.js
This one is combination of css3 and lettering.js
<script type="text/javascript" src="http://andreashommel.net/sandbox/lettering/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://andreashommel.net/sandbox/lettering/jquery.lettering-0.6.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Medula+One' rel='stylesheet' type='text/css'>
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
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);
}
h1 span {
display:inline-block;
-webkit-transition:all 0.2s ease-out;
}
h1 span:hover {
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
}
</style>
<h1 class="sexy">www.amazingthings.in</h1>
<script language="javascript">
$(document).ready(function() {
$(".sexy").lettering();
});
</script>
You can also check out the video to check out how I see the animation on my Chrome browser (Its even more smoother than it seems in video),I hope its same for all you guys :-)
Thats all Folks...I Hope you Enjoyed! any Queries or Confusion Drop me a comment!!
Thats all Folks...I Hope you Enjoyed! any Queries or Confusion Drop me a comment!!
