Oct 17

Making labels with CSS3

Posted by Benedikte Vanderwee├źn on 17/10/2010 at 05:54 PM   (8) Comments -

I’m working on a redesign and am looking into the possibilities of CSS3. I made a Photoshop mockup for an “elsewhere on the internet” page in which i wanted to list social networks on a different way. So I made “flags” placed next to each other where each flag represents a “social network”.

Experimenting with CSS3

From Photoshop mockup to the browser

After I designed it in Photoshop - you can see the original idea on Dribbble, I asked myself how i could accomplish these labels using only code and css and no or less images. Read my insights and mistakes.

Before I start explaining, you can view the test page (by clicking on the image):

Tested browsers

Browsers that support CSS3 features

I tested on Opera(10.6), Chrome (6.0.4), Safari(5.0.2) and Mobile Safari (iPad and iPhone) and FireFox (3.6.6) on Mac OS X (10.6.4). I ignored Internet Explorer 8 because most of these CSS3 features are not supported.

Multiple backgrounds

Using textures

A great new CSS3 feature is Multiple Backgrounds". For a single HTML element, you can apply more than 1 background. That's what I did in the labels: i placed a tiled texture and above that I placed the triangle at the bottom so you have the impression of a "flag". Here is a screenshot of the triangle with transparent background place on top of the box:

The HTML for box 1:

	<section id="box-1" class="bordertop">
		<div class="circle1">
			<h1 class="one">Twitter</h1>
		</div>
		<p>Stay updated and follow us on Twitter.</p>
	</section>

The CSS for box 1:

	#box-1{
		float:left; 
		background: url(../images/bg-triangle.png) no-repeat bottom center,url(../images/bg-box1.png) repeat;
		height:500px;
		width:140px;
		margin-right: 25px;
		}

The first background image is the triangle image that is not repeated and placed at the bottom at the center of the box. I gave the image the same width as the box width, 140px. The pattern image is the second image, named "bg-box1" and is repeated on the x and y axis.

Circles

Applying circles with CSS3

I wanted to have circles in the middle of the labels and looked for a way to accomplish this without using images. It is possible to do this with only css: assign the same height and width value to your class. Set the border-radius to half of the height and width value.

The HTML for circle 1:

	<div class="circle1">
		<h1 class="one">Twitter</h1>
	</div>

The CSS for circle 1:

	.circle1{
		background: #425563;
		width: 6em;
		height: 6em;
		border-radius: 3em;
		-moz-border-radius: 3em;
		-webkit-border-radius: 3em;
		margin:30px auto;
		}

To accomplish a circle, make sure the radius of the border is 50% of the width and height of the HTML element, here 6em and 3em.

Animation

Hover animation on the buttons

The names of the social networks in the circles will be used as the buttons. So, when hovering a button, a color change happens: the circle becomes white and the name becomes the initial background color. This is done with the transition property, you can see how i did it with the css:

The CSS for the hover:

	h1.one:hover{
		color:#425563;
		}
		
	.circle1:hover{
		background-color: rgb(255, 255, 255); 
		color:#425563;
		-webkit-transition:all 700ms ease-in;
		-moz-transition:all 700ms ease-in;
		-o-transition:all 700ms ease-in;
		transition:all 700ms ease-in;
		}

the code for the hover effect is the same for the 2 remaining circles. The transition effect is used when hovering with the mouse over the circle (ease-in) and uses 700 milliseconds to fade to another background color and text color. Read more about transitions and animation in this Nettuts tutorial: CSS Fundamentals: CSS 3 Transitions and another great tutorial: Using CSS3 Transitions, Transforms and Animation

Styling text

Headings and body text

I used a H1 element for the titles in the circles, the body text was placed in a p-tag. For both elements, I looked for appropriate fonts. I used the Lobster font and Skolar from my Typekit account.

The CSS for the text:

	h1{
		font-family: "lobster-1","lobster-2","Helvetica Neue",Helvetica,sans-serif;
		color:#fff;
		font-size: 20pt;
		position: relative;
		padding: 1em 0;
		text-align: center;
		}

	p{
		font-family: "skolar-1","skolar-2";
		font-size: 10pt;
		letter-spacing: 0.1em;
		color:#fff;
		padding: 9px;
		}

Readers Comments

1. christinejoseph

on 26 October, 2010
at 03:40 PM

avatar Bene

Nice post! It gives very useful insight over label making in CSS3. Thanks for sharing..


2. Binod Chourasia

on 03 November, 2010
at 12:47 PM

avatar Bene

useful blog,its give me some cool tips for css3


3. Bruno Barros

on 28 November, 2010
at 12:31 AM

avatar Bene

Hey man, nice work. I realy like when a web designer or developer try to do the best he can. Better for everyone


4. Fremmers

on 28 November, 2010
at 12:22 PM

avatar Bene

Nice post, thanks for sharing!


5. Magento Themes

on 22 December, 2010
at 10:17 PM

avatar Bene

thankx for sharing good feed for me!


6. drupal development

on 04 January, 2011
at 01:17 PM

avatar Bene

I am looking for such type of informative news and i get through this blog so i am very much thankful to you for sharing such a great information.


7. Kelly Oakson

on 09 February, 2012
at 01:15 PM

avatar Bene

Very good experiment show here. Honestly I impressed to read the instructions and making labels with CSS3. I believe this input works well in this issue. Thanks!


8. Webdesigner

on 10 February, 2012
at 09:27 AM

avatar Bene

As a webdesigner I truly like this excellent input. It’s all very meaningful tutorial so long. I kinda inspired to see that brilliant screen shoots. Thanks!


Leave a comment

Commenting is not available in this weblog entry.

My products for sale!

Syndicate Weblog