Generated content was first introduced in the CSS2 specification. For several years, the feature was used by relatively few Web authors due to inconsistent browser support. With the release of Internet Explorer 8 in 2009, generated content was rediscovered, and many interesting implementations were adopted for the first time. In this article, Gabriele Romanato will discuss some possible uses of generated content.

Twitter’s Bootstrap has taken off like a rocket since its release a year ago. The popular CSS framework supplies a responsive grid system, pre-styled components and JavaScript plugins to a parade of websites. One of Bootstrap’s appeals is that it just works. It’s a significant time-saver when starting a website, so much so that major organizations such as NBC, NASA and the White House are adopting it. And it empowers even the non-designers to turn out something decent.

The previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today Mary Lou wants to explore the practical side of it a little bit more. She is going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay. She wants to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element.

Hugo Giraudel is pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. He will cover pretty much everything you have to know about it. The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as crop. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property.

It used to be that if you wanted to create a drop down menu then you needed to use a lot of background images as well as complicated Javascript. Today however all of that is a thing from the past. In this tutorial the DeveloperDrive Team will create a simple yet very effective drop down menu using only CSS. They will build their drop down menu in two steps, first they will construct a simple menu using HTML and then add the styling with CSS. They will create this drop down menu by using the <nav> element, as well as the display:block, and use the position element in order to position the menu.

In this tutorial, you will learn how to create a sticky note for your website. The effect is built of five simple steps, the first step simply adds the text you want to use, as well as creating the square that in essence becomes the sticky note. Step two focuses on the getting the font right as well as adding a drop shadow effect. Step three focuses on tilting the notes so they don’t look as boring as if they were all lined up. The fourth step allows the sticky notes to zoom when you move your mouse over them. The fifth and final step adds a smooth effect and allows you to change the colors of the sticky notes.

When Karl Schellenberg redeveloped his new website, he decided to use CSS3 animations to provide an impressive and interactive site experience. However, he struggled to time the animations to trigger at the right time.  Because animated elements below the fold (depending on the screen resolution) animate on page load, some animations had already played before the user had chance to scroll to them.

Mary Lou wants to share another 3D experiment with you: a gallery room in 3D. The idea is to create a realistic environment for an image exposition using CSS 3D transforms. Images are hanged along a wall which will have an end. Once the end of the wall is reached, a rotation will happen and you’ll be turned to the next wall with more images. To give a real sensation of being in a room, she only have four walls and corners. Each image will have a little description tag with a small-sized font and when clicking on it, a larger version will appear from below.

One thing Hugo Giraudel has always been missing is the possibility to handle click events with CSS. Actually, some people think you shouldn’t have this option since interactions are more like a JavaScript kind of stuff. He understands the idea, but it always bothered him to have to use JavaScript for a very simple click event. Anyway, as of today, CSS doesn’t provide any official way to handle a click event in CSS. But there are some very interesting tricks that he can use to detect a click using CSS only, without a single line of JavaScript, and this is what he is going to talk about today.

The buzzword CSS4 came out of nowhere, just as Andrzej Mazur was 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?