The Internet has provided us such a huge platform to find out what’s happening all around, allowing designers from all over the world to explore new possibilities. Web design trends are continuously changing and improving. In this year 2011, new web technology is uprising but nobody knows the future of web design, but the only thing which I consider we all have to be familiar of these happenings to meet the new standards of web design and concept behind each trend. Therefore we’ve decided to share latest trends and news updates with you at weekly bases. In this series every web developer and designer will get useful tips, techniques and tutorials on the subjects CSS3 and HTML5, JaveScripts, JQuery, AJAX and much more. So don’t forget to subscribe for news updates.
I recently read an excellent article by Peter Gasston about creating an image shimmer/swipe effect on a website he was working on. I really liked the effect and after tinkering with how it worked I found that it used an image sprite to achieve the effect..
Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear..
IE10 in the Windows Developer Preview introduces support for hardware-accelerated CSS3 text-shadow. Text-shadow is one of the top requested features from Web developers. It enables text effects that were previously difficult or impossible to accomplish in a standards-friendly way without resorting to inline images of text.
Advances in HTML5 and CSS (for example transitions, animations, transforms, text shadows, box-shadows, gradients, SVG) have improved the graphical and interactive richness of HTML. SVG filter effects are now moving to Filter Effects 1.0 to become available in CSS and HTML, in addition to SVG, and will bring effects such as grayscale, sepia tone, or hue-rotate to all web content..
HTML5 has been helping webmasters to clean up their code by utilising newly introduced features of the same. It won’t be possible for me to touch base with every HTML5 feature, but I will be listing down some of those during the course of this tutorial.
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly..
HTML5 is the next version of HTML. This will introduce some brand new features which will make building HTML even easier. This is by introducing features which to make your website layout clearer to both coders and search engines. .
Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.
View the source code of a hand full of websites featured in CSS galleries today and you’ll often see the same errors appear time and time again. These mistakes are usually habits we picked up during our early days of coding that have stuck around due to lack of clarification.
For the last few weeks I’ve been looking at different css selector patterns. One thing I haven’t mention is the efficiency of the selectors, something Chad commented about on the very first post in the series.
The last couple of weeks we’ve been looking at different types of css selectors. First we looked at the simple and attribute selectors and then we looked at combinators and some pseudo class selectors. This week we’ll finish up with structural pseudo-classes and pseudo elements. I think you’ll find both have some practical applications for styling web pages.
You’ve probably used CSS’s border property often, and in almost all cases you’ve probably set the border-style value to “solid”, which looks exactly the same in every browser..
In this tutorial you will learn how you can create your own simple To-Do list using CSS and JQuery…