Sneak Peek Into The Future: Selectors, Level 4

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.

How To Code a Vertical Accordion Nav Menu with jQuery

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.

CSS3 Image Gallery with Dynamic Caption Text

I have run into lots of tutorials on the web focused around creating stunning image galleries. These often include photo boxes or alternate JavaScript-enhanced functionality. Nominally in the modern era of web design there isn’t any problem with dynamic scripting.

For this tutorial I want to show how we can build a standards-compliant HTML5/CSS3 image gallery with fading captions. We will be using CSS3 transitions to create the animated effects. Also I have been working with a number of CSS3-specific properties on this tutorial alone. It leaves room for interpretation if you wanted to implement a JavaScript frontend animation using CSS3 as a fallback.

The Creation of a CSS3 Clickable, Rotating Menu

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.

Top 100 Validation Errors

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

CSS Rounded Corners

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

Icon Webfonts

The increasing popularity of CSS @font-face embedding for custom fonts on websites opens up tons of possibilities for more creative typographic design on the web, however another slightly less explored @font-face technique at the moment is scalable vector icons (or dingbats) on the web, other than the possible accessibility issues, the advantages of replacing icon images with icon fonts are impressive, most notably the ability to style icons dynamically with CSS and their infinite scalability.

We have compiled a list of the 12 best free and premium icon webfonts.

CSS 3 Slider

The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article.

See example

CSS 3 Generator

Fantastic way to generate drop shadows, borders, gradients and more CSS 3!

Visit the website

CSS Gradients

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.