css

Playing with CSS 3 - Animations, Rotate and Scale

abduzeedo — Mon, 21 Jun 2010 11:43:08 +0000

I have been working on the new Abduzeedo design and have had the chance to play more with CSS 3, even though it's not fully supported on all browsers we can start using some really cool features such as round corners, text-shadow, box-shadow, transitions and transformations. The major downside still is Internet Explorer, however it seems that the IE 9 will have a much better CSS 3 support and support those features.

I believe that HTML 5 and CSS 3 will replace Flash eventually, and we can notice that the web design community has been talking a lot about it, Smashingmagazine, one of the largest web design sites out there has been publishing great articles and even launched a CSS 3 contest to incetinve designer to play more with CSS 3.

So in this post I will show you some experiments I've been doing with CSS 3, especially with animations using transitions and transformations like scale and rotate.

*The demo and code will only work with Webkit browsers like Safari and Chrome.

CSS Buttons and Thumbs

In this example I will show you how to create a really cool navigation bar using CSS only. I used gradients, transitions and shadows. I also used a Flickr Javascript badge to load some images from Flickr and then use CSS transitions to scale up them when the user hovers an image.

HTML Code

CSS for the Navigation Bar

For the navigation bar I used CSS to create the gradient, the syntax for the gradient in CSS is -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*). For more information about CSS Gradients I recommend that you check out the http://webkit.org website and this article in special http://webkit.org/blog/175/introducing-css-gradients/.

One site that is very useful to generate the CSS 3 codes is http://css3generator.com/ especially because of the extra code we have to add to support Mozilla and Opera.

#menu{
	position: relative;
	display: block;
	margin: 20px auto;
	width: 600px;
	height: 60px;
	padding: 0 20px;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(82,82,82)), color-stop(1, rgb(125,124,125)));
	-webkit-box-shadow:#000 0 1px 2px;
	-webkit-border-radius:2px;
}

CSS for the Navigation Buttons

For the buttons once again I used CSS gradients once again and also Text-shadow, and CSS transition so when the user hovers the button the background color will change with an animation.

ul li{
	list-style-type: none;
	margin: 15px 0;
	float: left;
	height: 30px;
	line-height: 30px;
}
ul li a{
	background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(40,40,40)), color-stop(0.5, rgb(80,80,80)) );
	display: block;
	padding: 0;
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	font-weight: bolder;
	text-shadow: #000 0 -1px 1px;
	width: 90px;
	text-align: center;
	border-bottom: 1px solid #666;
	border-top: 1px solid #222;
	border-left: 1px solid #666;
	border-right: 1px solid #222;
	-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
}
ul li:first-child a{
	-webkit-border-top-left-radius:20px;
	-webkit-border-bottom-left-radius:20px;
}
ul li:last-child a{
	-webkit-border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
}

ul li a:hover{
	text-shadow: #f5fc39 0 0 10px;
	background: #222;
	
}

Animated Flickr Images

Here I used the same hover effect I applied on the images of my new personal site http://fabiosasso.com. So when the user hovers the thumbs the image scales up using the -webkit-transition and -webkit-transform:scale(). Below you can see the code, the transition is applied to the image code, while the transform goes on the hover state only.

#flickr_badge_uber_wrapper{
	width: 550px;
	position: relative;
	display: block;
	margin: 0 auto;
	margin-top: 100px;
}
.flickr_badge_image{
	float: left;
}
.flickr_badge_image img{
	margin: 10px;
	border: 3px solid #fff;
	display: block;
	position: relative;
	-webkit-border-radius:5px;
	-webkit-box-shadow: #000 0 0 2px;
	-webkit-transition: -webkit-transform .2s ease-in-out, -webkit-box-shadow .2s ease-in;

}
.flickr_badge_image img:hover{
	-webkit-transform:scale(1.2);
	z-index: 10;
	-webkit-box-shadow: #666 0 5px 10px;
}

Click on the image to see the demo.

90s design with CSS

The possibility of rotating and scaling HTML elements allows us to create different compositions that before would be possible only using images or Flash.

So, I had this idea of playing only with CSS and basic typography to create a design inspired by David Carson. Basically I just added some rectangles and messed the typography reducing line-heights and rotated some texts, then with transitions I animated the whole composition to rotate and scale when the user clicks on the "Who am I" text.

Below you can see the final result of this experiment. It is still a working process but you can have an idea of what you can accomplish now with CSS3.

Click on the image to see the Demo

CSS Scale and Rotate - Click on the image to see the Demo

