Group items tagged

The following demo was made using a variety of CSS techniques. Rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms are just some of them. A lot of these were generated by helpful tools, such as westciv's tools and Border Radius. By combining these techniques, you can create rich graphics with just a few lines of code. Here are a few examples. In the contacts icon, I used 5 different shapes for the silhouette icon. The head is a rectangle with rounded corners, followed by another rectangle for the neck and a distorted semi-circle for the body. In order to get the curve of the shoulders to the neck, I placed two circles on top of the shapes. The weather icon has several rays of light shooting from behind the sun. Each one of these rays is actually a long rectangle with a gradient that fades to transparent on either end. I used -webkit-transform:rotate to rotate each rectangle to a different angle. The same effect was used for the iTunes icon. To get the cloud icon on the iDisk icon, I used two circles layered on top of each other, above a rounded rectangle. The larger circle has a gradient that cuts off just before the rectangle.

With this little CSS technique a user can identify a link by its icon.

Custom Built and Crisp Icon Fonts, Done Right

There are web-based generators for almost everything; stripes, buttons, forms, loader icons, etc. CSS Arrow Please focuses on another niche; yes, totally CSS-based (no images) arrows. This CSS trick is great for using in tooltips, the generator offers multiple options for customization (the position, color and border values) and auto-creates the related CSS code.

Common types of logos include nameless logos, typographic logos, and type and symbol logos. Start-ups and known companies can use typographic or type and symbol logos. Nameless logos are more suited to companies who have established themselves as iconic brands.

On clicking Gmail's "Compose" button, a window appears in the right corner of the screen. Well, this window has new options now. In the top-right corner of that "Compose" window, you will find three icons: Minimize, Full-screen and Close. By clicking the one in middle, window gets enlarged.

Very nice collection of screenshots about all different kinds of design patterns.

Gmail Labs added yet another useful feature for those who receive messages from all over the world.The new feature in Gmail labs called "Sender Time Zone". you can find this option in Labs tab under Settings. Once you enabled this feature you can see green phone icons next to people who are probably awake and readily reachable.The red ones indicates those who could be sleeping or out of the office.

Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible - see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

Trick to show how to decorate your images and photo galleries without editing the source images.