Group items tagged

"background: -moz-linear-gradient(top, rgba(97,103,150,0.35) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(97,103,150,0.35)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(97,103,150,0.35) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(97,103,150,0.35) 0%,rgba(125,185,232,0) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(97,103,150,0.35) 0%,rgba(125,185,232,0) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59616796', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, rgba(97,103,150,0.35) 0%,rgba(125,185,232,0) 100%); /* W3C */"

Some playground/sandboxes for CSS CSS3 * Linear Gradients * Radial Gradients * Text Shadow * Box Shadow * Text Stroke

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.

Take a walk through the woods and learn about all things HTML5. Starting with the JS APIS (selector API, storage, appcache, web workers, web sockets, notifications, drag and drop, and geolocation). Then delve into the new HTML semantic tags, link relations, micro data, ARIA, forms, audio and video, Canvas, and WebGL. Finally, the holy trinity finishes with CSS and selectors, fonts, text, columns, stroking, opacity, HSL, rounded corners, gradients, shadows, backgrounds, transitions, transforms, and animations.

In the following tutorial you are going to learn how to make a simple, clean, modern logo that you can use in your future projects. It is very simple to create this logo but after the basic shape is created you can easily add your own unique quirks (gradients, drop shadows etc) to make the logo trul

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.

Generate HTML/CSS code and images for rounded corners.

Ten steps to create basic logos using Photoshop. Step-by-Step Instructions: 1. Select Elliptical Marquee tool and draw a circle in the center of the canvas and fill it with black color by pressing ctrl+backspace. 2. Keep the selection active and move the selection by pressing right arrow ke