Lordicon is a powerful library of carefully crafted animated icons, ready to use in digital products, presentations, or videos!
![Icons - Lordicon](https://cdn-ak-scissors.b.st-hatena.com/image/square/5e3e2d25479d7cc07b949fe7d57baf107d4da21d/height=288;version=1;width=512/https%3A%2F%2Fmedia.lordicon.com%2Fassets%2Fpictures%2Flordicon.gif)
CSSで使えるおしゃれすぎるボタンデザインをまとめてみました! codepenから引用しています おしゃれすぎるプロのボタンデザイン・アニメーションまとめ! コピペで実装 工夫の仕方がプロ! こだわりが強いアニメーション付きボタンを集めました シンプルながらも個性的なものなので、取り入れやすくユーザーにインパクトも与えやすい! 王道とローディング 一見、よくあるボタンだけど、クリックすると… See the Pen animation submit button by Valentin Galmand (@valentingalmand) on CodePen. あっちからきたりこっちからきたり いろんなホバーアニメーションが楽しめます! どれもすごい… See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.
CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。 コードを見ながらサンプルを確認することができるので、先日まとめたテキストエフェクトを含む、アニメーションを得意とした最先端のデザインテクニックを、今後のウェブデザイン制作に活かしてみてはいかがでしょう。 詳細は以下から。 CSS3の新しい可能性!美しいテキストエフェクト用コードスニペット24個まとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 Collection of Button Hover Effects CSS3で表現された、実践的に使えるボタンデザイン5つを収録していま
See the Pen 9-4-1 SVGアニメーション(vivus.js) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね! 動きを実現する仕組み 仕組み ⇒ SVG形式のベクターデータを利用して、CSS、JavaScriptを使って動かす。 長所 ⇒ 拡大縮小しても画質が劣化しない。 短所 ⇒ 制作ソフト、もしくはプログラムの知識が必要なので、導入にひと手間かかる vivus.jsというライブラリを使用して、SVG形式で書き出されたイラストやアウトライン化されたテキストを描画する。 ※サンプルではアウトライン化したテキストをアニメーションする。 サンプル9-4-1(※サンプルデータ:https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/
CSSでborderが伸縮させるアニメーションのパターンサンプル集です。 このページでは、テキストの下線として表示するborderとして紹介していますが、ボーダーのみの要素作成などの場合も基本は同じですので応用はしやすいかと思います。 また、幅と高さ、背景色を利用して要素そのものをボーダーとして表現する方法などもありますが、このページでは紹介していません。 borderの長さを調節する基本borderプロパティは、borderを指定した要素のwidthがその長さとなります。 例えば、displayプロパティがblockなどの要素では100%となり、displayプロパティがinlineの要素では他の要素がない限り0pxとなり表示されません。 borderの為に要素のwidthを可変すると、テキストなどの他の要素の表示領域にも影響するため、0または短い横幅を指定すると表示できなくなってしまい
動的なWEBデザインは今では当たり前。 ただ実装しようと思うとサイトが重くなってしまったり、ゴチャゴチャしたりしてしまいますよね。 そこで今回は軽量かつ、シンプルでオシャレな実用的な動く背景CSSをご紹介します。 ぜひ自身の制作するサイトに組み込んでみてはいかがでしょうか。 ホタルが飛ぶアニメーション背景CSSSee the Pen CSS Fireflies by Mike Golus (@mikegolus) on CodePen. グラデーションの色が変化するアニメーション背景CSSSee the Pen Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen. 動く方眼アニメーション背景CSSSee the Pen Pure css infinite background animati
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く