Using CSS3: Examples by Aplos Systems, Southampton, Hampshire

Using CSS3: Examples #2

Published on 16th July, 2010 | 0 Comments

We've already covered some examples of using CSS3 in our first article where went over animations, gradients, border radius, text and box shadow. Though there are still more properties to cover, and in this article we're going to be taking a look at 4 more CSS3 properties including @font-face, transitions, transform and border-image.

@font-face

@font-face isn't exactly a new feature to CSS3, since it was first proposed for CSS2 and has been implemented in Internet Explorer since version 5. However, IE5s` implementation relied on Embedded Open Type (.eot) format, and no other browsers decided to use this format.

Now you can use any licensed TrueType (.ttf) or OpenType (.otf) font in your pages. To use these fonts, you must first declare them by using the @font-face rule. You can then call this font in the css by using font-family.

@font-face {
	font-family: BebasNeue;
	src: url('fonts/BebasNeue.otf');
}

Above is declaring the font you wish to use. Then you can call it using the following:

h1 { font-family: BebasNeue, Tahoma, "Times New Roman"; }

This font is Bebas Neue using @font-face.

You should remember to read the license and any copyright information before you use a font on your website.

Transitions

Transitions are only supported by webkit browsers, Mozilla Firefox 4 (in beta stage) and Opera, and are not supported by IE or Mozilla Firefox 3. Transitions allow you to change one property value to a different value with a simple animation (e.g. a links` colour is black, but on hover state a green colour will fade in.)

a {
	color: #474747;
	-webkit-transition: color 2000ms ease-in;
	-moz-transition: color 2s ease-in;
	-o-transition: color 2000ms ease-in;
}

Here we have links that will be a dark gray, though they will change the colour in 500ms or 0.5s on a mouse-over (hover) event.

a:hover { color: #b5bd00; }

When a link is hovered over, a green colour will fade in. If you are using Firefox 4, Opera, Safari or Google Chrome, you can see a demo of this below. Hover over the text below and it will change colour.

Hover over this link to see transition.

You are also able to do this with other properties, including width, margin, padding, borders and more.

Hover over this box, the border will grow and change colour.

div#border {
	border: 2px solid red;
	-webkit-transition: border 500ms linear;
	-moz-transition: border 500ms linear;
	-o-transition: border 500ms linear;
}
div#border:hover {
	border: 10px solid green;
}

Transform

Although there is already a CSS property called text-transform, this transform is nothing like it. With this property you are able to rotate and skew elements, similar to using the transform tools in graphics software such as Photoshop. Transform is supported by Mozilla Firefox, Webkit and Opera.

-moz-transform: translate(100px) rotate(45deg);
-wekbit-transform: translate(100px) rotate(45deg);
-o-transform: translate(100px) rotate(45deg);

We always strive to surpass client's expectations, help them communicate their business ideas effectively to their target audience via an effective web-branding and marketing and provide them creative and marketing consultations from head to toe to ensure that the end-result does justice for what they deserve!

In order to skew elements you need to use matrix values.

-moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);
-webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
-o-transform: matrix(1, 0, 0.6, 1,  250, 0);

We create websites with a design that's both functional and appealing. We create systems that work magic and easy to manage. We create marketing that confirms a boost of ROI (Return on Investment). And finally, we create business relationships that last with our clients!

Here is an example of a real life situation where you can use transform. The example below uses a combination of CSS3 properties to create a heading for a blog post, with a transform on the 2010. Due to this, only webkit browsers and firefox 4 beta will show the below example.

2010

23 Jul

The heading

div.heading {
	width: 400px;
	border-radius: 8px;
	background: -moz-linear-gradient(top, #1c91c8, #176b92 );
	background: -webkit-gradient(linear, center top, center bottom, from(#1c91c8), to(#176b92));
	color: #fff;
	font-family: Tahoma;
	overflow: hidden;
}
div.date {
	width: 60px;
	background: -moz-linear-gradient(top, #1776a2, #135777 );
	background: -webkit-gradient(linear, center top, center bottom, from(#1776a2), to(#135777));
	display: inline;
	float: left;
	padding: 10px;
	font-size: 12px;
}
div.date div {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	font-size: 10px;
	display: inline-block;
}
div.title {
	display: inline;
	float: left;
	padding: 7px 0 0 10px;
}
div.comments {
	display: inline;
	float: right;
	width: 30px;
	background: -moz-linear-gradient(top, #1776a2, #135777 );
	background: -webkit-gradient(linear, center top, center bottom, from(#1776a2), to(#135777));
	padding: 7px 0px 7px 10px;
	border-radius: 8px;
}

Border Image

Along with borders and border radius, CSS3 also has border-images, which, as the property states, allows you to use images as a border. Firefox, Safari, Chrome and Opera all support border images, though for Firefox and Webkit, you need to use the browser specific properties (-moz, -webkit.)

The first thing to do is to create your basic border, this will be filled by your border images or as a fallback for those that do not support border-image. To apply a border-image, we use the CSS:

border-image: url(file.png) A B type;

A is the slice height, B is the slice width, and type is whether the border should be repeated, rounded or stretched.

We can stretch or repeat the side borders to the length and height of our element, this works best when using solid or gradient images.

border-width: 20px;
border-image: url(border.png) 20 20 stretch;
-moz-border-image: url(border.png) 20 20 stretch;
-webkit-border-image: url(border.png) 20 20 stretch;

Border #1

Alternatively, you can use the border-image round which will repeat and scale to the height, width and border-width of its element.

border-width: 15px;
border-image: url(border.png) 30 30 round;
-moz-border-image: url(border.png) 30 30 round;
-webkit-border-image: url(border.png) 30 30 round;

Border #2

Aplos Systems

Using CSS3: Examples #2

@font-face

Transitions

Transform

Border Image

Further Reading

Add a Comment