These Unicode icons are a neat an alternative to using images (i.e. gifs) as symbols for your website. CSS a[href^="mailto:"]:before { content: “\2709″; } .phone:before { content: “\2706″; } .important:before { content: “\27BD”; } blockquote:before { content: “\275D”; } blockquote:after { content: “\275E”; } .alert:before { content: “\26A0″; } :before, :after { color: purple; } [...]
This cool animated share button transforms from one single element into four elements each representing a link to a social site! This Sharebar uses the following pseudo classes: :first-child:before :nth-child :last-child :hover And some CSS, namely: box-shadow, transitions, border-radius, transform, and gradient background. Click on the image to view the transitioning demo. You can also [...]
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 [...]
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 [...]
Ivan Vanderbyl‘s cool CSS progress bar actually shows you a percentage of how much longer the process takes, unlike the others that just leave you guessing. Click on the screenshot above to see the code in action. HTML Markup <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Pure CSS Progress Bar</title> <link rel=”stylesheet” href=”stylesheets/ui.css”> <link rel=”stylesheet” [...]
This is another jQuery slider that would amp up your website’s interface. The multi-node range and data slider, created by EGrappler, is extremely simple to use. It is highly customizable and has many functions aside from providing data selection and filtering. Click on the image for the demo. Download the zip file. CSS .slider.default [...]
Web developer Dusky Code has created a jQuery plugin called the AnchorCloud Expanding Link Identifier. It is developed using YQL (Yahoo Query Language) to extract website contents like page title and description. Since it is only in its first release, support for media content is limited to videos from YouTube and Vimeo. The next release [...]
0
511
