5 Simple CSS Tips

5 Simple CSS Tips

Cascading Style Sheets, or CSS is a common application used to style web pages. It has been known to reduce bandwidth, increase uniformity among different browsers, and even add some stylistic flair to web pages. Here are a couple of tips to help you along the way.

1. CSS and Text Overflow

If text has been cut off and you want to leave a visual clue to the user, use CSS to leave an ellipses to inform them that there is more to read.
example code:

text-overflow: ellipsis-word;

2. Rotating Text With CSS

By using the “transform” property in Webkit and Firefox, and the BasicImage filter in Internet Explorer, web designers have the ability to rotate text as they please. Designers can use this tool to rotate images as well making it a valuable asset for almost any design.
example codes:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

3. Using CSS to Center Layouts

For web sites that rely heavily on large pictures, it is crucial to present the pictures correctly to prevent any problems. This code allows for proper centering, fixing problems associated with overlapping images, repeating images, or images that cut off neat the edges of the screen.
example code:

#container {margin: 0 auto; width: 30px; text-align: left;}

4. Resetting CSS

Resetting CSS gives users the ability to work uniformly across multiple browsers and platforms, fixing problems with margins, font size, headings, default line heights and other variables that often change between browsers.
example code:

{padding: 0; margin: 0;}

5. Using Shorthand CSS

Especially in larger projects, using shorthand CSS helps to keep file size small, which greatly benefits users as web pages don’t take as long to load. The biggest benefit, however, is its large boost in efficiency. When coding takes a significantly short time, you can do more work in a shorter amount of time.
example code:

#box p {margin-top: 15px; margin-right: 5px; margin-bottom: 15px; margin-left: 5px; }

can be shortened to…

#box p {margin:15px 5px; }

read more

Rounded Corners using CSS

Rounded Corners using CSS

Ever since web pages came into being, designers have wanted to add more and more style into their creations, one of the most important being rounded corners.

Rounded corners using images

At first, this was achieved by using huge images to represent the buttons, forms or any other element.

Later, the huge images were cut into smaller ones to represent the corners, positioned perfectly using CSS (see image on the right).

The HTML 5 spec makes it simpler than ever to create rounded corners, forgoing the need for images altogether and saving us from the horrors of funky CSS.

One can now simply add the border-radius property to any element to achieve the same effect. Here we have a simple span with the following attributes:

Simple Border


margin: 20px;
padding: 4px 10px;
border: 1px solid black;
background-color: #ffff00;

Simply adding border-radius: 6px; turns it into:

Rounded Border


margin: 20px;
padding: 4px 10px;
border: 1px solid black;
border-radius: 6px;
background-color: #ffff00;

That’s all there is to it. Almost makes it seem like a scam after the horrors we have been through in the past.

Let’s use it to create the featured image at the top that was originally created using a photo-editor. We’ll do it using spans:

Span 1

display:block;
width: 182px;
height: 182px;
background:-webkit-linear-gradient(#ccc, #444);
background:-moz-linear-gradient(#ccc, #444);
background:-o-linear-gradient(#ccc, #444);
border-top:4px solid #888;
border-left:4px solid #888;

Span 2 (embedded inside Span 1)

display:block;
width: 140px;
height: 140px;
background-color:#bb0000;
border:1px solid #bb0000;
border-radius:20px;
position:relative;
top:18px;
left:18px;

Close enough. Now how about using this to improve your buttons?

Note: -moz-border-radius has to be added to make it compatible with Mozilla browsers. However, as of Firefox 4, just border-radius is supported.

read more

Text Shadow

Text Shadow

Text Shadow Property

We have long wanted to use 3D text effects on web pages and until now, that meant using images or tricky javascript that slowed down your website.

With CSS 3, this is as simple as making text bold or colored blue.

The text-shadow property allows you to turn any piece of plain text into one that stands out. Simply specify the color and offsets of the shadow, and you’re done.

The syntax is:
text-shadow: <color> <x-axis offset> <y-axis offset> <fuzz amount>

which might look something like this within the stylesheet:
text-shadow: #000 0.01em 2px 0.1em

These offsets may be specified using the standard CSS units. We’ll stick to pixels and em. The fuzz amount specifies how much the shadow should be stretched.

 

Text Shadow Examples

Adding this CSS for your paragraph tag:
p {color: red; text-shadow: #888 2px 2px 0.12em;}

will turn something like this:
That the quick brown fox jumps over the lazy dog
into this:
That the quick brown fox jumps over the lazy dog

 

There are a number of creative and interesting effects you could achieve with this, such as using the same color as the background for the text and adding a shadow:
p {color: white; text-shadow: #888 2px 2px 0.12em;}
That the quick brown fox jumps over the lazy dog

Be careful. The text-shadow property will only work for browsers that support CSS 3 (which is most decent browsers these days). It will be ignored by those that don’t so your text above will be invisible. Should take that into account.

 

You could also stack multiple shadows to create a colorful montage of sorts or a flame text effect:
p {color: #ff6; text-shadow: #f63 0 1px 0.2em, #ff3 -2px -1px 0.12em, #f93 2px -2px 0.12em, #f63 0px -3px 0.3em;}

That the quick brown fox jumps over the lazy dog

 

Text Shadows in Buttons

Now, we could use the same effect for buttons to give them a little more character.

Simply add the “text-shadow” property to the CSS for your input box:
input {text-shadow: #999 0.14em 0.14em 0.2em;}

 

Although there are a lot of effects that you simply can't achieve with cascading style sheets, the text-shadow property is a huge leap in that direction.

read more

Welcome to CSS Button

Welcome to CSS Button

Welcome to the new CSS Button site. In addition to providing tips and techniques related to Cascading Style Sheets, this site will showcase useful methods and code that would be invaluable to any webmaster, developer or designer.

You will still find loads of buttons that you may use on your own website for free. Sites offering free buttons are already quite plentiful on the Internet, but what makes CSS buttons special is their speed, simplicity and elegance. We have buttons made entirely out of CSS/HTML that load instantly and you’ll also find buttons enhanced with CSS.

CSSButton

Visit the CSS forms page for ways to improve on the plain HTML forms for your site.







CSS-based buttons offer numerous advantages:
They’re smaller and hence quicker to load
They can be modified much easier than an image can
They are more easily accessible by text-based browsers and web crawlers, giving your site a wider audience and better SEO.
Here are a couple of examples of buttons created or enhanced using plain CSS and HTML. I decided to use inline CSS to make it simpler to use the buttons and cater for different types of buttons on a single page. This does increase the size and you can make the code even smaller by including the CSS in a separate .css file.

xmlatom feed

Browse the collection that we have on this site or create your own and simply paste the code into your page, wherever you want it. It’s as simple as that. I would also appreciate any comments on these.
(Note: The buttons on this site are tested to work correctly with Mozilla Firefox and Opera browsers. Users with IE or other browsers may experience varying results)

read more