SVGをbase64(URIスキーマ)のコードに変換してくれるコード 『SVG-encoder』
SVGの画像データをbase64の画像データに変換してくれるものです コードをPaste SVG code に貼り付けるだけで、即座に下の方に Take Code に表示されます javascriptを使ってクライアントサイドで変換の処理が行われています
CSSのcounterを使ってlist表示の数字をオリジナルのものに変更するデモ 『Decorated Numbered Lists』
リスト表示の際に表示される番号 これをCSSのcounterを使って、独自のものに置き換えたものです この方法を使うことによって、幅広いデザインが可能になります
CSSだけで作成、シンプルなコードでグラフィカルな画像ギャラリーを作るコード 『CSS/HTML Only Carousel』
左右に表示されるサムネイルをクリックすることで、隣の画像を大きく中央に表示させる画像ギャラリーです CSSだけで作られており、さらにコードもとてもシンプルです
丸いエリアに写真とテキストがリンクして表示される少し変わったデザインのスライダー
特徴的なスライドのデザインです、写真とテキストをリンクさせて表示させています テキスト部分は実際には画像に置き換えられたもので、すべて画像で行われています
ボタンをクリックで、要素がクルッと半回転して裏面になるメニューが表示されるデザイン 『Responsive 3D Flip Navigation』
裏面のナビゲーション(メニュー)部分は レスポンシブ対応となっています メニューを隠してスッキリしたウェブデザインに使えるテクニックかと思います
3Dに重ねて表示されたエレメントをクリックで最前に並び替えるコード 『Map portfolio』
3Dに整列されたDIV要素をクリックする事で手前に持ってくるものです 後ろに並ばされているものは、順序が維持されます
ハイクオリティな良質なデザインの404ページ 『CSS3 Custom 404』
かなりクオリティーの高い404ページのデザインです このまま利用するには少し、コードの一部に変更が必要ですが あとは一部を日本語に置き換えてやれば即使えそうです
本格的なCSSのグラデーション20個 コピで使えるコード 『Gradients & Colors』
20種のグラデーションがあり、最近のおしゃれなウェブサイトで使われているような グラデーションになっています
WEBサイトに来た時に簡単に LocationとIPアドレスを表示させるスクリプト 『geolocation + ip + postal code』
サーバーにアクセスしたロケーションとIPアドレス、郵便番号を表示させるシンプルなコードです
404ページも楽しくなっちゃう ロボットが出迎えてくれるデザイン 『Sovog 404 page』
ロボットのキャラが、へんてこな踊りをしているのを404ページとして作ったものです
バック・トゥ・ザ・フューチャー2で出てくる ホバーするスケートボードをCSSで作ってしまったもの Hover Board
背景の光等は画像を使って表現されているのですが、ホバーボード自体はCSSで作られています CSSでこれを作ってしまうなんて私には真似できません
CSSでジグザグな背景を作るのに参考になりそうなコード ZigZag edges
上下のジグザグなところは、CSSの背景を使って表現されています グラデーションを表現するinear-gradientに角度を付けることが出来、それを利用してジグザグにしています
SVGを使った キラリとひかるアニメーション効果 「Animated shiny button, using SVG」
SVGの画像でanimateTransformを使って、キラリと光る効果を与えています
1つのDIV要素で作られたブラウザのロゴ 「Browsers」
safari、firefox、Chrome、IEの各ブラウザのロゴがひとつのHTML要素 DIV一つで作られています
目隠しされたなめらかな・スムーズに現れるナビゲーションメニュー 「Menu」
右上の三本線 burger を押すと、メニューが上から現れます 出現するときに滑らかなアニメーションで出てくるのが良い
CSSでrotateしたグラデーションにジャギーが出来るのを改善する方法 「Fixing a bad render in Webkit」
CSSで背景をグラデーションにしたものを rotateで傾けた場合に現れるギザギザに表示されるのを解決する方法です
マウスポインターに合わせて反応する かわいいHTMLモンスター 「Smiley guy」
Smiley guy By Eli Fitch マウスポインターに合わせて目線が動くかわいい男の子を表現したものです クッキーモンスターっぽいので、HTMLモンスターって勝手に名づけました GIFアニメ & […]
HTML要素一つでつくられた ブリーフパンツ 「Underpants – One Element」
ブリーフを一つのHTMLエレメントにCSSで装飾することでブリーフを作ちゃってます 二つ目の方は、2要素で作成されています
完成度の高いダウンロードリンクボタンのデザイン 「3D Download Button w/ Meter Progress」
アイコン、3Dの回転、ダウンロード中とCSSアニメーションをうまく使ったダウンロードボタンのデザインです 完成度の高いボタンになっています
フォントを重ねて比較して表示する
2つのフォントを重ねて、見比べることが出来るデモです またベースラインとレタースペース(文字間隔)の調整も見れます
