【CSS】切り替えのアニメーションがクールなナビゲーション・メニュー
シングルページの構成で、ナビゲーションのアイコンをクリックすると。クールに切り替わるアニメーションがjavascriptを使わないCSSのみで作られたページデザイン、スムーズなアニメーションとクール
【CSS】背景の色が少しズレた印刷チックなボタンのデザイン
CSSのみで作られたボタン。印刷のズレ的なデザインのボタンでマウスオーバーすると、ズレの部分がアニメーションして戻るようになっている。コミック調のデザインのメニューボタン等に使うとしっくり来るのではと思います
CSSのみで作られた3Dに回転するかっこいいフリップギャラリー
CSSだけで作られた、マウスオーバーするとクルッと回転するエフェクトを実装できるコード。表と裏面に違った画像が設定できるギャラリースタイルとなっている
CSSのみで作れるグラデーションが変化するフラットデザインのボタン
CSSのみで作られたクールでフラットなボタンのデザイン。ボタンの縁にはCSSのグラデーションが使われており、またそのグラデーションがアニメーションで変化するようになっている
CSSで作られた、かわいいデザインのボタン 10種
CSSでオシャレでかわいいボタンのデザイン。CSSだけで作られており画像は使われていない。ボタンにはそれぞれ背景の色があるのでその色を参考にしたデザインのウェブサイトにするといい感じに出来る
ぷにっと感がたまらない ローディングに使えるCSSアニメーション
ぷにっと、ピョンピョン跳ねる感じが和む、CSSで作られたアニメーション。ローディングなどの待ち時間の表示に使えば和める
マウスオーバーでラインが動くようなアニメーションのボタンを実装出来るコード
マウスオーバー時のアニメーションをグレードアップする、ラインが動くアニメーションを実装出来るコード。CSSのアニメーションだけで出来ているので使い勝手の良いコードです。
ペーパー的な立体感がある、CSSで作れるtext-shadowを使ったタイポグラフィ
CSSを使ったタイポグラフィ。画像を使わずに、CSSだけで立体的な文字を表現する方法です、ポイントはtext-shadowに複数の値を設定することでより立体的な質感を出すことが出来ます
CSSで作ったボタンなどを押していると、テキスト等が選択状態になってしまうのを防ぐ user-select
テキストの選択状態になってしまうのが邪魔な場合に、CSSをつかって テキストの選択が出来ないようにする方法
スクロールで色が流れ込む演出を作るアイディア – Icons Filling Effect
スクロールに合わせて アイコンに色が注入されていくような演出を実装するアイディア
背景がスクロールに合わせて少しづつ動く ワンランクアップのパララックス
CSSで背景を固定した要素とそうではない要素を組み合わせてパララックスにすることがあります その場合は background-attachment の fixed か scroll かの違いをうまく使い分けて行います & […]
要素や画像を好きな形に、四角、丸、楕円、多角にトリミングができる CSSのclip-pathのまとめ
以前、clip-path を使ってpolygonで多角形にくり抜く方法を紹介しましたが 今回は、それ以外にもある 丸、楕円 を紹介 (四角形系もありますが 再現出来なかったので今回は省略) 以前紹介したもの […]
自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う
CSSで画像の切り抜きをする SVG の ClipPath で polygon というものがあり 3点以上の座標をX点とY点で指定することで、その領域を切り抜くことが出来ます 画像編集ソフトでクリッピングするようなもので […]
【簡単】コピペで設置 Feedlyの購読者数のカウントボタンを作る
Feedly の高読者数を取得して表示し FacebookやTwitterの様に、カウントを表示したボタンを作る方法
CSSのぼかし(blur)のテクニック ～filterを使う方法とfiterを使わない方法～
最近気に入っているのが、CSSを使ったブラー・ぼかしを与える効果 いろいろな演出に利用出来ます 単純にCSSにあるfilterを使ってblurを掛ける方法と テキスト限定ですが、filterを使わずにblu […]
要素の角に斜めのリボンをテキストが常に中央に来るようにする方法(工夫)
HTMLで角にリボンをつけてやるときに、テキストが常に中央になるようにする工夫。一定の条件を守れば、常に45度のリボンに出来る
CSSのcontent: “”;に動的に、attrを使ってHTMLのdata-から文字を取得して入れる方法
CSSのcontentに動的に文字を当てはめることが出来るattrの使い方、動的に生成されるHTMLと相性がよく、IE8以上から一応利用することが出来る
文章の目隠しをし、それを解除するのにCSSのアニメーションを巧みに使った アイディア
ネタバレ防止の目隠しのアイディア。文字を透明にして、文字の影だけを表示するだけで まるでボカシを書けたかのように表現するテクニックと、アニメーションによる解除が秀逸
紙のような、質感を出す 影を使った 浮き上がったり、めくれたりするのを表現したボタンのデザイン
紙のようなボタンを作成するコード、うまく影を使い立体感を演出し。マウスオーバーで動きを加えたボタン。 リアルな質感が素敵
CSSだけで作られてスライドインしてくるアニメーションがあるシンプルなドロップダウンメニューが作れるコード
スライドインしてくるエフェクトがついた、多層型のドロップダウンメニューを作るコード。ドロップダウンメニューを作るときの参考のコードにも
