Group items tagged

Learn how to drop a shadow to images css

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.

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that's your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today's browsers.

Now you can Stumble outside of the shadow of the mega-corporate overlords at eBay - two years after Stumble founders Garrett Camp and Geoff Smith cashed out and handed their baby over to the ecommerce giant, they've come back with a team of investors and bought StumbleUpon back from eBay. It's pretty exciting.

Box Sizing, Border Radius, Shadows, RGBA Colors, Multiple Columns, HSLA Colors, Multiple BG

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