All posts in CSS

Optimize your site for multiple screen resolutions with Screenfly

Multiple screen sizes with screenfly

The days where a website was primarily accessed by pc’s are long gone. Today a increasing amount of devices like tablets, mobile phones and  tv’s are used to browse the web.

The consequence of this development is a increased need to test the behaviour of you website in the different screen resolutions these devices uses.  Unfortunately it’s only very few webmasters that have access  to all these devices. You could naturally try to get your boss to buy all these nice devices for you ;-) .

As a plan B (if your boss isn’t that understanding) , you can use a online service like Screenfly to quick and dirty emulate your site’s behaviour in the different devices.

Read more…

CSS3 support in Internet Explorer the easy way

Support CSS3 in Internet Explorer 7 and 8Css3 offers a variety of new functionality that makes it easy to produce spectacular graphical effects like rounded corners, box shadow and gradient backgrounds without using external JavaScript or advanced markup with creative usage of background images.

The problem with CSS3 is that especially Internet Explorer 7 and 8 doesn’t support CSS3, which means that you risk that a huge part of your visitors can’t see all the nice eye candy you have built in CSS3.

The good news is that you don’t have to wait for Internet Explorer 9, before CSS3 can be used on your site. With the technique described in this post, you can actually learn Internet Explorer 7 and 8 to render beautiful CSS3

Read more…

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…

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…

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…

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…

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…