Style a List with One Pixel

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

3 Easy and Fast CSS Techniques for Faux Image Cropping

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want. That’s why it’s called Faux Image Cropping.

These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Simple CSS Tricks to Greatly Improve Site Typography

When creating a minimalist or simple website design, typography plays a key role in adding contrast and interest that would normally be done with images. Because of that, it’s essential that the typography looks professional and is well-tuned with the rest of the design. Here are a few CSS tips to make sure you get it right…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!)…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Horizontal and Vertical Centering Using CSS: A Beginner’s Guide

There comes a time in every web designer’s life, when you’re trying to center an HTML element and it’s failing miserably. You’re ready to pull the plug on CSS, revert back to tables, and use deprecated tags and attributes like: center, align, and valign. In this tutorial we’re going to shed some light on the subject, and hopefully help demystify the process of centering HTML elements using CSS…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How To Create a Pure CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Active State in Navigation – CSS Navigation Tutorial

I am sure you have been on a website where the navigation has an “active” state, basically showing you which page you are currently on. It’s a great way to let visitors know exactly where they are on a site. This tutorial shows you how to use a CSS sprite to create a navigation menu with normal, hover and active states…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

How to detect screen size and apply a CSS style

I needed today to format the content differently according to the screen resolution of the user. So I thought that just by detecting the screen width using the screen.width property, I could change the stylesheet using jQuery. And so it was. Check the example and continue reading…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Aligning Images The Right Way Using CSS

Images are great for blog posts and chunks of text in general. Even if they’re just remotely relevant, they’ll add some space and make the content more accessible. You want to spice your texts up with images.You can position images however you like, of course, but a nice feature is to have the floating to the left or right, with the text flowing around them.

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

@font-face and 15 Free Fonts You Can Use Today

Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like Cufón, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.

We’ll take a quick look at using @font-face in CSS and 15 great free fonts you can start using today…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)