Result
ちょうど100のパターンがあります。イラストのようなパターンもありますが全てCSS製となっています
この手のものは最近ではSVGが主流となっていますので需要は高くはなさそうですがCSSの応用として学習用に良い気がします
css
:root { --ambrosia: #FCDBBA; --apricot: #FF8652; --aubergine: #6A2352; --auburn: #A12F2F; --asparagus: #A0C259; --beetroot: #7F0421; --blue-tack: #82BFE0; --bloom: #363A57; --blush: #D67B71; --bronze: #C27940; --trans: transparent; --trans05: rgba(255,255,255,0.05); --trans1: rgba(255,255,255,0.1); --trans2: rgba(255,255,255,0.2); --trans4: rgba(255,255,255,0.4);} |
カラーはカスタムプロパティで管理されています
あとはrepeating-radial-gradientを中心に設計されています
html
<div class="overlapping-shields"></div> |
全て単一の要素のみで構成されています
can i use
repeating-radial-gradientのブラウザ対応状況です。概ね問題なさそうですね
