Posts Tagged ‘css’

CSS3 Declarations for Web Designers

Wednesday, March 17th, 2010

UPDATED 15/03/2010

CSS3 is still under development but things are moving fast. This post/tutorial aims to provide Web Designers with the latest CSS3 declarations and their usage and compatibility. This is the ultimate resources for any Web Designer who relies on CSS to build web sites.

Gradient Border
The gradient border property is a very recent addition to CSS3 and currently works in only Firefox. It has the ability to create a gradient border which, up until recently could only be achieved using some tricky mark up and your favourite graphics program
.border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Border Radius
Border radius is becoming a popular technique. Like many new CSS3 declarations, up until recently this technique could only be achieved by cheating using images and or Javascript. This easy to use declaration works in new versions of Firefox and Safari.
* -moz-border-radius-topleft  / -webkit-border-top-left-radius
* -moz-border-radius-topright / -webkit-border-top-right-radius
* -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
* -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Drop Shadow
This fantastic new feature is actually called Box Shadow as opposed to Drop Shadow and works with Firefox and Safari. The code for this is below. It take 3 lengths and a colour as its attributes:
1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

Multiple Backgrounds on an Element
CSS3 will allow multiple background images on one element (currently only supported by Safari). This is done simply by separating the background image source with commas. This CSS3 property promised to negate the need for multiple DIVs to achieve  a simple effect. For example:
background: url(top_bg.gif) top left no-repeat,
url(header.jpg)  top 11px no-repeat,
url(footer.gif) bottom left no-repeat,
url(mid_bg.gif) left repeat-y;

Opacity
Opacity has always been the bugbear of any Web Designer, and despite the increased popularity of PNG, it still has its flaws. This new CSS3 declaration will prove very popular and reduce the amount of work required for semi-transparency in the future.
<div style=” background: rgb(255, 0, 0) ; opacity: 0.2;”></div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.4;”></div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.6;”></div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.8;”></div>
<div style=” background: rgb(255, 0, 0) ; opacity: 1;”></div>
Each example above gives a different opacity value. The value can be seen at the end of each line. 0.2 is equivalent to 20%,0.4 to 40% and so on.
Text Shadow
Creating text effects with CSS3 is easy thanks to some new declarations which allow text shadows without the use of your graphics program. The declaration is simple and works in new versions of Safari, Firefox and Opera.
text-shadow: 2px 2px 2px #000;

CSS3 Web Fonts
Since the dawn of The Web, designers have been restricted to using a set group of fonts which are guaranteed to work on every computer in every location. This is soon to become history with a new CSS3 declaration using @font-face. This new declaration embeds the font so your user can view the web site in their browser with the correct font, even if they don’t have it installed on their machine.
First, the font needs to be embedded (remember, only licenced True Type .ttf or Open Type .otf fonts can be used):
@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);
}

@font-face {
font-family: Delicious;
font-weight: bold;
src: url(‘Delicious-Bold.otf’);
}
Once embedded, the font needs to be called using this CSS3 declaration:
h3 { font-family: Delicious, sans-serif; }
This currently only works in Safari but will hopefully be cross browser compatible by 2011.

Tags: , , , , ,
Posted in CSS Tutorials | 1 Comment »

Creating Rounded Corners Using CSS

Thursday, March 4th, 2010

Rounded corners are a great way to add character to a web site. Rounded corners are also modern and fancy. In this tutorial you will learn how to create rounded corners using simple CSS.

First of all, lets discuss the new CSS3 property which allows you to specify curved corners using CSS. This new CSS property has not yet been finalised, but you will be pleased to know that it works in 3 of the most modern browsers (Firefox, Safari and Chrome). As ever though, Internet Explorer has problems rendering the CSS property which makes curved corners, so an additional Javascript file to force render. Download the file from below.

This technique for rounding corners is about the most robust way I have found of doing it. It uses very little markup and no addition images. It also supports the use of background images on DIVs, even if they do not have rounded corners themselves.

Curvycorners Javascript File (some users may need to right click and ’save link as’)

From here it is very simple to implement:

1. Create your website as you normally would. In the head of each page enter this line of code <script type=”text/JavaScript” src=”curvycorners.js”></script> . This tells the browser to refer to the external Javascript file which you have downloaded from this tutorial. Place the JS file in the root folder for this to work.

2. Apply these CSS attributes to any element you want to apply rounded corners to
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
The code contains a pixel value which, if changed will change the curve on your element. The higher the pixel value the bigger the curve. In addition to this, you can specify diffferent values to each corner by applying the code like this
-moz-border-radius: 10px 20px 10px 20px;
-webkit-border-radius: 10px 20px 10px 20px;
Each figure applies to a different corner, starting with the top left and working around in a clockwise direction.

