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 [...]
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: [...]
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 [...]
Now we don’t have to rely on animated gifs in creating AJAX loading animation effects. This CSS3 tutorial will teach us how to create three different types of loading animation. Let’s start off with our HTML markup. HTML Markup <div id=’loading’> <div id=’Column1′ class=’Columns’></div> <div id=’Column2′ class=’Columns’></div> <div id=’Column3′ class=’Columns’></div> <div id=’Column4′ class=’Columns’></div> <div id=’Column5′ [...]
Here’s a shortlist of five simple yet cool HTML5 effects that can add life to your website! No images and JavaScript are necessary, as all of them are accomplished using only a combination of HTML5 and CSS3. 1. CSS3 Loading Animation A very basic loading animation. CSS code: <style type=’text/css’> @-webkit-keyframes rotate { from { [...]
I’ve come across this neat tutorial on how to create nice-looking linked tooltips using CSS3 and a little bit of jQuery for that cool fade in/out effect. Below is a screenshot of what the tooltips in the tutorial look like: There are 3 variations of the balloons’ arrows, wherein they can point left, center, or [...]
Mary Lou of Tympanus.net shows us a fun way to add a background image to a text element by experimenting with the CSS property “background-clip: text”. We can create very beautiful effects with the addition of these CSS3 transitions. Take note that the property ‘background-clip: text’ is supported in Webkit browsers only. Check out the [...]
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” [...]
Click on the image above to view the demo. Clickable buttons add visual appeal and functionality to any website. Madalin Tudose‘s tutorial on creating CSS3 buttons is applicable to all modern browsers like Chrome, Firefox, Safari etc., and even old browsers like IE6. CSS3, allows you to create fantastic styles like gradients, rounded corners and [...]
Thanks to Photoshop tools like gradients, font-face, etc. we can create some very cool buttons without needing to use a single image. Jeffrey Way delivers us his kickass version of a button a la Twitter using 100% CSS3. Yes folks, this is pure CSS. Click on the image above for the vid tutorial. Below is [...]
0
510
