All posts in CSS

Jumpstart new CSS typography with Type-a-file

Create new CSS fast with type-a-fileCreating a CSS typography from scratch for a new website can be quite time consuming.

To speed things up, you might reuse CSS from other of your projects, or you might use some pre developed CSS classes, that you can then adjust to your needs.

In this post we’ll take a look at Type-a-file, that offers 8 different ready to use CSS definitions for your site.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Rotate images and text with CSS 3

Learn how to rotate images and text with CSSRotated images can give your site or blog a interesting and modern look. Normally you would need to open a image editing program like Photoshop og Gimp, and manually rotate the images.

With CSS 3 you can avoid the manual work, and get the same effect by adding a small piece of CSS to you page.

See examples here

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Adding text stroke effect with CSS

Create a nice css outline or stroke effect to your textUsing CSS to create nice text effects is a good alternative to creating text effects as images, since the text is easier to update and maintain, and is performing better from a SEO perspective.

In this post you’ll learn to create a nice text stroke effect for webkit based browsers with CSS.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Add gradient background to your text with CSS

Gradient text color with CSSAdding gradient color to a text is typically achieved with a little Photoshop magic, however you can also create the same effect with CSS and a image with a gradient transparent background.

In this post you’ll learn 2 techniques on how to make a nice gradient background to your text with CSS, a general solution, and a very simple to implement solution, only for webkit based browsers.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Create a watermark effect with CSS

Create a nice watermark effect with CSSIn some situations it can be handy to display information in a image as a watermark.

Traditionally, watermarks are added manually by graphical programs like Photoshop, which can be very time consuming.

Adding watermarks with CSS can make it very fast and flexible to add a watermark to many images.

In this post we’ll build a simple CSS class that can display a text on top of a image like a watermark

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Create nice submit buttons with CSS and no images

Submit buttons with pure css - no imagesIn this post we’ll demonstrate how submit buttons in forms can be styled with CSS without using any images.

If you’re very interested in creating nice looking websites with high performance, styling without images it’s worth considering, since it can decrease loading times of your pages, due to less http requests per page.

The examples in this post is both using standard CSS 2 and the upcoming CSS 3 to demonstrate some of the effects that can easily be applied to your submit buttons

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Nice printing with CSS page breaks

Create nice printouts with css controlled page breaksSurprisingly enough, many web users still likes to print web pages, so they’re having the data at hand, even if they’re online.

How frequent this behavior is, greatly depends on you content, but if you ‘re having content where off line usage makes sense, you should spend a few minutes looking into how printer friendly your pages are.

In this post you’ll learn to create nice page breaks by using CSS

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS