With the launch of HTML5 and CSS3 came new ways and techniques of using these advanced tools to resolve development challenges in clever ways. CSS3 can be implemented on websites to improve the browsing experience for users as well as help in quickly creating effects or functionality that for a long time required hours of labor for web developers.
Below are clever ways to leverage CSS3 for Web developers:
Responsive Images
Responsive web design allows a design to scale perfectly based on the context. Responsive images function in a similar way where images are sized based on whether they are rendered on a handheld or a desktop interface. This scaling takes into consideration that the HTML, CSS and JavaScript used is light enough to be rendered reasonably fast across these platforms. Any images that need to be loaded responsively are referenced from the mobile-friendly version of the image size by adding a “.r” prefix to the file extension and using the “data-fullsrc” HTML5 custom attribute to determine the image screen resolution.
Progress Bar
Did you know that you can create a fancy progress bar without using flash or even images? To achieve this stunning effect, you will need an HTML file that contains your markup, a CSS file for your styles and a JavaScript library file called “progress.js” that will contain the needed JQuery animations to animate the progress bar. Inside the CSS file are 2 classes; the .ui-progress-bar which acts as the container and the .ui-progress class which contains the green progress bar. The CSS file can be downloaded from this link: http://ivanvanderbyl.com/
Image Transitions
Very elegant transitions can be applied to images using JQuery plugins such as Nivo Slider. While most of these plugins use JavaScript, it is possible to implement image transitions using CSS3 animations. CSS3 transitions have the advantage of producing new effects like rotations which JavaScript plugins like Nivo Slider cannot. Whether you are implementing bars, blocks, warps or concentric image effects, CSS3 can be used for these kinds of animations.
Cool Text Effects
By playing around with colors, offset and blurring effects in CSS3, it is possible to create some stunning and clever text effects. Some cool text effects that can be produced using CSS3 include retro or vintage, inset, neon, fire and anaglyphic among others. The neon effect, for example, works by creating up to 8 shading levels where each of the 8 shadow values are increased progressively while getting them darker. The white fill text base and the darker effect blend to produce the neon aura.
Shapes in CSS
Almost any shape can be drawn using CSS and a single HTML element. After defining the shape in your CSS, you can then define the dimensions and other attributes such as the transparency, color and border options. The code below draws up a red triangle facing up:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}Folded Corner Effect
This technique does not need any extra markup and is implemented using these few lines below:
.note:before {
Content:””;
Position:absolute;
Top:0;
Right:0;
Border-width:0 16px 16px 0;
Border-style:solid;
Border-color:#658E15 #fff;
}As HTML5 and CSS3 continue to gain traction on the Web, we can expect to see developers coming up with more creative and clever ways of implementing these relatively new techniques in their work.