Example of how code should be applied
.midbox {
height: 280px;
width: 295px;
padding: 5px;
float: left;
margin-left: 5px;
border: 1px solid #CCC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-image: url(images/midboxbg.png);
background-repeat: repeat-x;
text-align: justify;
}

You can apply curvycorners to both classes and IDs.

This technique will make curved corners render in any modern browser simply by using a 3kb javascript file and 2 lines of CSS3.

Tags: , , , ,
Posted in CSS Tutorials | 1 Comment »

Create a Customer Header with Links using CSS

Thursday, February 11th, 2010

CSS is a very powerful tool. Here we examine how to create a customer header with links, very much like the one seen at www.2spheres.co.uk.

First of all, decide if you want your header to have solid colour or a gradient of colour. If you decide to opt for the latter then you will need to open up Photoshop or you favourite graphics editor.

Creating a Gradient and Exporting It
We will make our header gradient in Photoshop first.

Create a new image, approx 100 pixels wide and 55 pixels high. Now, using the gradient colour picker in Photoshop (find this by selecting the gradient tool from the left hand tool bar and then selecting the drop down box on the top tool bar with a picture of a gradient on the front) choose 2 colours. My advice would be to choose 2 similar colours, for example, a dark red #9f0202 and an ever so slightly lighter red #c80404.

The Gradient Picker

Using the gradient tool, hold shift and draw a gradient on your art canvas, dragging from top to bottom. This will ensure your gradient is vertical.

This next step isn’t essential but it helps your website become more optimised when it loads. Go to Image > Image Size and untick the box which says ‘Constrain Proportions’. Now resize the image width to 1 pixel.

Now go to File > Save for Web and Devices. Save your 1 pixel wide image as a png-24 and call it something memorable like “headerbg”.

Adding Your Gradient To Your Web Site Using CSS
Here’s where we get down to some serious coding. Hand coders and Dreamweaver users will understand what to do.

Create your new HTML document and add a div. The code you will need for valid markup of your HTML doc with a div will look like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>
<body>
<div id=”header”> </div>

Now we will enter our CSS. To keep it simple, add the CSS to the HTML document (rather than creating a separate file which is actually best practice but more complex). We will deal with creating separate CSS files at a later date.
The CSS must be placed in the head tag of the document. For Dreamweaver users, go to Window > CSS Styles to view the relevant dialog box. Your CSS will start to shape up like this:
<style type=”text/css”>
<!–
#header {
}
–>
</style>

#header is the name of the div we created earlier using HTML. You can call it whatever you like as long as the CSS and HTML name for the element match up.
Your div will automatically span from the left hand side to the right hand side of the page. The following code will set you div properties:
#header {
text-align: center;
height: 35px;
padding-top: 20px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: lighter;
letter-spacing: 0.2em;
background-image: url(images/headerbg.png);
background-repeat: repeat-x;
}

Our CSS is telling the browser a few things here;
- The text must be centred
- The height is 35px. Add the padding on and this makes 55px (the total height of our header background image)
- The font we want to use
- The font size
- The weight of the font
- The space between the letters we type
- The location of the image we just created in photoshop
- The direction we want it to span. x is left to right and y is up and down.
You should have something which looks like this:
What your work should look like

Our div spanning across the page with a gradient

With that complete, the final stage is to add some links. To do this, we will create a UL, or unordered list. There are some complex rules which need to be applied here to make this work so keep and eye on the code:

HTML CODE FOR THE UL IS LIKE THIS:

<div id=”header”>
<ul>
<li class=”first”><a href=”index.html”>HOME</a></li>
<li><a href=”link.html”>ABOUT</a></li>
<li><a href=”link.html”>GALLERY</a></li>
<li><a href=”link.html”>CONTACT</a></li>
</ul>
</div>

Notice that we have added a class of “first” to one of our list elements. This is very important for later on.

Next, we add the CSS in to our head to style the UL. You will need to create a new rules as follows:

#header ul li  {
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #F482B6;
 list-style-type: none;
 display: inline;
 padding-top: 25px;
 padding-bottom: 18px;
 text-align: center;
 padding-left: 20px;
 padding-right: 12px;
 margin: 0px;
}

And now, create another new rule to remove the first left aligned border from the links:

#header ul .first {
 border: none;
}

To briefly run over what we have asked our code to do:
- We have specified a border on the left. This is used as a visual separator for our links.
- We have also specified border type and colour.
- We have told the browser that our UL is not a visual list and it needs to be displayed in a line.
- We have added padding to increase the hotspot area of each link and to give more space between the links.
- We have specified a zero margin

View Some Code
If you want to take a more in depth look at the code which we used to create this you can go to www.2spheres.co.uk. The header on this site is identical to what we have just created. The CSS and HTML in the tutorial is fully compliant and can be checked at W3C for official validation.

Tags: , , , , ,
Posted in CSS Tutorials | 2 Comments »