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

Tweet

238

元は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をするかリンク先で見れます

Tweet

短縮URL:

2014年01月22日 WEB制作系 コード・プラグイン CodePenCSS