Introduction to CSS3 – Part 4: User Interface
This tutorial will be taking a look at some of the new ways you can manipulate user interface features in CSS3. But what do we mean by “user interface”?
CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Icons, Vectors & More
Sans Serif, Script & More
Shopify, Tumblr & More
Landing Pages & Email
PowerPoint & Keynote
Logos, Print & Mockups
Today only (really, this only happens once a year!), Envato Elements has a flash sale. Save up to 40% on your subscription, and keep that low price for the lifetime of your account!
This is a once-a-year chance to get every creative and design asset you could ever need for the price of a pizza each month.
The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:
The latest version of Safari has a feature which allows resizable text areas. This is a great addition and one I find myself using daily. CSS3 allows you to easily apply this to any element, eventually to become cross-browser compatible. The code is the
border: 1px solid;
The ‘box model’ CSS3 module is one of the more extensive areas, and full information can be found at the official specification. The box sizing aspect allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
At present, additional prefixes are required to support this in all browsers – you can see the full list on the example page’s code. Here’s a basic possibility:
border: 10px solid #ddccb5;
border: 5px solid #897048;
Setting an element outline is already available in CSS2, but in CSS3 includes the facility to offset the outline away from the element – by a value you define. It differs from a border in two ways:
- Outlines do not take up space
- Outlines may be non-rectangular
They can be created as follows:
border: 2px solid black;
outline: 2px solid #897048;
These features aren’t revolutionary, and are not likely to cause a stir in the design community. It can’t be denied that they’re useful – in particular giving the reader the ability to resize elements.
The next article in this series will be looking more in-depth at one much more revolutionary feature of CSS3 – multi column text. Remember, to see live examples of these features, take a look at our CSS3 example page.