jKit – jQuery based UI Toolkit

No JS: Tabs That Scale Down to Menu

September 23, 2014 Comments (0) Views: 3775 Coding

CSS Gradients with background-blend-mode

The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc). It is very new and is curently supported by the latest releases of Chrome, Firefox, and Opera. The property is coming to Safari soon but not available in Internet Explorer.

CSS gradients are already immensely powerful in creating patterns, as shown in Lea Verou’s CSS Patterns Gallery. With the new background-blend-mode property, the possibilities expand once more.

CSS gradients are completely resolution-independent and faster to modify than images. With performance considerations in mind, animations and transitions are possible through the background-size or background-position properties.

View Demo & Download

Tags: #, #, #, #, #, #, #, #, #

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.