The HoverBoard 3D effect, created by Ryan McLaughlin, replicates Pranav Pramod‘s version which you can see here. Click on the image above to view Ryan’s demo! Check out the code below: HTML <div id=”container”> Hello there. <div id=”hover-flip”> Peek-a-boo! <p>Hover meh</p> </div> </div> CSS body { background: #555; color: #555; font-family: ‘helvetica neue’, [...]
Designer Trent Walton‘s CSS3 Background Clip is his version of the Quoting Lebowski series’ design, mimicking its styles, fonts and colors without the use of any Photoshop. Just pure CSS, folks! Here is the CSS structure. Style.css .itried {font-size: 50px;} .css {font-size: 206px;letter-spacing: 5px;line-height: 1;} .itworked { font: italic 60px/0 “bistro-script-web-1″,”bistro-script-web-2″, cursive; text-transform: lowercase; margin-bottom: [...]
If you want a simple and straightforward way of presenting your online portfolio then try Bootstrap Image Gallery. Created by Sebastian Tschan (a.k.a. blueimp), this extension of Twitter’s Bootstrap toolkit for its Modal dialog provides very easy navigation between sets of gallery images, plus all of the essential attributes and functions that other image slider [...]
This HTML and CSS tutorial by the zurb.com web developers recreates the shadow effect a la Pink Floyd’s album cover of their classic ’73 hit LP. For the rainbow element, <div id=”rainbow”> is used. HTML /* All you need is one element to style. */ <div id=”rainbow”> </div> CSS /* Get some basic styles down [...]
Sometimes, inserting a table with lots of tubular data presents space issues in web design. But thanks to jQuery plugins like tableScroll from farinspace, the size of our tables won’t have to be dependent on the amount of data it contains. Click on the image above to get download options, available in compressed formats: TAR, [...]
Web designer and developer Mary Lou shows us how to create a simple blur effect for text-based items using jQuery and CSS3. What this plugin does is it blurs and scales down texts boxes that are hovered over, while scaling up the item in focus, drawing attention to it. Click on the image to know [...]
Ever noticed how shopping sites can filter out certain items according to the visitor’s preferences? Here’s a quick and very helpful tutorial that will teach you how to do something similar to that without any need for database calls or page refreshes. Let’s begin with the CSS structure to make the layout presentable. /* SIMPLE [...]
Illustrator guru Jasmina Stanojevich kicks up the web design scene this 2012 with this cool vector social media icon set. Click on the image below to grab the free set today! Incoming search terms for the article: icons 2012 social media 2012 icon 2012 social icons 2012 social media icons 2012 web design 2012 [...]
What’s great about sequence.js is that unlike most other slider plugins, it presents unlimited customization options, which is why designer Ian Lunn touts it as ‘the jQuery slider plugin with infinite style’. Rotate, fade, skew, 3D transform, parallax effects, you name it, you got it! It’s also responsive, supports touch devices, non-JS fallbacks, and it [...]
The Power PWChecker is a free jQuery plugin that helps your website users come up with a more secure password. It can be integrated with any form on your website. Click on the image above to view the demo. What the Power PWChecker does is it observes the password and checks its strength so the [...]
0
504
