【CSS3活用】こんなデザインのサイトは嫌だ!

CSS(スタイルシート)はWEBサイトを装飾するための言語で、通常はWEBサイトを読みやすく美しくするために使われます。
しかし、逆にCSSを活用して読みにくくウザいWEBサイトを作ることもできます。次の動画は以前Twitterで公開した色が激しく変化するWEBサイトです。
【観覧注意】「こんなサイトは嫌だ!」ということで、色が激しく変化するWEBサイトを作ってみました。一応色の変わる周期は落としてありますが、心臓の弱いかたは見ないほうが良いです。 pic.twitter.com/15LK0oKcoU
— ポクくん (@poku_kun) 2017年10月26日
今回はそんなCSSを使った嫌なサイトのデザインをいくつか考えたので、紹介したいと思います。
こんなデザインのサイトは嫌だ!
主に近年浸透してきたCSS3を活用しています。実際に試してみたい方はPCのChrome等の開発者ツールを使うと良いです(@keyframes系以外)。
サイト全体が左右反転
シンプルですが、サイトはかなり読みにくくなります。


html {
transform: scale(-1, 1);
}
サイト全体が上下反転
ディスプレイごと上下反転すれば、何とか読めます(笑)


html {
transform: scale(1, -1);
}
サイト全体を縮める
スクロールが面倒くさいので、サイト全体をY軸方向に縮小させてみました(笑)


html {
transform: scaleY(0.3);
transform-origin: 0 0;
}
サイト全体が傾く
まさに斜め上を行くサイトです。


html {
transform: rotate(45deg);
}
サイト全体が階調反転
CSSフィルターは主に画像向けのプロパティですが、サイト全体に適用することもできるようです。


html {
filter: invert(100%);
}
サイト全体をぼかす
ぼかす量を大きくすると、文字を読めないどころか概要すら分かりません。


html {
filter: blur(10px);
}
サイト全体が振動する
@keyframesを使うと、自由自在なアニメーションが可能となります。試しにサイト全体を振動させてみました。


※長く見続けると気分が悪くなるので注意
html {
animation: shindou 0.15s infinite;
}
@keyframes shindou {
0%{transform:rotate(0deg) translate(0,0);}
12.5%{transform:rotate(1deg) translate(2px,-2px);}
25%{transform:rotate(2deg) translate(0px,2px);}
37.5%{transform:rotate(1deg) translate(-2px,0);}
50%{transform:rotate(0deg) translate(0,0);}
62.5%{transform:rotate(-1deg) translate(2px,0);}
75%{transform:rotate(-2deg) translate(0,2px);}
87.5%{transform:rotate(-1deg) translate(-2px,-2px);}
100%{transform:rotate(0deg) translate(0,0);}
}
サイト全体が回転する
3D的な表現を行うこともできます。サイト全体をY軸を基点として回転させてみます。


html {
animation: kaitenY 1s linear infinite;
}
@keyframes kaitenY {
0% {transform:rotateY(0deg);}
50% {transform:rotateY(180deg);}
100% {transform:rotateY(360deg);}
}
サイト全体がフラッシュする
実際にこの部分で実行させてみました。
html {
animation: flash 1s infinite;
}
@keyframes flash{
0% {opacity:0.3;}
100% {opacity:1;}
}
ポクくんのまとめの一言
今回紹介したことはエイプリルフールのネタぐらいにしか使えませんが、部分的に工夫して用いれば、より印象のあるサイトづくりに役立つかもしれません…
コメント
Please enable JavaScript to post your comment.