Tutorial: Ready to Use CSS3 effects
This tutorial will show you how to create "promotion" boxes that have been pre-set and comes with this template. You just need to use the "correct" HTML scheme to activate it. They can be used in articles, modules and so forth. (Basically anyplace where you can type HTML)
IMPORTANT NOTICATION: In CSS3 hover effects, RGBA Color codes rgba(37,79,120, 0.5) are used for MASK to get transparent backgrounds. For instance, the rgba color code for the color "RED" is: rgba(255,0,0,0.5). The first 3 numbers 255,0,0 represents the color ingredients and the last number 0.5 indicates the trasparency. (mininum 0, maximum 1)
| Live Preview | HTML Scheme (just copy-paste the HTML lines, then customize the contents.) |
Promotion Box<div class="promo-box"> <h5>iPad</h5> <h6>Two sizes do all.</h6> <a href="#URL_GOES_HERE"><img src="images/promo_1.png" alt="" border="0" /></a> <a href="#URL_GOES_HERE">Shop Now</a> </div> |
|
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #1<div class="FlexibleHover effect1">
You can change the mask color. The default is: rgba(37,79,120, 0.5), which is this: <img border="0" alt="" src="images/stories/homeBanner2.jpg" class="maxwidth"> <div style="background-color: rgba(37,79,120, 0.5);" class="mask"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #2<div class="FlexibleHover effect2">
You can change the mask color. The default is: rgba(255,188,92, 0.5), which is this: <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" /> <div style="background-color: rgba(255,188,92, 0.5);" class="mask"> </div> <div class="content"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #3<div class="FlexibleHover effect3">
You can change the mask color. The default is: rgba(231,68,68, 0.5), which is this: <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" /> <div style="background-color: rgba(231,68,68, 0.5);" class="mask"> </div> <div class="content"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #4<div class="FlexibleHover effect4">
You can change the mask color. The default is: rgba(231,243,43, 0.5), which is this: <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" /> <div style="background-color: rgba(231,243,43, 0.5);" class="mask"> </div> <div class="content"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #5<div class="FlexibleHover effect5">
You can change the mask color. The default is: rgba(46,206,76, 0.5), which is this: <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" /> <div style="background-color: rgba(46,206,76, 0.5);" class="mask"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #6<div class="FlexibleHover effect6">
You can change the mask color. The default is: rgba(46,140,206, 0.5), which is this: <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" /> <div style="background-color: rgba(46,140,206, 0.5);" class="mask"> </div> <div class="content"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #7<div class="FlexibleHover effect7">
You can change the mask color. The default is: rgba(46,206,159, 0.5), which is this: <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" /> <div style="background-color: rgba(46,206,159, 0.5);" class="mask"> </div> <div class="content"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #8<div class="FlexibleHover effect8">
You can change the mask color. The default is: rgba(37,79,120, 0.5), which is this: <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" /> <div style="background-color: rgba(37,79,120, 0.5);" class="mask"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
MENS SHOESThe best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes |
Hover Effect #9<div class="FlexibleHover effect9">
You can change the mask color. The default is: rgba(119, 0, 36, 0.5), which is this: <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" /> <div class="mask mask-1" style="background: rgba(119, 0, 36, 0.5);"></div> <div class="mask mask-2" style="background: rgba(119, 0, 36, 0.5);"></div> <div class="content"> <h2>MENS SHOES</h2> <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p> <a href="#" class="info">Shop Mens Shoes</a> </div> </div> |
Twitter
Facebook
Youtube
Pinterest