Home > Tags > CSS3
Page 1

Introducing viewport units

With the introduction of CSS3 we’ve seen huge advancements in web technology, and the last few years have felt like golden ones for anyone working on the Web. One great addition that hasn’t been talked up enough is viewport units. They’re anew kind of CSS3 unit that allow you to size elements relative to the viewport. Browser support The browser support for viewport units is surprisingly good. There’s full support in all the latest desktop browsers. IE has had full support since IE9 (although...
Read more

Introducing CSS variables

If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round. This is exactly what CSS didn’t have. Pre-processors like Sass and Less used them, but vanilla CSS never had variables. Until now. They’ve been on the horizon for a while, but only recently have variables started to be implemented in CSS, let’s take a look at how they work. Browser support Currently CSS variables...
Read more

How to create a flip effect with CSS3 transforms

Over the last couple of years CSS has evolved more than we could ever imagined. Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones. With transforms we can move elements through a 3D world, and today I’ll demonstrate this by creating a flip effect. Browser support The browser support for 3D transforms is a little lacking, but on the whole not too bad. It’s supported by all webkit browsers using the webkit prefix,...
Read more

Feature detection with CSS @supports

Since its arrival, browser support for CSS3 has been variable, making feature detection not just a good idea but best practice. Although this detection is usually done with JavaScript, ideally it would be done within CSS which is where @supports comes in. CSS @supports allows us to have simpler and cleaner feature detection that doesn't rely on other technologies, and works even if JavaScript is disabled. Browser support Unfortunately as with so many cool technologies, there is the issue of browser...
Read more

15 Online resources for learning web design

There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don't know where to start? Don't worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML,...
Read more

How to create a beautiful login form

In this tutorial we will be creating a login form using only CSS3 and HTML5, we will be recreating Orman Clark’s Elegant Login Form. We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements. Next week we will show you how to add a sign up page to your login form so be sure to check back. Step 1: The HTML Markup The first thing...
Read more

25 must read HTML, CSS and jQuery books

Everyone knows that in order to create the best websites you need to be up-to-date with the latest trends and developments. We asked experts and long timer designers and developers to share with us their favorite books, and the result is a selection of the very best books that everyone should read. Our list includes 25 books that all developers must read if they want to create great web sites. We cover everything from HTML to CSS, JavaScript and jQuery books. 1. Introducing HTML5      ...
Read more

CSS3 Stitched Effect

When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s. Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra "pop" needed to make things stand out and look great without making the site look busy and thrown together. The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the...
Read more