Download

Click here to download the CSS and Html file used for this tutorial

About the author

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at @abduzeedo

Sponsored Links:

Playing with CSS3

abduzeedo — Tue, 08 Dec 2009 11:14:01 +0000

When I was working on the new version of Abduzeedo, the current one, I decided to learn and use CSS 3 to enhance the visual of some elements. Instad of using images to create shadows and round corners I used CSS 3. Of course I knew that it would not be compatible to all browsers, more precisely, the Internet Explorer.

From the statistics of the site, the majority uses Firefox (51.05%), followed by Safari (25.38) and then Internet Explorer with only 11.73, I thought it would work alright, and for those readers that use other browsers they would be able to access the site but would not be able to see these little details.

So for this tutorial I will show you how I created some of the effects you see on the Abduzeedo UI. We will play with Box-Shadow, Round-Corners, Tex-Shadow and CSS gradients. The idea is to practice, in my opinion the best way to learn.

Final Result

This is the final result we will have by the end of this quick tutorial. The idea is to play a little bit with CSS3 even though this might not work perfectly on IE an Opera.

Click on the Image to see the DEMO - It works only in Safari, Firefox and Chrome

Step 1

The first thing to do is to create the HTML file with our data. Also let's create the link to our CSS file (<link rel="stylesheet" href="tut.css" type="text/css" media="all">). There's great places to learn more about HTML and CSS, I recommend CSS Tricks, Nettuts, Smashingmagazine, W3C, 24ways, Woork and others.

Below you can se the page without any style.

Step 2

Here's the HTML file, as you can see we're using HTML 5, once again to practice. That's the best thing of personal projects, we can practice and learn.

Basically we have a Section called "Box" where the content will be inside. Then we have the navigation (Nav), another section with the content (content) and then inside the content section we have the messages. We use the tag article to them.

Step 4

Let's start it by changing the "body" style. So let's define the font, the font weight, margins, paddings and the background color. It's really important that you have some CSS knowledge already, especially about the CSS Box Model to understand how Padding, Margins, Border, and sizes work. I highly recommend that you read this great article by Chris Coyer: The CSS Box Model

body{
	font: 14px/140% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: lighter;
	margin: 0;
	padding: 0;
	background: #ddd;
}

Now for the box we will play with a new CSS 3 property, Box Shadow. Basically we can add shadows to elements without using any image. It's pretty simple to use, you set the Horizonal Lenght, Vertical Lenght, Blur and Color.

Example: box-shadow: horizontal lenght vertical legnth blur color = box-shadow: 0px 0px 10px #666.

For more information about Box-Shadow check out this article: Box-shadow: shadow effect on elements in css3.

#box{
    display: block;
    position: relative;
    width: 500px;
    margin: 20px auto;
    border: 1px solid #666;
    -webkit-box-shadow: 0 0px 10px #666;
    -moz-box-shadow:0 0px 10px #666;
    box-shadow: 0 0px 10px #666;
}

Step 5

For the navigation I created a PNG image with alpha transparency to use to create bevel effect to the navigation bar.

nav{
    position: relative;
    display: block;
    clear: both;
    background: #444 url(imgs/bg-gradient.png) repeat-x left -25px;
    height: 25px;
    padding: 10px 20px 10px 20px;
}

I highly recommend that you use a RESET.CSS for your projects, but here I'm not using, so I will just reset the UL and LI behaviors in order to create my navigation buttons. To understand why we reset our CSS, read this article by Eric Meyer: CSS Tools: Reset CSS.

nav ul, nav ul li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Step 6

For the buttons we will use round corners, box-shadow and text shadow to create a very nice effect. Take a look at the code below. Text-shadow is pretty much the same as box-shadow but for text, it's the same syntax. Now the round corners is different and it's one of the most wanted effects, we won't need to add a lot of markup and images to create this effect anymore.

I recommend 2 articles about Round Corners: Border-radius: create rounded corners with CSS! and Have a Field Day with HTML5 Forms. The last one will cover another HTML 5 and CSS 3 new features.

nav ul li{
    float: left;
    background: #555 url(imgs/bg-gradient.png) repeat-x left -35px;
    padding: 0 10px;
    margin: 0 10px 0 0 ;
    color: #fff;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    cursor: pointer;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 -1px 1px #333;
    -moz-box-shadow:0 -1px 1px #333;
    box-shadow:0 1px -1px #333;
    text-shadow: #000000 0 -1px 1px;
}

Step 7

When the user hovers the button we will change the color of the background, font and effects.

