Bishal Creations Complete PC Solutions And Games Download

HOW TO ADD RAINBOW COLOR EFFECT FOR BLOGGER IMAGES

Hello Readers,Welcome Back to Bishal Creations.In this post i will show how to add rainbow color effect in your blog image.Rainbow effect is a Css3 effect in which multi colored are added to images.When the mouse is hovered ,rainbow colors will start to flow .This Css3 trick makes your blogger images look unbelievably marvelous. Also add a unique professional touch to your blog.You must be cautious that adding this will multi colored all the images n the blog.

HOW TO ADD RAINBOW COLOR EFFECT FOR BLOGGER ALL IMAGES


1) Go to Blogger Dashboard >>Template >>Edit HTML.
2) Now Find the code shown below using [ctrl+F]
]]></b:skin>
3) Now Paste the Code Shown Below just Before it.
.PTT-css3 {
cursor:pointer;
border:3px solid #6b6b6e;
background-color:#f2ac08;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcd600', endColorstr='#f2ac08');
background-image:-webkit-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-moz-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-ms-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-o-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
padding:18px 36px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
border-radius:13px;
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
text-shadow:0px 1px 0px rgba(0,0,0,0.3);
color:#140114;
font:normal 20px 'Century Gothic',Helvetica,Arial,Sans-Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
}
.PTT-css3:hover {
border-color:#4a4743;
background-color:#fcc203;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcc203', endColorstr='#de7104');
background-image:-webkit-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-moz-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-ms-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-o-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
color:#ffffff;
}
@-webkit-keyframes hue {
100% { -webkit-filter:hue-rotate(360deg); }
}
img:hover {
-webkit-animation:hue 1s linear infinite;
}
4) Now save your template. Now,You successfully addded this rainbow effect in your blog,if you have any problem just drop your comment below and don't forget to share this with your friend... Happy Blogging !!!!!
Previous
Next Post »
Post A Comment Using..

No comments :

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Notify Me" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.
ConversionConversion EmoticonEmoticon