Design Snippets to Wow Your Website Visitors

Web trends seem to change overnight. Each year the newest looks make their way into the code of websites across the Internet causing designers to start thinking about how they can apply these styles to their portfolio.

Luckily Cascading Style Sheets (CSS) makes it easy to apply the look and experience of the latest design trends to a site in a matter of minutes when you use snippets.Some snippets were created to increase functionality and provide the user with a better experience, but the ones below deal strictly with the aesthetics of your website. Each one will help you stay current with the latest trends and wow your visitors.

Flat menu

Flat design is all the rage these days. With this snippet, you can build a flat navigation menu that uses icons, but when selected the name of the page appears to the right of the menu as well:

nav ul {

list-style: none; overflow: hidden; position: relative;

}

nav ul li {

}

float: left; margin: 0 20px 0 0;

nav ul li a {

display: block; width: 120px; height: 120px;

background-image:url(icons.png);background-repeat:no-repeat;

}

nav ul li:nth-child(1) a {

background-color: #5bb2fc;

background-position: 28px 28px;

}

nav ul li:nth-child(2) a {

background-color: #58ebd3;

background-position: 28px -96px;

}

nav ul li:nth-child(3) a {

background-color: #ffa659;

background-position: 28px -222px;

}

nav ul li:nth-child(4) a {

background-color: #ff7a85;

background-position: 28px -342px;

}

nav ul li a span {

font: 50px "Dosis", sans-serif;

text-transform: uppercase;

top: 29px;

position: absolute; left: 580px;

display: none;

}

nav ul li a:hover span {

}

nav ul li:nth-child(1) a span {

color: #5bb2fc;

}

nav ul li:nth-child(2) a span {

color: #58ebd3;

}

nav ul li:nth-child(3) a span {

color: #ffa659;

}

nav ul li:nth-child(4) a span {

color: #ff7a85;

}

display: block;

Cool looking social footer

Each icon should have div element that calls on the font icon that corresponds with the social service using this HTML:

<div class="footer">

<div class="social">&#62220;</div>

<div class="social">&#62217;</div>

<div class="social">&#62223;</div>

<div class="social">&#62232;</div>

<div class="social">&#62235;</div>

<div class="social">&#62226;</div>

<div class="social">&#62214;</div>

</div>

And here is the css to make it look nice:

@import url('https://fonts.googleapis.com/css?family=Lato:300');

@import url('http://weloveiconfonts.com/api/?family=entypo');

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

body {

background: #ddd;

}

.content {

padding: 30px;

font: 300 40px Lato, sans-serif;

text-align: center;

color: #999;

background: #eee;

}

.footer {

padding: 20px 0;

text-align: center;

}

.social {

display: inline-block;

width: 70px;

height: 70px;

margin: 0 10px;

line-height: 70px;

font-family: Entypo;

font-size: 35px;

text-align: center;

color: #bbb;

border-radius: 50%;

background: #eee;

overflow: hidden;

transition: color .3s;

}

.social:hover {

color: #59d;

cursor: pointer;

}

.social {

box-shadow: rgb(210, 210, 210) 1px 1px,

rgb(210, 210, 210) 2px 2px,

rgb(211, 211, 211) 3px 3px,

rgb(211, 211, 211) 4px 4px,

rgb(211, 211, 211) 5px 5px,

rgb(212, 212, 212) 6px 6px,

rgb(212, 212, 212) 7px 7px,

rgb(212, 212, 212) 8px 8px,

rgb(213, 213, 213) 9px 9px,

rgb(213, 213, 213) 10px 10px,

rgb(214, 214, 214) 11px 11px,

rgb(214, 214, 214) 12px 12px,

rgb(214, 214, 214) 13px 13px,

rgb(215, 215, 215) 14px 14px,

rgb(215, 215, 215) 15px 15px,

rgb(215, 215, 215) 16px 16px,

rgb(216, 216, 216) 17px 17px,

rgb(216, 216, 216) 18px 18px,

rgb(216, 216, 216) 19px 19px,

rgb(217, 217, 217) 20px 20px,

rgb(217, 217, 217) 21px 21px,

rgb(218, 218, 218) 22px 22px,

rgb(218, 218, 218) 23px 23px,

rgb(218, 218, 218) 24px 24px,

rgb(219, 219, 219) 25px 25px,

rgb(219, 219, 219) 26px 26px,

rgb(219, 219, 219) 27px 27px,

rgb(220, 220, 220) 28px 28px,

rgb(220, 220, 220) 29px 29px,

rgb(221, 221, 221) 30px 30px;

text-shadow: rgb(226, 226, 226) 1px 1px,

rgb(227, 227, 227) 2px 2px,

rgb(227, 227, 227) 3px 3px,

rgb(228, 228, 228) 4px 4px,

rgb(229, 229, 229) 5px 5px,

rgb(229, 229, 229) 6px 6px,

rgb(230, 230, 230) 7px 7px,

rgb(230, 230, 230) 8px 8px,

rgb(231, 231, 231) 9px 9px,

rgb(232, 232, 232) 10px 10px,

rgb(232, 232, 232) 11px 11px,

rgb(233, 233, 233) 12px 12px,

rgb(233, 233, 233) 13px 13px,

rgb(234, 234, 234) 14px 14px,

rgb(235, 235, 235) 15px 15px,

rgb(235, 235, 235) 16px 16px,

rgb(236, 236, 236) 17px 17px,

rgb(236, 236, 236) 18px 18px,

rgb(237, 237, 237) 19px 19px,

rgb(238, 238, 238) 20px 20px;

}

If you would like to maintain the flat look, simply remove the shadows in the CSS.

Registration/login form

It's one thing to use the stale forms that come with so many web apps and another to give your users something that pops. Give this snippet a try for a cool looking form:

Of course these snippets will likely stray from the colors and design that your sites use because they are for generic use. Simply change out the colors, the radius of the corners or anything else that needs an adjustment to make things look more like your own site.

Advanced designers; as well as those who are new to HTML and CSS can find these snippets to be a valuable addition to their toolbox. If you find that you need a bit of help to get things changed to look the way you want them to, take some time to review some of the CSS tutorials available from w3schools.com.