2018
09.18

CSS3に魅せられる♪ 最新の表現方法とトレンドをマスター!

CSS3

前回は、WEBデザイナーがよく使うソフトウェアについて書きました。

私自身は新しいソフトウェアにお金をかける前に、無料でできるソースを学びたい! という気持ちが強いので、今日はCSSで素敵なエフェクトをつけるソースを見つけたので紹介したいと思います。

舞台のカーテンを開くような仕掛け

WEBページ上を舞台と見立てて、WEBページをユーザーが訪れた時に、はじまりはじまり〜とカーテンを開くようにするというものです。

遊び心があって楽しいですね ♪

早速取り入れてみましたが、とってもカンタンに出来ました!

サンプルデモ1:  Bon Voyage
サンプルデモ 2 :   Bamboo’s Lament

HTML

CSS

ソースの中身をよくみてみると animation : curtain_l s というほぼ 単語ひとつともいえる文字列を2ブロックで、指定することが出来ています。

webkit ~ というのはベンダープレフィックスという、Webブラウザに対応させる為に必要で、

ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。

HTMLクイックリファレンスより

 

2ブロッックというのは beforeとafter ですね。 ↓

#wrap::before{
left: 0;
animation : curtain_l 3s;
-webkit-animation : curtain_l 3s;
}
#wrap::after{
right: 0;
animation : curtain_r 3s;
-webkit-animation : curtain_r 3s;
}

 

参考元サイト : https://webutubutu.com/category/webdesign

 

デキるWEBデザイナーには遊び心がある

イラストレーターやフォトショップでは出来ない効果が、ほんの2分で出来るのも、CSSの素晴らしいところですよね。

遊び心は大切です。WEBデザイナーは仕掛人になってユーザーにいかに楽しんでもらうかを考えてこそです。エンターテイナーになることが大切です。

ブログやサイトに居心地のよい演出を施して、長時間滞在してもらい、楽しませてあげる。

そして決して忘れてはならないのが、上司も後輩もみんなが見ているという意識。

細やかな気配りがいる、素敵な仕事ですね。私も新たに意欲がわいてきました♪

 

最後までお読み頂きありがとうございました。



コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。