Archive for the ‘CSS’ Category

Rounded Corners Using CSS

One of the more popular things to do with CSS is to have elements with rounded corners. Some designers have even called this the holy grail of CSS. It is also one of those design elements that give your site a sophisticated and professional look. Most designers will tell you to achieve [...]

Rollovers using only CSS

In the past we have posted on how to create rollovers using CSS. To do this, we used a sprite to create the rollover effect. You can also create a rollover effect by using just CSS.
Let’s first look at the CSS code that will allow us to create this effect.
<style>
.menu [...]

Back to Basics: A Beginners guide to starting a CSS Document

Here’s a tip for you. Never let the browser to decide what your site will look like. What we’ll go over today is a quick and easy way of defining styles for common html tags that should dramatically cut down on the amount of guess work a browser will have to do to interpret your [...]

Framing your images using CSS

So you have this awesome autographed picture of Carrot Top that you got after months of waiting from his fan website, and you’d like to put it up on your website to prove your fanhood. The problem is you don’t have Photoshop or Fireworks handy to put a nice frame around it, and you’d like [...]

How to make Buttons with Hover Load Faster

With CSS we can target the ‘:hover’ child class for links and update their background properties.
Example
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}