All posts tagged 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…

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…

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…