Surfing over dribbble I stumbled upon a Xonom design by Cosmin Daniel Capitanu. I wondered how to accomplish such "background sharing across multiple elements" effect at HTML/CSS without any coordinates processing by JavaScript. This page is result of my research by this topic.
Check original Xonom and notice how background gradient shares across multiple elements. Note that icons and text at lighter layers have gradient-color from darker layers, creating the illusion of underlying violet layer. In addition to that, layers pass background image (girl) with equal transparency so that layers can not be superimposed on each other. All this things can be implemented at CSS.
<link href="./multiple.css" rel="stylesheet">
<script src="./multiple.min.js"></script>
<!--HTML-->
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
// JavaScript
var multiple = new Multiple({
selector: '.item',
background: 'linear-gradient(#273463, #8B4256)'
});
Name | Required | Description | Example | Default |
---|---|---|---|---|
selector |
Required |
Selector. Refers to document.querySelectorAll()
|
'.items ' |
|
background |
Required |
Background image/gradient. Should be valid background-image CSS property. Support multiple backgrounds. Must not contain vendor prefixes for gradients, they will be added automatically.
|
'url(image.png), linear-gradient(pink, violet) ' |
|
affectText |
Optional |
Specifies if background image should affect text instead of background. P.s. Works only at desktop webkit browsers. As fallback for mobile or other desktop browsers will be shown color specified in this property. See difference at Codepen . |
'black' | false |
opacity |
Optional |
Obviously gradient's opacity may be set by RGBA syntax. But if you are too lazy to convert HEX or RGB to RGBA, you might find this option useful. All HEX (short and long forms) and RGB colors of gradients specified in background option will be converted to RGBA with specified opacity. See difference at Codepen . opacity supports two types of input:
P.s. Works only with gradients, does not work with images. |
true or 0.2 | false |
Name | Params | Description |
---|---|---|
.update() |
String |
Updates background image (if passed) and process newly added tags (wraps content at mobile devices, adds classes). Update background example: |
.destroy() |
Destroys Multiple instance, removes classes, reverts layout to original state if was modified |
background-attachment: fixed
position: fixed
and clip: rect()
. I haven't chance to test it everywhere so if it doesn't work for you, create an issue and I'll update supported device list.Please note, this is experimental library so performance of page may be low because of usage of intensive CSS properties to achieve desired effects.
こんなに美しいレイアウトがシンプルなHTMLで簡単に実装できるスクリプト -Multiple.js | コリス https://t.co/90vxZs0J67
— webデザインあんてな (@webdesignsokuho) June 22, 2016
こんなに美しいレイアウトがシンプルなHTMLで簡単に実装できるスクリプト「Multiple.js」 (コリス)https://t.co/XuRceZh9dl
— dotHTML5 (@dotHTML5) June 24, 2016
Multiple.js - An experiment in sharing background across multiple elements using CSS https://t.co/6ELUU28NDd pic.twitter.com/1iJf53a0Wu
— Speckyboy (@speckyboy) April 22, 2016
I see you haven't read the entire "How it works" section.
How about spend a minute to check youself by answering questions there?
It's not that obvious as you may think!