October 16, 2015

Weebly Tricks #97 - Blur Menu Effect

Posted by Domingo Tambasacan at 10/16/2015



Can you really create a good landing page with Weebly? Yes you can!! It's boring to see flat sites with obsolete designs these days. In this tutorial, you can create a very beautiful landing page using a typical theme. We only need few codes. Check it out.







PAGE HEADER CODE


<style>
.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
</style>


BODY CODE


<ul class="bmenu">
<li><a href="http://www.myweeblytricks.com/">About</a></li>
<li><a href="http://www.myweeblytricks.com/">Illustrations</a></li>
<li><a href="http://www.myweeblytricks.com/">Photography</a></li>
<li><a href="http://www.myweeblytricks.com/">Web Design</a></li>
<li><a href="http://www.myweeblytricks.com/">Personal Projects</a></li>
<li><a href="http://www.myweeblytricks.com/">Contact</a></li>
</ul>

Notes:
Yellow text - These will be your initial menus on your landing page.
Green text - These will be the links for your menus.


CONCLUSION





Now that you've set up the codes above, you'll notice the effect. To modify your page similar to the live preview, you must hide some elements on your site like the body background, your headers and footers. Weebly is awesome! Thanks to Codrops for this beautiful CSS3 effects.


Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top