404ページも楽しくなっちゃう ロボットが出迎えてくれるデザイン 『Sovog 404 page』

WS002410
このエントリーをはてなブックマークに追加
PR

Sovog 404 page
By Marco Barría

DEMO 表示

robot 404 b

ロボットのキャラが、へんてこな踊りをしているのを404ページとして作ったものです

SVGで作られたロボットのパーツをCSSのアニメーションで動作させることでロボットが踊っているかのようアニメーションになっています

ロボットばかりに目が行きがちですが 404の文字も綺麗に出来ています

このままサイトの404ページに使っても良さげですね

 

文字のところの CSSのデザインはこのようなコードになっています

.col {
  text-align: center;
}
.col h1 {
  text-shadow: 0 3px 0px #404853, 0 6px 0px #333333;
  color: #f54f59;
  font-size: 6em;
  font-weight: 700;
  line-height: 0.6em;
}
.col p {
  color: #ccc;
  font-family: monospace;
  font-size: 0.95em;
  font-weight: 300;
  line-height: 7em;
}

 

このコードは一式ダウンロード可能です

Download Zip
PR

COMMENT

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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