世界の国旗をCSSとdivのみで実装する「CSS Flags」
世界各国の国旗をCSSとdivで表現する「CSS Flags」のご紹介。シンプルなデザインから複雑なデザインまで、CSSで描画したい時など参考になります。
CSS
CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
CSSで三角形を作りたい時に便利な三角形ジェネレーター「CSS Triangle Generator」の紹介です。最短で理想な三角形を作れるよう工夫を凝らしたジェネレーターです。
コピペで使えるCSSアニメジェネレーター「WAIT! Animate」
14種類のCSSアニメーションのコードを生成してくれるCSSアニメジェネレーター「WAIT! Animate」の紹介です。アニメーションの具合を確認しながら設定できるがGOOD！
【CSS】スターウォーズのイントロを表現できるライブラリ「starwarsintro.css」
スターウォーズでおなじみのスクロールテキストを実装することができる軽量なCSSライブラリ「starwarsintro.css」の紹介です。
【CSS】フォントサイズの単位を相対比較できる「PXtoEM.com」
ベースになるフォントサイズを指定すると、px・em・%・ptと単位ごとに比較一覧することができるWebサービス「PXtoEM.com」のご紹介。
様々なホバーエフェクトを実装できる「imagehover.css」
多くのサイトでよくみられる画像をマウスオーバーさせた時のエフェクトが40種以上も用意されているCSSで作れられたエフェクト集「imagehover.css」を紹介します。
レスポンシブのチェックに役立つサービス「Resizer」
Googleが「Resizer」なるサービスを公開したので備忘録。ブラウザ・スマホの画面サイズでどうサイトが表示されるかをチェックしたい時に最適なサービスです。
CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
カーソルの種類と対応ブラウザを確認することができるサイト「CSS Cursor」のご紹介。
【html】文字実体参照を一覧できる「html arrows」
文字実体参照(特殊文字)をリスト化してるサイト「html arrows」の紹介。文字が大きく表示され見やすくCSSコードもあり重宝しそうです。
【CSS】CSSだけで作られた簡単に使えるアイコンセット
矢印・メニューボタン・チェックマークなど、レスポンシブデザインにも使えるCSSだけで作られたアイコンセットを提供しているサイトをご紹介。
【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
animate.cssと併用してクリック・マウスオーバー・スクロールなどのイベントで簡単にアニメーションを実装できる「AniJS」が便利そうなのでメモ。
バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
レスポンシブWebデザインなどのグローバルメニューで使えそうなアニメーションで切り替わるボタンを生成できるジェネレーター「Transformicons」の紹介です。
SVGで作成されたローディングアイコンセット「SVG Loaders」
CSSやJavaScriptを使用しないで簡単に実装できる、SVGで作られたフラットデザインの超軽量ローディングインジケーター「SVG Loaders」を紹介します。
コピペするだけで使えるCSSボタンジェネレーターまとめ
フラットなボタンから、グラデーションをかけた立体感のあるボタンまで、デザインをしてコピペするだけで使えるCSSボタンジェネレーターを厳選して10サイト紹介します。
