The buzzword “CSS4” came out of nowhere, just as we were getting used to the fact that CSS3 is here and will stick around for some time. Browser vendors are working hard to implement the latest features, and front-end developers are creating more and more tools to be able to work with the style sheets more effectively. But now, on hearing about CSS4, you might ask, “Hey, what about CSS3? Is it over already?”
We’ve been working hard to spread the goodness of CSS3, and now it’s obsolete? In fact, nothing’s wrong. It’s just natural evolution — a process that will help CSS as a whole — because “Level 3” and “Level 4” just follow the naming convention of the various documents of the specification.
WHY LEVEL 4? WHAT ABOUT CSS3?
“Level 4” is just the number of the W3C document. Have you heard about the new “Filter Effects, Level 1” specification? Where should it go? To CSS3? CSS4? Hey, maybe CSS1 because it’s Level 1? Doesn’t matter, because CSS is just CSS. Selectors are the first document to reach the fourth level of the specification, and it’s still a draft, a work in progress. Each document is on its own when it comes to the specification number; the documents are developed independently of each other.
This is a big advantage, because finished parts of the document can be closed and set as recommendations — like Selectors Level 3. Finishing a document quickly and moving problematic parts to the next level helps to push the Web forward because it implements the specification one chunk at a time.
Website navigation is an important aspect to any functioning layout. Users will often be looking for methods to traverse over your pages, and sometimes this requires a bit of creativity. I love the idea of vertical navigations especially with sub-menu links.
In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click. Using this method we can also build sub-menu links, splitting up headers by ID or class names. Follow along with the ideas below and feel free to download a copy of my source code.
Over the past few days I’ve been messing around with transitions and transforms and managed to come up with this little menu. It incorporates a bunch of different CSS techniques, but is very experimental! The original idea was to have a button you pressed, which then launched a secondary ring to pop out which contained the menu items. Read on to find out how I made it!
It uses a lot of CSS3 but surprisingly works quite well in many browsers. The main problem is with opera, which runs into a few problems when trying to run the code (due to lack of support for transforms). Ignoring the lack of transitions in Internet Explorer 9, this will work in the latest version of all browsers sans Opera.
To date, a total of 469,072 pages have been validated through W3CLove. Here is the list of the most common errors and warnings they’ve collected.
See the errors
The year was 1981, and Macintosh was still in early development. Resident graphics master Bill Atkinson had just managed to get its OS to draw circles and ellipses, and he was proud of it. However, Steve Jobs, The Father of the Macintosh, had another more pressing request: rounded rectangles.
To Jobs, rounded rectangles were friendly, and he insisted that rounded corners were already everywhere. Jobs took Atkinson for walk to show that his request was not mere aesthetic whim. A few rounded objects and a “No Parking” sign later, Atkinson was convinced.
Atkinson managed to develop the necessary code to render rounded rectangles at lightning-fast speeds. Buttons and windows became rounded. These helped define the “safe” interface of the Macintosh. To customers, Mac had a softer, more welcoming appeal, which sat in contrast to the intimidating aura of both IBM and Microsoft’s products.
Apple’s legacy with rounded corners extends beyond software. When introduced, the iPhone was more “pocketable” than other phones of its time. Similarly, the iMac wasn’t as intimidating as the standard “Personal Computer” of the day: the Mac seemed like a laid-back friend; the PC, a man in a dark suit.
Jobs got it. Apple gets it. We are hard-wired to avoid and dislike sharp objects.
Read More from Source: http://designmodo.com/rounded-corners/#ixzz1x1aJinvF
Fantastic way to generate drop shadows, borders, gradients and more CSS 3!
This online application quickly generates website background gradients in different colors. It generates CSS code ,on the fly, which you can copy and paste in your websites. It supports the latest CSS3 compliant versions of all major browsers (i.e firefox,chrome,safari,opera and IE).
Its a quick tool for creative web developers who have the imagination to play with colors and shades. Its GUI has been kept very simple and easy to use. Users just need a few ‘clicks and drags’ to get their desired gradient.