nav ul li:hover{
    background-color: #ccc;
    box-shadow: 0 -1px 1px #fff;
    -webkit-box-shadow: 0 -1px 1px #fff;
    -moz-box-shadow: 0 -1px 1px #fff;
    color: #333;
    text-shadow: #fff 0 1px 1px;
}

Step 8

For the search field it's going to be pretty much the same, however we will use another image for the background, the magnifying glass icon, and position it on the right .

input{
    background: #ddd url(imgs/mglass.png) no-repeat 135px 2px ;
    outline: none !important;
    position: absolute;
    right: 20px;
    display: block;
    padding: 5px 10px;
    top: 9px;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    box-shadow: 0 -1px 1px #333;
    -moz-box-shadow: 0 -1px 1px #333;
    -webkit-box-shadow: 0 -1px 1px #333;
}

For the focus state let's just change the color of the backgroun.

input:focus{
    background: #fff;
}

Step 9

For the content let's play with gradients via CSS3. This will work only on Webkit based browsers. (Safari, Chrome, Webkit). Basically we set 2 or more colors that will create the gradient. I highly recommend that you take a look at this article: Introducing to CSS Gradients. Because only Webkit browsers will show the gradient I added 2 backrounds, the first one is set to grey (#ddd) and it will work on other browsers that will ignore the gradient.

section#content{
    display: block;
    position: relative;    
    background: #ddd;
    background: #ddd -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(100, 100, 100, .5)), to(rgba(90, 90, 90, .1)));
    padding: 20px 20px 10px 20px;
}

.clear{
    clear: both;
}

Step 10

For the thumbnails lets once again use Round Corners and Box Shadow. Besides that, use FLOAT:LEFT to align them to the left and a 3px solid white border.

#thumb img{
    float: left;
    border: 3px solid #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0px 3px #333;
    -moz-box-shadow:0 0px 3px #333;
    box-shadow:0 0px 3px #333;
}

Step 11

The idea for the messages is to create a dialog box. Apply the Round-corners to all sides but the top left. Also I added the Box Shadow, and the CSS Gradient.

div.msg{
    float: right;
    width: 320px;
    padding: 20px;
    background: #f0f0f0 -webkit-gradient(linear, 0% 0%, 0 90%, from(rgba(100, 100, 100, 0)), to(rgba(90, 90, 90, .2)));
    
    -webkit-box-shadow: 0 0px 5px #333;
    -moz-box-shadow:0 0px 5px #333;
    box-shadow:0 0px 5px #333;
    
    margin-top: 40px;
    
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-topleft:0;
    -moz-border-radius-topright:10px;
    
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    
}

As I didn't reset my CSS, the H3 was using the browser default style for it. So I had to change the margin to 0 and for the padding I changed the top, right and left to 0 just adding 10 pixels for the padding bottom.

h3{
	     padding: 0 0 10px;
	     margin: 0;
}

Step 12

One of the coolest things about CSS 3 is that we can play with shadows and also create glows by just changing the color of the box-shadow.

div.msg:hover, #thumb img:hover{
    -webkit-box-shadow: 0 0px 5px #0cf;
    -moz-box-shadow:0 0px 5px #0cf;
    box-shadow:0 0px 5px #0cf;
}

Conclusion

Once again the idea of this quick tutorial is to show you the possibilities, there's much more to learn and of course everything has to be tested to make sure that it will work fine on different browsers. It is all about practicing.

Click on the Image to see the DEMO - It works only in Safari, Firefox and Chrome

Download the Files used for this Tutorial

Click here to download the files used for this tutorial

About the author

Sponsored Links:

350+ Great CSS Tools and Techniques

PauloGabriel — Wed, 08 Apr 2009 13:33:31 +0000

One of the most enjoyable moments for a web designer is coding CSS. It's such a nice language that it actually gets fun to work with it... style your pages and actually watching your designs gain life and forms. But sometimes, a little help is welcome.

Even being a fun thing to do, sometimes you run into some problems, trying to find the right way to get a certain look. But for our sake, there are many many great sites out there that help us during these times, such as the great CSS Play, Smashing Magazine, and others.

Taking a quick ride thru my Delicious, I took a look at some of my CSS tag favorites, and I'd like to share them with you. These are really resourceful articles, worth the visit. From tools to simple techniques that will help you at some point. Hope you all enjoy these!! Cheers. ;)

50 Extremely Useful And Powerful CSS Tools

12 CSS Tools and Tutorials for Beautiful Web Typography

