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; } [...]
Here are 20 beautiful and fresh Photoshop brushes that you can add to your creative arsenal. Light Flares Set 1 Photoshop Brushes Tree 4 Corners Swirls Abstract Brush Flare and Streaks Texture Pack Ninja Brushes 05 and Fractal Light Ray Brushes Smoke Brush Pack Abstract Brushes Dragon Writing [...]
JQuery can be used in creating eye-catching text effects, and not just graphics. These three text animation plugins are the most creative that I’ve found. Textualizer – Created by Kiro, the Textualizer is an extremely lightweight jQuery plugin at just around 4kb. It can rotate any number of words and sentences beautifully. When a sentence [...]
I love websites with responsive pages, and thanks to jQuery, Dan Millar‘s jQuery Anystretch is one such plugin that can make your website’s background images responsive to any size screen. Sample Screenshot @ 400px and 930px. Click to view the demo. Anystretch allows you to add a dynamically-resized background image to any page or block [...]
Web developer Christian Heilmann‘s CSS3 and HTML5-based ‘sticky note effect’ will add a quirky yet utilitarian touch to your website design. However, this works best on the latest Webkit browsers, Chrome, Opera, Safari and Firefox. With other browsers, you’ll get only the standard yellow squares. Click on the notes to try out the demo, and [...]
When creating a site with user accounts, you will need enough security to ensure that user passwords are strong and can’t be hacked easily. Factors like length, adding alphanumeric characters, unpredictability and complexity should be considered well. Jim Nielsen shares a jQuery and CSS3 tutorial on making a form that will give users live feedback [...]
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: [...]
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, [...]
0
465
