KazIgu SandBox

作るぜー

CSSの画像エフェクト

SandBox

photoshopとかで乗算とかの効果が入っててふざけんなと思うこと、フロントエンドならあるあるですよね。 そのイライラ、解決されます。そう、IE以外のモダンブラウザならね サンプル(hoverで効果かかります) mix-blend-mode cssにはmix-blend-modeとかいうプロパティがあります。 持てる値としてはnormal,multiply,screen…めんどくさいのでggr とりあえずサンプル用意しました。 コード 必要な部分はこんな感じ html <div class="item"><img src="hoge"></div> .item { display: inline-block; position: relative; } .item:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; mix-blend-mode: overlay; background: radial-gradient(200px circle at 30% 10%, orange, rgba(255,255,255,0)), radial-gradient(300px circle at 80% 60%, red, rgba(255,255,255,0)); } .item img { width: 100%; } 画像同士を混ぜたりとか色味変えたりとかテキストに使ったり可能性は無限大! 個人的にはgifアニと混ぜるとかが好きだけどサンプルにはライセンスとかの問題で拾ったののっけにくいから個人で試してくださいな IEでは動きません。IEでは動きません。 どうでもいいことですが2回言っときました。

CSSでスライダー

SandBox

ネタがないので実用性ないけどcssでスライダー実装してみた サンプル めんどくさいので 以下略 気が向いたらちゃんと書く

CSSでのParallax

SandBox

LPの作成時などにパララックスがどーのとかが増えている。 jsを使って実装することが多いのだがスクロールでのイベントになるのでパフォーマンス意識しだすと案外めんどくさい。 しかもパララックスの時ってデザイナーがこだわって調整することが多いからプラグインだと不便なこともしばしば でもラクに実装したい!! サンプル cssでパララックス!! ただ単に奥行きが欲しいだけならperspectiveとtranslateZを使うことでcssでも実現出来ます。 IE8??知りません。 IE10からなら動くはずです。 とりあえずサンプル用意しました。 コード 必要な部分はこんな感じ html <div class="container"> <div class="layer01">レイヤー 1</div> <div class="layer02">レイヤー 2</div> <div class="layer03">レイヤー 3</div> <div class="layer04">レイヤー 4</div> </div> .container { perspective: 100px; height: 100vh; overflow-x: hidden; overflow-y: scroll; } .layer01 { transform: translateZ(-100px); } .layer02 { transform: translateZ(-50px); } .layer03 { transform: translateZ(0); } .layer04 { transform: translateZ(50px); } サイズも距離に応じて変わるけどそれが嫌ならscaleで調整するといい感じになりります。 パフォーマンスもいいし階層増やせまくれるし横スクロールでもちゃんとなるからオススメ