101 CSS Techniques Of All Time- Part 1

53 CSS-Techniques You Couldn’t Live Without

Powerful CSS-Techniques For Effective Coding

25 Code Snippets for Web Designers (Part1)

25 Code Snippets for Web Designers (Part2)

25 Code Snippets for Web Designers (Part3)

CSS Dock Menu

Most used CSS tricks

About the author

Hello, everyone! I'm Paulo Gabriel, designer from Porto Alegre, Brazil, born in 1984. I have worked as a webdesigner since 2006, but websites and blogs have been a hobby for me since 1999. Here in Abduzeedo, I try to bring only the hot stuff for you... and hope that all of you enjoy my posts! For more cool stuff, you may also follow me on Twitter.

Sponsored Links:

CSS Quick Tricks #1 - Where to put your CSS

Daan — Sun, 22 Feb 2009 22:24:29 +0000

Apart from the awesome design you get fed with here, it is time to start a new series! CSS Quick Tricks!
To be honest, I didn't really know where to start, so I thought I'd start at something simple, and then, as we move on, we get in to more advanced topics on CSS.
For this quick trick, I'm going to teach you where you can place your CSS, the most efficient way.

Where to place your CSS

In CSS, there are different ways to put it in function; Inline, Internal (or "Embedded") and External.
You've probably used them all, at least one time.

What's the difference?

How can this question better be answered than with some pieces of code?

With an external stylesheet, you create a link to a stylesheet. This is by far the most efficient way when you have multiple pages, running on 1 CSS file.
To do this, in the head section of your html document, place this line of code:

<link rel="stylesheet" type="text/css" link="directory/file.css" />

As you can see, we've literally created a link to a stylesheet, that is not located in the HTML, or in other words; Is external.

With an internal stylesheet, you place the whole stylesheet inside the HTML. This is again done inside the head tag, but in a different way.
The reason you might want to put styles inside your HTML, may be, because one page in particular may need some seperate styling, which can cause problems on other pages, or if you just don't want to increase the file size of your CSS document.
The right way to place a style(sheet) internally is:

<style rel="stylesheet">
* { margin: 0px; padding: 0px; }
</style>

Left over is the inline way, the reason you use this may be, that just a certain element needs f.e. a red color. However, take my advice; When styling a page, do NOT use this to style your whole page, but just for the little pieces that you couldn't be bothered about in your stylesheet.
The way you use this way of CSS styling (some may not even call it CSS) is as follows:

<div style="background-color: #fff;">

NOTE: This is just an example. Every CSS selector in here, and you can use it with every HTML element.

But what way, is the best way?

Well, there's no real answer to this question, because it depends on the way you are going to use it. But when you want to use CSS most efficiently, I suggest using the followng guidelines:

If you are going to style multiple pages with one stylesheet, use the external way, and you may even want to use this way on a single page.
This may prevent having issues, when the website needs a style update, or some little tweaking.

If you just need to style a few elements that were left out on the original stylesheet, for whatever reason, use the embedded way. Like this, you won't increase the total file size of other pages not needing the additional styling, and thus decrease loading time for other pages.

If you just need to style a single paragraph tag (or something similar), that neither external nor embedded stylesheets are worth mentioning, use the inline way.
And again, take my advice, do NOT use this to style whole pages, it will give a lot of unnecessary code, and when updating/tweaking a page, you will be busy for ages.

Conclusion

I hope you liked this first one in the new series, so I can do many more!
Also, suggestions or questions are always welcome, so I have some inspiration to write about.
Thanks!

About the author

Hey There! I´m Daan Weijers, I come from Eindhoven, The Netherlands.
I enjoy design and drawing very much, also, I play guitar, play soccer and hang out with friends.
Please don't be mad if you miss my posts, but it's mainly due to a personal project, called iPaperr

Sponsored Links:

Mini-layout inspired on 9rules design - CSS Part

fabiano — Tue, 29 Jul 2008 18:31:08 +0000

Previously we've shown how to make a small layout on fireworks based on the 9rules desing. Now we're going to show you how to set this to code up. We're gonna explain everything, from slicing in Fireworks to setting the css in the code. Enjoy and let's get started!

STEP 1 - SECTIONS

First of all, we need to open the file at the the Tutorial Part 1. After that, we're going to set the regions of this page, this will help us to make the code.

STEP 2 - THE CODE

Now we can start to code. We will make the basic structure and then see how the page will look only with some plain text. To do the code, we use Smultron, a free and powerfull text editor, but you can use whatever you want. Let's code it region by region:

