コピペで動く!CSSで書かれたおしゃれなモーダルウィンドウ4選!


スマートフォンでは、次のページを表示させるにも少し時間がかかってしまいます。そこでページに飛ばずとも新たに情報をそのページ内に浮かび上がらせるデザインをモーダルウィンドウと言います。ここでは、Codepenというサイトで書かれたおしゃれなモーダルウィンドウを厳選して紹介します。ぜひご覧ください。

1.Modal Animations

See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.

2.Responsive Modal Design

Stylusで書かれているためコピして動くかは試しておりません。

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

3.Motion Blur Experiment

Stylusで書かれているためコピして動くかは試しておりません。

See the Pen Motion Blur Experiment by Lucas Bebber (@lbebber) on CodePen.

4.Flipside

とてもすごいな動きをするモーダルです!コピペすると同じ動きをします。

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

5.Metro UI animations

シンプルに美しく現れてるモーダルです!アイコンも綺麗なところが良いですね。コピペすると同じ動きをします。

See the Pen Metro UI animations by Marius Balaj (@mariusbalaj) on CodePen.

6.·•● Bubble • Layout ●•·

実はこれは球体の色によって種類の違うモーダルが出てきます!canvasで書かれています。

See the Pen ·•● Bubble • Layout ●•· by LegoMushroom (@sol0mka) on CodePen.

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です