officehojoのwebサイトを少しだけデザイン変更しました。自分のサイトはいろんなエフェクトを試す実験台として最適なので、気分次第で色々とテストデザインをしていきたいと思っております。まずはエンボス風のデザインをCSSで作る方法から。
目次
CSSでテキストにエンボスをかける
↓こちらの「16. Plastic Text CSS」を使わせていただきました。
【CSS】CSSだけで実装できるハイセンスなテキストエフェクト30選！
テキストのエンボスはtext-shadowで出来る
少し見えにくいですが、エンボス実装後はこんな感じです。
後ろにちらっと見えているのが「OFFICEHOJO」のエンボスです。PCでは広さが確保できるので面白いですが、スマホだとかなり邪魔なのでdisplay:none;で消しております。
私は<h2>でofficehojoを囲み、class名をふっておいて、cssのposition:fixedで最背面に固めています。こうすることで後ろは動かず、手前のポートフォリオ写真だけスクロールできるようになります。
実際のコードはこんな感じ。
h2{
position:fixed;
z-index: -100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-transform: uppercase;
font-family: 'Nunito', sans-serif;
font-size: 10em;
color: transparent;
letter-spacing: 0.1em;
text-shadow:
0 0 2px rgba(242, 242, 242,0.9),
0 15px 25px rgba(0, 0, 0, 0.3),
0 -2px 3px rgba(0, 0, 0, 0.1),
0 -5px 10px rgba(255, 255, 255, 0.5),
0 5px 10px rgba(0, 0, 0, 0.3),
0 3px 4px rgba(255, 255, 255, 0.2),
0 0 20px rgba(255, 255, 255, 0.45);
}写真が動く速さとか、スクロールしていく楽しさとなどが生まれて面白いです。”移動している”ということを楽しめるエフェクトだと思います。rgbaのカラーコードを変えると色んなカラーのエンボスが可能なので、色々テストしてみてください。
こちらのブログのトップページにあるブロックカードにもCSSでエンボスエフェクトをかけました。
ボックスに対してはbox-shadowを利用。コードはこんな具合で。
.block{
box-shadow:6px 6px 12px #b8b9be,-6px -6px 12px #fff;
border:1px solid #e9eaf1;
border-radius:10px 10px;
padding:25px;
} 2020年は結構トレンドの予感です。
このエンボス加工を利用して、サイトをリニューアルしてみました。エンボスボタンのコードも載せてます。
Webサイトのデザインを変更（スケルトンレイヤー&ニューモーフィズム） – freespace
そして、その他の気になるエフェクトも少し紹介します。（【CSS】CSSだけで実装できるハイセンスなテキストエフェクト30選！から抜粋）
CSSで作る「スイスのグラフィック（ポスター）デザイン風」のテキストエフェクト
「2. Text effect with blend modes: Swiss design」のエフェクト。少しレトロな雰囲気ですが、ここ数年流行っているっぽいです。イエロー、レッド、ブルーの3色を使い、乗算して色の重なりを楽しむデザインです。日本というよりは、海外受けな感じがします。
ネオン管風デザインのCSSエフェクト
「28. Neon Text CSS Animation」のエフェクト。こちらも数年前から流行ってるネオン管テキスト。プラスチックと同じくtext-shadowですね。イラレで作る場合はぼかしで表現しますね。基本的にエフェクトは「どう描写するか」を「コードで探す」という感じです。ネオン管のデザインはぼかしの幅と透明度が重要です。
ゲームのようなCSSエフェクト
「30. Animated text fill with svg text practice」のエフェクト。一定の間隔で5色のアウトラインがぐるぐる回っています。すごい可愛い。これは使いたい！と思ったのもつかの間、scss。。私の勉強がまだscssまで行き届いておらず、待ったがかかりました。scssも勉強しないといけないなと思いながら、そのまま放置状態です。。。
※sass…変数が使えるcssの進化版。記述方法はプログラムのよう。scriptのように使える（らしい）←まだ勉強途中。
CSSアニメーションで作る「立体的な雲のエフェクト」
雲がもくもくと動くアニメーション。見ているだけで癒されますね。カーソルの動きに合わせて360度回転します。まるで空の中にいるかのようなエフェクト。たまに仕事の合間に自分でいじって目の保養に使っています。笑
まだまだいっぱい転がっているエフェクトとアニメーション
webデザインのいいところは、オープンソースが豊富にあるということ。誰かが開発したプログラムを公開し、さらに誰かがそのコードを書き換え、より良いものを生み出そうとするGithubのシステムもWebならでは。グラフィックなら基本的に加工を加えるのはNGです。
また、助け合いができる質問サイトも多く存在することもWebデザイナーが生まれやすい一因なのかなと思います。
ちなみにグラフィックデザインにも老舗の質問サイトは存在します。まだスマホがない時代にみんなが使ってたDTP駆け込み寺の掲示板ですね。
映えるWebフォント8選【タイトルに使えるおしゃれなフォント】 – freespace
