Bringing blending to the Web. If you’re a user of our design applications such as Photoshop and Illustrator, you know how you can create very cool effects with blend modes.
An Amazon search returns many books and a Google search on ‘photoshop blending tutorial’ returns more than 200,000 results. This points to a very widely known and used feature. If you’re unfamiliar with blend modes, they are a set of operators that determine how 2 layers are blended together. The following example shows the normal case where two images are combined with no blending: Targeting the iPhone 4 Retina Display with CSS3 Media Queries - iWalt.com. Four years ago, (eight months before the original iPhone was announced) Dave Hyatt wrote about high DPI web sites on the Surfin’ Safari blog: One area of Web design that is going to become more important in the coming years is high DPI.
For those of us working on WebKit, this will also become an issue for WebKit applications and for Dashboard widgets. The future is now. The iPhone 4’s Retina Display doubles the pixel density we’re used to seeing on handheld devices and thus drastically improves the sharpness of text on the web. But what about images? John Gruber’s “Why 960 × 640”: I don’t think that MobileSafari will be able to continue mapping the “px” unit to physical display pixels, because the disparity between the physical pixel size of old and new iPhones is going to be enormous. Dave Hyatt again: Most Web site authors have traditionally thought of a CSS pixel as a device pixel. This is exactly what’s happening on the iPhone 4. CSS3 Patterns, Explained. Many of you have probably seen my CSS3 patterns gallery.
It became very popular throughout the year and it showed many web developers how powerful CSS3 gradients really are. But how many really understand how these patterns are created? The biggest benefit of CSS-generated backgrounds is that they can be modified directly within the style sheet. This benefit is void if we are just copying and pasting CSS code we don’t understand. We may as well use a data URI instead. Important note In all the examples that follow, I’ll be using gradients without a vendor prefix, for readability and brevity. Ultimate CSS Gradient Generator - ColorZilla.com. /* Permalink - use to edit and share this gradient: */ background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
CSS3 Gradient Generator. Ceaser - CSS Easing Animation Tool - Matthew Lein. Experiments with background-clip: text. With the CSS property "background-clip: text" (which is currently only supported in Webkit browsers), we can add a background image to a text element.
Today we will experiment with it and create some fun examples by adding CSS3 transitions. View demo Download source With the CSS property “background-clip: text” (which is currently only supported in Webkit browsers), we can add a background image to a text element. Today we will experiment with it and create some fun examples by adding CSS3 transitions. Better border-radius in IE7 and IE8. Quick Fun: CSS3 Filter Effects « GirlieMac! Blog. I quickly played with the brand-new CSS Filter Effects on the latest WebKit Nightly!
(Edited: Now also supported on Chrome Canary 18.0.976.0 +) Click the images to view in the full size. This is a default google.com screen. No filter added. blur(radius) to create Gaussian blur. Demo: CSS3 Image Styles (Part 2) Css3.0 Generateur. CSS Box Shadow. Used in casting shadows off block-level elements (like divs). The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size.
Default is 0 (the shadow is same size as blur).Color Example Inner Shadow Internet Explorer Box Shadow You need extra elements... <div class="shadow1"><div class="content"> Box-shadowed element </div></div> One-Side Only Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.