Here’s another cool navigation menu that I came across. Created by the savvy web developers at Script-tutorials, the LavaLamp menu is a navigation menu that is made with pure CSS3. Below are the following codes. HTML Index.html <ul id=”nav”> <li><a href=”http://www.script-tutorials.com/”>Home</a></li> <li><a href=”#”>Menu 1</a> <ul> <li><a href=”#”>Submenu 1</a></li> <li><a href=”#”>Submenu 2</a></li> <li><a href=”#”>Submenu 3</a></li> <li><a [...]
Today’s featured tutorial is written by Valeriu Timbuc from DesignModo, which teaches you how to create a video player using a combination of HTML5, jQuery, and CSS3. The look and feel of the video player is based on Vladimir Kudinov’s Impressionist UI design, which of course, we’re going to recreate using CSS3. As for the [...]
Chris Spooner shares a nice tutorial on how you can create a vibrant digital poster design with CSS3. His Circlicious design is made purely of HTML and CSS. Take note that this is only suited to modern browsers of Firefox, Safari and Chrome. HTML <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>Circlicious CSS Poster</title> <link [...]
Here’s another awesome tutorial by Mary Lou and it’s about how to create a neat thumbnail proximity effect with jQuery. To start with, here’s the markup: <ul id=”pe-thumbs” class=”pe-thumbs”> <li> <a href=”#”> <img src=”images/thumbs/1.jpg” /> <div class=”pe-description”> <h3>Time</h3> <p>Since time, and his predestinated end</p> </div></a> </li> <li><!- … -></li> </ul> Styling: CSS Adding background image [...]
Here’s a tutorial I’ve found that can spice up your web ads and banners. Here, Caleb Jacob teaches you how to create this nice banner using CSS33 animations. Please be reminded that this works on browsers that support CSS animations, and although Jacob made this to function in other browsers, don’t expect perfect support for [...]
Web developer Martin Angelov demonstrates how you can create a Timeline Portfolio. Timeline is a jQuery plugin that shows chronological series of events. Here, you can embed different types of media such as videos, maps, tweets then associate them with date. Basic layout: HTML Index.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>Timeline Portfolio | [...]
Once again, Mary Lou‘s great CSS3 tutorial shows you how to create a neat sliding image panels. The idea is to use background images as panels, which become animated when you click on the label. Be reminded that this works on browsers that support CSS transitions and animations. Below are the following codes. Markup <section [...]
Here’s another good CSS3 and jQuery tutorial from awesome web developer Mary Lou. Her creation is a direction-aware hover effect using these two elements. Reminder: This only works on browsers that support CSS transactions. Unordered list for thumbnails and descriptions overlays: <ul id=”da-thumbs” class=”da-thumbs”> <li> <a href=”http://dribbble.com/shots/502538-Natalie-Justin-Cleaning”> <img src=”images/7.jpg” /> <div><span>Natalie & Justin Cleaning by [...]
Tom Kenny demonstrates how you can create the illusion of simple stacked elements with CSS3 pseudo-elements. HTML <div> <img src=”image1.jpg” /> </div> CSS .stack { position: relative; z-index: 10; } /* Image styles */ .stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: [...]
Here’s a cool CSS3 tutorial from Designlovr and it shows how you can create a dynamic stack of index cards. HTML markup <body> <div id=”wrapper”> <ul id=”index_cards”> <li id=”card-1″> <h3>Card 1</h3> <img src=”images/t9tuqui_trans.png” height=”130″ width=”130″ alt=”Toucan” /> <p>Name: Toucan<br /> Age: 5<br /> Size: 50 cm<br /> Weight: 600 g<br /> Food: Fruit<br /> Toucan [...]
0
510
