404エラーをtext-shadowとanimationを使って壊れかけのネオン管で表現したアイディア

404エラーをtext-shadowとanimationを使って壊れかけのネオン管で表現したアイディア
このエントリーをはてなブックマークに追加
PR

元はjavascriptでどうさせるものでしたが、CSSだけで動かせるように改良されたものです

No Vacancy 404 CSS Only

http://codepen.io/Zeaklous/pen/dIomg

こちらはCSSだけで作られたバージョンです

 

 

No Vacancy 404

See the Pen No Vacancy 404 by Riley Shaw (@rileyjshaw) on CodePen.

http://codepen.io/rileyjshaw/pen/ufEIH

こちらは元ネタで、javascriptでチカチカ動作させています

 

フォントが違う場合
WEBフォントを使っています。該当のフォントがPCにインストールされていると画像のように表示されます
同じようなフォントにしたい場合はGoogleのweb fonts を使うっと出来ます

こちらのフォントになります
http://www.google.com/fonts#UsePlace:use/Collection:Monoton

これをHTMLのhead内に入れます

<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>

 

チカチカしてなくても、ネオン管を表現したのは応用できますね
このまま404ページに使ってしまってもよさそう
動いていない場合は、画面に出るRERUNをするかリンク先で見れます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)