CSS3 posts

Everyone loves motion. Adding the fourth dimension (time) to a site design is the main way screen-based design stands out from print design. CSS Transitions are a simple method for animating properties of an element enabling you to enrich certain events in your web design, without the need of Flash or JavaScript.

The W3C aptly describes transitions on their website as “CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration”.

One of the most exciting perks of using Adobe’s Edge Animate is the seamless integration with new, exciting CSS features that I didn’t even know existed until exploring Edge Animate further. This tutorial shows you how to make a 3D particle effect, using just a few ellipses, no additional plugins and a special “blur” filter made accessible in Edge Animate and CSS3.

This tutorial explains how to utilise a number of features in Edge Animate, from creating shapes and manipulating them using filters, to grouping them as Symbols to move multiple elements quickly and efficiently, rather than tweening individual particles.

Once...

With increasing diversity in monitor sizes, it’s not practical to design single blocks of text that take up the entire width of the screen. The traditional solution is to split text into columns manually, which is very time intensive; or to split text dynamically with JavaScript, which doesn’t function universally. Besides, this is a presentation issue, we should be able to style it with CSS without the use of grid systems or floats shouldn’t we?

CSS3 actually does provide a way for you to style your text into various columns, it even gives the ability to set a gutter — the space...

Given the rise in mobile web usage year on year, there is now an increased focus on making websites more responsive, adaptive and user-friendly for visitors on small screens. One key area that is often overlooked and that could easily lead to a heap of frustration is the contact form. Whether a user is logging into a website, part way through a sign-up process or in the final stages of completing an online order, good usability and a high-quality...

Bundled with HTML5 came a large number of API goodness and one of the best was the Fullscreen API that provides a native way for the browser to do what was only possible in flash for a long time: display the webpage in fullscreen mode for the user.

This comes in handy if you are displaying video, or images, or if you are developing a game. In fact, any...

Lately some websites, like This is the Brigade and All You, have started featuring a dynamic and animated menu that resizes on scroll down. Minimizing the main navigation to allow more space for the content. In this tutorial, I’ll explain how you can create this menu yourself with HTML5, CSS3 and just a bit of jQuery. 

This kind of menu is great if you want to give special focus on your content throughout the whole website, and it also enables you to create a bigger and more impactful navigation on a user’s first visit to a website. You can better show your website brand or logo, great for the above the fold view; and after engaging the user in a visit, a smaller and minimized version hides away subtly to let the user focus mainly on your content.

There are several ways of doing this. In this tutorial, I’ll explain how to create a full width fixed menu bar, that resizes in height...

Blogs and forums often have threaded comment replies built into their network. Popular social networks Reddit and Hacker News both support threaded comments, which allows users to directly reply inline with comments, voicing an opinion without getting lost in the shuffle.

We’re going to look at building a simple HTML5 and CSS3 threaded comments layout. We won’t be using any jQuery effects on the comment blocks (although it is possible to extend this functionality). We will look into structuring...

Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not.

As with most CSS3 techniques, the basic code is pretty simple, but the practical...

Along with the introduction of CSS3 comes many new features that are available for use in creating great effects; one of the most useful is the transition property.

The transition property is an important new development in CSS. It can be used to create a dynamic change effect on a div or class using a simple structure:

Tooltips are a great way to show your user more information by simply hovering over an image or text.  They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site, without intruding on the design.

Today...

Modal boxes are a frequently utilized tool in the web developer’s arsenal. Used for, amongst many things, login/register forms; advertisements; or just notifications to the user.

However despite the fact that modal windows frequently contain mission critical information, they are routinely created with JavaScript, which does not sit well with the best-practices of progressive...