HEADER:

	
		Abduzeedo by design

MAIN:

	
		
			The idea behind this blog is mainly to be a channel to design.
		
		
			
				New Posts
				
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
				
				
					Currently on Page 1 of 24
					PreviousNext
				
			
		
		
			2008 abduzeedo.com

CONTENT:

	
			
				New Posts
				
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
				
				
					Currently on Page 1 of 24
					PreviousNext

FULL CODE

<body>
 
	
		Abduzeedo by design
	
	
		
			The idea behind this blog is mainly to be a channel to design.
		
		
			
				New Posts
				
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
					
						Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
						
				
				
					Currently on Page 1 of 24
					PreviousNext
				
			
		
		
			2008 abduzeedo.com
		
	

</body>

You may save this file and call it index.html. Here you can see how your browser will render it with no styles right now.

STEP 3 - SLICING THE PNG

At this step, we're gonna hide some layers and use the Slice Tool to export the images that we'll use in the CSS. Select the tool and make the slices as shown.

STEP 4 - EXPORTING IMAGES

After making the slices we'll export the images. Click with the right button over each slice and select Export Select Slice, save the images inside a folder in the root, and call this folder "images". Check the names of each image we've exported.

STEP 5 - CSS

Now we must link the CSS file in the HTML. Insert the following line inside the <head> tag.

To build the CSS we'l use CSSEdit. Open a new CSS file and save it on the root folder as style.css. To begin the styles we will create the main ID's.

body {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
	background: #000;
}
#total {
	width: 600px;
	height: 600px;
	border: 5px solid #FFF;
	position: relative;
	margin: 20px auto;
}
#header {
	height: 105px;
	background: url(images/bg_header.jpg);
	position: relative;
}
#main {
	background: url(images/bg_body.png) left top repeat-x #DBE8C4;
	height: 477px;
	width: 500px;
	padding: 18px 50px 0 50px;
}
#slogan {
	width: 195px;
	height: 82px;
	background: url(images/bg_slogan.jpg) no-repeat;
	color: #325D6A;
	padding: 18px 20px 0 285px;
	line-height: 1.3em;
}
#content {
	background: url(images/bg_roundWhite_top.png) left top no-repeat #FFF;
	margin-top: 15px;
}
#footer {
	background: url(images/bg_roundGreen_top.png) left top no-repeat #81AC40;
	margin-top: 15px;
}

Now, let's make the style for the contents inside the ID #content. We must create the #content_inner, to make the round corners at the bottom and at the top.

#content_inner {
		background: url(images/bg_roundWhite_bottom.png) left bottom no-repeat;
		height: 240px;
		padding: 10px 15px;
	}
	#content_inner h2 {
		margin: 0;
		color: #666;
		font-size: .9em;
		font-weight: normal;
		border-bottom: 1px dotted #CCC;
		padding-bottom: 10px;
		height: 15px;
	}
	#content_inner ul {
		margin: 0;
		padding: 0;
	}
	#content_inner ul li{
		margin: 0;
		padding: 0;
		list-style: none;
		height: 50px;
		padding-top: 10px;
		padding-left: 15px;
		border-bottom: 1px dotted #CCC;
	}
		#content_inner ul li.gray {
			background: #f5f5f5;	
		}
	#content_inner ul li h3 {
		margin: 0;
		font-size: .95em;
		line-height: 20px;
	}
	#content_inner ul li .submitted {
		color: #666;
		font-size: .8em;
		height: 20px;
		line-height: 20px;
	}
	#content_inner ul li .submitted a{
		color: #325D6A;
		font-weight: bold;
		text-decoration: none;
	}
	#content_inner ul li .submitted a:hover {
		color: #000;
		text-decoration: underline;
	}
	#content_inner .pager {
		position: relative;
		height: 30px;
	}
	#content_inner .pager .pages {
		position: absolute;
		left: 0;
		top: 0;
		color: #666;
		font-size: .7em;
		line-height: 30px;
	}
	#content_inner .pager .pages strong {
		color: #000;
	}
	#content_inner .pager .links {
		position: absolute;
		right: 0;
		top: 10px;
		height: 18px;
		line-height: 18px;
		font-size: .6em;
		font-weight: bold;
		text-transform: uppercase;
	}
	#content_inner .pager .links a{
		text-decoration: none;
		background: #325D6A;
		color: #FFF;
		line-height: 18px;
		height: 18px;
		padding: 3px 5px;
		margin-left: 5px;
	}
	#content_inner .pager .links a:hover {
		background: #000;
	}

