のんべえの気まぐれ

日々の出来事やDIY、機械いじりを発信

透過波紋の集大成

いつも読んで頂きありがとうございます。

最近、透過波紋が盛況ですがLSSさんが中心位置変更版を出してきたので今までの波紋

を入れた作品を作ってみました。

透過波紋の集大成

 

 

背景画像に入れる透過波紋

透過波紋を入れる背景画像はこちらで背景色は白色。波紋は青系色。

透過波紋背景

波紋位置


赤枠内
は透過波紋中心位置変更版を設置

緑枠内はLSSさん版の水滴落下透過波紋を設置

青枠内は自己流水滴落下透過波紋を設置

 

透過波紋を設置する

透過波紋を好きな場所に設置する場合、position: relativeとposition: absoluteを使いま

す。普通は背景画像をposition: relativeで固定しますが設置する波紋が画像の上にある

場合重なりの関係で波紋が一番上となり画像が消えてしまします。今回は金魚の下に波

紋を設置したいので空枠の背景を固定し背景画像は一番最後に設置します。

 

赤枠内に中心位置変更透過波紋を設定

今回は空枠を背景としてposition: relativeで固定します。これで他に波紋を設置しても

枠が動かないようになります。枠の大きさはスマホにも合わせて幅をwidth:335pxとし

ました。次に波紋を空枠を基準としてposition: absoluteで位置を指定します。top:0px;

left:0px;と指定し左上に設置。

 

 

緑枠内にLSSさん版水滴落下透過波紋を設置

最初に設定した波紋の位置を基準としてposition: absoluteで位置を指定します。

top、leftともに0pxが基準なのでtop:20px; left:195pxと指定して設置。

 
 

 

青枠内に自己流水滴落下透過波紋を設置

青枠内の波紋は緑枠内に設置した波紋からの指定となります。左側に設置する場合は

left:-〇〇px;となります。top:20px; left:195pxからの距離でtop:95px; left:-80pxと指

定して設置。

水滴は青枠内に設置した波紋からの距離で水滴の大きさの設定にもよりますが端からの

距離で中心を設定するのでleft:70px;と指定。keyframesのbackground-positionでも調整

可能。水滴が落ちて波紋が広がるタイミングはkeyframesと秒数で調整となります。

 

 

 

最後に背景を入れて完成

波紋の配置が完了したら最後に背景を入れます。背景は水滴の位置からの距離となりま

す。top:-45px;left:-186px;で設定。枠に合わせるのに微調整が必要です。

一番最後に重ねるので画像の下に波紋が広がるようになります。

 
 
 

 

 

波と一緒に動かす

LSSさんの透過波紋の中心位置変更の記事のコメントでmioさんがこんなことを言ってい

たので浮き輪ではないですが作ってみました。

mio(id:mio20100501)

浮き輪で遊んでいる子供が波と一緒に動くってことが出来たら面白いですね。

 

 

 

 

最後に

透過波紋の集大成作品いかがでしょうか。

position: relativeで背景等を固定するとposition: absoluteで画像やテキストを好きな場

所に複数配置できるようになります。コードを組み合わせる時に使うと便利です。

複数使う場合はposition: absolute;の次にz-index:○○;を設定すると楽かもしれませ

ん。○○の数値が小さいほど一番下に配置されます。○○は1でも10でも構いません。

 

 

 

 

 

 

 

 

 

今回参考にしたブログはこちら。

【CSS】(トリッキーな方法で)透過波紋! - Little Strange Software

【CSS】水滴落下、からの透過波紋 - Little Strange Software

【CSS】透過波紋、中心位置変更【小ネタ】 - Little Strange Software

 

 

 

PVアクセスランキング にほんブログ村