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.


    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;


<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>

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


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!



Have any question? Feel Free To Post Below:


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

Home | | Privacy Policy | Top