For the footer, we're gonna do the same thing, create the #footer_inner for the round corners.

#footer_inner {
		background: url(images/bg_roundGreen_bottom.png) left bottom no-repeat;
		height: 70px;
		line-height: 70px;
		text-indent: 15px;
		color: #2A3D15;
		font-size: 1.2em;
		font-weight: bold;
	}

For our final step, we're gonna place the logo. We're gonna name our logo 'logo.png'. Take a look how we'll make this style.

#header h1 {
		width: 292px;
		height: 130px;
		background: url(images/logo.png);
		margin: 0;
		text-indent: -2000px;
		position: absolute;
		left: 50px;
		top: 20px;
	}
	#header h1 a {
		display: block;
		width: 292px;
		height: 130px;
		outline: none;
		text-decoration: none;
	}

FINAL RESULT

You can see that all process is very easy, but you must exercise the CSS part, this is the heart of web design. A beatiful code is nothing without a good CSS to show the hard work we had to design. Practice and share with us your results!

Attachment	Size
9rules_tutorial.zip	312.2 KB

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links:

Tutorial: Obama's Background in CSS - Part 2

fabiano — Fri, 25 Apr 2008 11:16:02 +0000

In this tutorial we're going to show how you may use the background we've created in the Obama's Background 1st part. But we're not only gonna show you how to put it inside a site body, but also how to create and structure the site main regions like the menu, main content, support column and footer.

Our objective is not only to assemble the whole site, but also show some CSS basic concepts and Fireworks intregration with Web.

STEP 1

The first thing we must do is to export our images. Since we're creating only the basic structure, we're only gonna need two images: background and logo.

STEP 2

Now let's create the html file. The structure will have 4 regions: #header, #main, #sidebar and #footer. Notice that we're gonna insert the #main and #sidebar inside a #content, this way we're gonna have a greater possibility to modify things in the future.

<body>
<div id="total">
	<div id="header"> 
		<a href="#">
			<img src="logo_obama.jpg" alt="Home Obama"/>
		</a>
	</div>
	<div id="menu">MENU
	</div>
	<div id="content">
		<div id="main">HERE IS THE MAIN CONTENT
		</div>
		<div id="sidebar">SIDEBAR
		</div>
	<div>
	<div id="footer">FOOTER
	</div>
</div>
</body>

STEP 3

Now let's create the CSS. You may use the text/CSS editor of your choice. We're using here CSSEdit, and we're going to open Live Preview. With that, we'll be able to view in real time the things we are modifying. Notice that the structure is really simple. We're inserting a body #total with "margin: 0 auto" and all the other elements inside it.

    body {
        margin: 0;
        color: #999;
        font-weight: bold;
        font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        font-size: 2em;
        background: #01245c url(bg_obama.jpg) no-repeat center top; 
    }
	
	// AQUI ESTÁ NOSSO BG! 
	// Repare também que usamos a cor #01245C.

    #total {
        width: 960px;
        margin: 0 auto;
    }
    #header {
	   height: 160px;
   }
      #header img{
          border: 0;
      }
  #menu {
      height: 60px;
      background: #FFF;
      text-align: center;
      line-height: 60px;
  }  
  #main {
      float: left;
      width: 650px;
      background: #f0f0f0;
      height: 400px;
      text-align: center;
      padding-top: 100px;
  }
  #sidebar {
      float: right;
      width: 310px;
      background: #dadada;
      height: 400px;
      text-align: center;
      padding-top: 100px;
  }
  #footer {
      height: 150px;
      text-align: center;
      padding-top: 50px;
      clear: both;
      color: #15539c;
  }

STEP 4

Check the final result... really simple, huh? You only have to structure well the code and practice!

About the author

Sponsored Links:

Testing sites in different browsers

abduzeedo — Wed, 27 Jun 2007 14:28:40 +0000

I've been working on several projects for the web lately and I have always had to test them in several browsers. That could be very frustrating most of the times, mainly because as a Mac user I must test them every time on Windows and Internet Explorer 6 and 7.

With virtualization tools like VMWare, Parallels, Virtualbox and others I thought my problems would have ended. Of course that big concern of testing in a PC ended, now I’m able to open Windows and test my sites in IE 6 and 7. However my machine gets really slow, some times freezes, what makes the user experience a bit disappointing.

Fortunately, after some searches I came across with this really useful website called IE NetRender, where allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5,

This web rendering tool is ideally suited for web designers working on Apple iMac and Linux workstations. It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose.

