There are many tutorials on how to create image galleries and one of these that I found easy to follow is by Jake of Vandelay Design. His creation of making a standard-compliant HTML/CSS3 image gallery with dynamic fading caption text is a great addition to your design projects. In his tutorial, the CSS3 part is [...]
Here’s a fresh tutorial by the guys at Script Tutorials about developing a sleek musical dropdown menu with HTML5 and CSS3. This navigation menu has CSS3 animation effects and an HTML5 Audio element was used in adding music to the menu. Follow the simple steps below: Step 1 HTML <ul id=”nav”> <li><a href=”#”>Menu element</a> <ul> [...]
Web development guru Manoela Ilic shares a cool CSS3 tutorial on creating slopy, skewed elements for your design. It’s inspired by different designs that use angled shapes, diagonal lines and other non-straight elements. Sample 1: section> <div> <article> <h3>Some headline</h3> <p>Some text</p> </article> </div> <div> <!- … -> </div> <!- … -> </section> Style CSS [...]
Here’s a nice flipswitch generator I’ve just stumbled via Franklin Manuel’s post. This On/Off Flipswitch uses CSS3 and HTML5 which you can easily customize. It supports all major web browsers that include Mobile safari and Android web browser. CSS .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; } [...]
Here’s another awesome CSS3 tutorial that may be useful to your design projects. Andrew of Script Tutorials demonstrates how you can create optical illusions using CSS3. Below are the following codes: HTML Index.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″ /> <title>CSS3 Optical Illusions | Script Tutorials</title> <link href=”css/layout.css” type=”text/css” rel=”stylesheet”> <link href=”css/illusions.css” type=”text/css” rel=”stylesheet”> [...]
Calatin Rosu creates a sleek CSS3 and jQuery folder tabs that can be useful in updating your site’s look. He uses the same procedures in creating good-looking CSS3 tabs. Here’s how you can do it. HTML <ul id=”tabs”> <li><a href=”#” name=”tab1″>One</a></li> <li><a href=”#” name=”tab2″>Two</a></li> <li><a href=”#” name=”tab3″>Three</a></li> <li><a href=”#” name=”tab4″>Four</a></li> </ul> <div id=”content”> <div id=”tab1″>…</div> [...]
Sergio Camalich displays a nice tutorial on how you can have your own site having page transitions effect. The technique he used here are css transitions and :target property. Markup. HTML <!- Home -> <div id=”home” class=”content”> <h2>Home</h2> <p>Some content</p> <!- … -> </div> <!- /Home -> <!- Portfolio -> <div id=”portfolio” class=”panel”> <div class=”content”> [...]
Chris Coyier shares a tutorial that creates a bubble point tooltips with CSS3 and jQuery. Note that its demo will not work on Opera. To start with, here’s the HTML: <a href=”#” title=”Hi, I’m a tooltip thingy.”>link</a> Givje the link a title attribute. jQuery: $(“article a[title]“).tooltips(); The plugin will do the following: loop through each [...]
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 [...]
0
506