It’s definitely worth checking that out. An essential tool for those who work as web designers.

I captured some screens of my site rendered by IE 7 and 5.5 via IE NetRender, you can check the photos below.

Abduzeedo blog rendered in IE 7 via IE NetRender

Abduzeedo blog rendered in IE 55 via IE NetRender

About the author

Sponsored Links:

Wedeed logo

abduzeedo — Wed, 14 Mar 2007 11:22:33 +0000

Lately I have been working with my brother on a promising project. Actually I shouldn’t even been talking about that now, but it’s necessary to say some things. Basically it’s all about CSS, it’s really cool, and it's called Wedeed.

Anyway, what he asked me to do was the logo and later its GUI.

“Well, you don't need to hire any creative designers for making those web 2.0 style logos for your blog - just follow any of these tutorials. And if you hate reading instructions in text, head straight to the video tutorial.“
http://labnol.blogspot.com/2006/11/logo-tutorials-design-web-20-style.html

It’s amazing the number of tutorials showing how to create a web 2.0 logo, actually, there are really good tutorials, but almost all of them showing us how to create those web 2.0 effects, rather than how to come up with a good idea, and that was I was looking for.

For this logo our goals was to create a really simple logo, easy to understand, web 2.0, and beautiful.

1 - We follow some ideas like:

Cascading
Pages
Separate design from data
Different Colors
Simple typeface
Flipping pages

2 - Definitions

A Cascading Style Sheet (CSS) provides the ability to separate the layout and styles of a web page from the data or information. Styles such as fonts, font sizes, margins, can be specified in one place, then the Web pages feed off this one master list, with the styles cascading throughout the page or an entire site.
www.liv.ac.uk/webteam/glossary/

How CSS works

3 - Some inspiration: What people have been doing.

3 - My ideas: The idea of layers perfectly represents the separation of the design from the data.

Looking for some references and inspiration, nothing like google images and flickr

Some of the initial digital tests

4 - Fonts of the web 2: There are really great sites showing examples, though I think the simplest the best.

Font variations, colors and alignments

6 - Adjustments: Some adjustments in the perspective, testing opacities and effects.

Trying some colors and opacities

5 - Final Result: Pretty much the simplest version of them all.

Wedeed logo

About the author

Sponsored Links:

Creating a web 2.0 blog - part 2

abduzeedo — Thu, 04 Jan 2007 10:24:24 +0000

Here we go again, continuing the creation of my brother's blog, Blackbelt. Fixing some design issues and creating the XHTML and CSS template.

Design Changes

My brother had asked for some minor changes on the design of the blog, mainly in the sidebar, where he hadn't liked the round corners tha I had done, although he said he really liked the feeds' box which was black.

Feeds' box, darker and with round corners

The new sidebar was created using the same style of the feeds' box, but lighter.

Using different style for visited links, however IE6 doens't do that.

XHTML and CSS

Using the basic XHTML generated by the Apache Roller, the blog engine that my brother uses, I started creating the CSS.

After a couple of hours everything was pretty much done and working fine, however there were some problems to be fixed with .png images and the box model under Internet Explorer 6.

With everything fixed, the template is done, working fine in all the major browsers: IE 6 &7, Firefox, Safari and Opera. If you want to take a look you can download all files that I have used so far.

blackbelt_blog.png

Attachment	Size
index.html	12.11 KB
screen.css	4.13 KB
images.zip	46.94 KB

About the author

Sponsored Links:

Creating a web 2.0 blog

abduzeedo — Thu, 28 Dec 2006 11:08:12 +0000

Throughout this article I will illustrate the creation of a weblog with the web 2.0 style. From the briefing to the CSS development.

Guidelines

The blog will be created to my brother who had asked me to do that, besides, he gave me some guidelines of some design aspects that he would like to have in his blog:

Dark background;
big font sizes;
some round corners;
a place to put some logos;

Also he send me some links of site that he thinks are really cool, below there are some of them.

Research

With the guidelines and some references in mind I started my research and found some good links about designing web 2.0 style sites such as this Web 2.0 how-to design style guide, which explains really well the web 2.0 features showing examples of sites, concepts and what not to do.

After reading a lot of site and got some good insights I became the creation of the layout, first the idea of columns, where the navigation will be, the main content, and stuff like that. Talking to my brother, he said that he would like to have a vertical navigation with a sidebar where he could add his favorite links, search, the blog's navigation, flickr photos, delicious bookmarks and etc... so I came up with a pretty simple wire frame.

Wireframe of the blog, liquid layout

Layout creation

With the wire frame done I knew where to put the content, so I had to start adding loren ipsun content there. One thing that I think is really cool on the web 2.0 trend is the gradients, they create a really cool visual effect of difference on planes, elevating some parts and put some in a lower level. Another cool effect that I have already used on a personal project and I thought would be cool is that "emboss effect" in lines that divide content as Bartelme uses in his site. The dark color and the variation of them are a feature to be exploited.

For the header I thought that would be nice to add an illustration or a photo like Veerle does. I start thinking which photo would be cool, looking for the right shot I remember that my brother had taken one pretty cool in Philadelphia in front of that Metropolitan Art Museum where Rocky Balboa always finished his training, as my brother loves Rocky and with the new movie coming to the theaters, I thought that image would fit like a glove.

After all of that and several hours in front of my computer using Macromedia Fireworks I came up with the layout below. Click here to open the real size version in a new window

The layout, round corner in some parts, gradients, pretty much everything

Showing to my brother, he said that he liked it a lot but that there were some issues to be fixed. However he hasn't told me them yet. So the only thing that I can do now is wait, and as soon as he point the issues and we fix them, I will continue this article until the CSS is done.

blackbelt_blog.png

Attachment	Size
blog.png	2.5 MB

About the author

Sponsored Links:

10 Years of CSS

abduzeedo — Wed, 20 Dec 2006 08:49:11 +0000

In 2006 CSS celebrates its 10th anniversary. What does that mean? CSS has changed the way web designers create their sites, separating Markup from presentation, benefitting designer and uses alike.

The design community has confirmed that using CSS promotes beauty while making it easier and less expensive to build sites, ”Bert Bos, W3C Style Activity Lead

The W3C published on their website an article about the CSS' 10th anniversary, where they list some benefits to designers when using CSS.

Rich feature set
Reuse
Accessibility
Cross-media publishing

Well, everybody knows that there are some issues with cross browser style yet. Ok it has more to do with Microsoft and Internet Explorer, but for me CSS has made my life much more easier and pleasant.

Below, some links related to this post:

css

Playing with CSS 3 - Animations, Rotate and Scale

CSS Buttons and Thumbs

HTML Code

CSS for the Navigation Bar

CSS for the Navigation Buttons

Animated Flickr Images

90s design with CSS

Recommended Articles

Download

About the author

Sponsored Links:

Playing with CSS3

Final Result

Step 1

Step 2

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Conclusion

Download the Files used for this Tutorial

About the author

Sponsored Links:

350+ Great CSS Tools and Techniques

One of the most enjoyable moments for a web designer is coding CSS. It's such a nice language that it actually gets fun to work with it... style your pages and actually watching your designs gain life and forms. But sometimes, a little help is welcome.

50 Extremely Useful And Powerful CSS Tools

12 CSS Tools and Tutorials for Beautiful Web Typography

101 CSS Techniques Of All Time- Part 1

53 CSS-Techniques You Couldn’t Live Without

Powerful CSS-Techniques For Effective Coding

25 Code Snippets for Web Designers (Part1)

25 Code Snippets for Web Designers (Part2)

25 Code Snippets for Web Designers (Part3)

CSS Dock Menu

Most used CSS tricks

About the author

Sponsored Links:

CSS Quick Tricks #1 - Where to put your CSS

Where to place your CSS

What's the difference?

But what way, is the best way?

Conclusion

About the author

Sponsored Links:

Mini-layout inspired on 9rules design - CSS Part

Previously we've shown how to make a small layout on fireworks based on the 9rules desing. Now we're going to show you how to set this to code up. We're gonna explain everything, from slicing in Fireworks to setting the css in the code. Enjoy and let's get started!

STEP 1 - SECTIONS

STEP 2 - THE CODE

Abduzeedo by design

New Posts

Inspiration: Amy Stein Photography

Inspiration: Amy Stein Photography

Inspiration: Amy Stein Photography

New Posts

Inspiration: Amy Stein Photography

Inspiration: Amy Stein Photography

Inspiration: Amy Stein Photography

Abduzeedo by design

New Posts

Inspiration: Amy Stein Photography

Inspiration: Amy Stein Photography

Inspiration: Amy Stein Photography

STEP 3 - SLICING THE PNG

STEP 4 - EXPORTING IMAGES

STEP 5 - CSS

FINAL RESULT

About the author

Sponsored Links:

Tutorial: Obama's Background in CSS - Part 2

STEP 1

STEP 2

STEP 3

STEP 4

About the author