yomotsuのブックマーク - はてなブックマーク

コピペで楽々、CSSでできるボーダーアニメーション５選

CSSでボーダーをアニメーションさせるのは意外と難しいもの。幅や色のような単純な動きは別として、より複雑なアニメーションは他の選択肢を必要なケースがしばしば。この記事ではCSSのborderプロパティを使わずにできる、”フェイク”ボーダーやアウトライン、さらにはSVGを使ったアニメーションの例を5つご紹介します。最新Webデザインでもよく見かけるテクニックです、ぜひ活用してみましょう。これらの例のHTMLはすべて、外側の.card divと内側の.inner divから構成されています。詳しくはデモを参照してください。

yomotsu 2024/04/08

リンク

動きで魅せる！Web制作の参考UIインタラクション、アニメーション38個まとめ

この記事では、ウェブデザイン制作の参考にしたい、刺激的な最新UIインタラクション、アニメーションをまとめてご紹介します。ユニークでクリエイティブなアイデアが満載の素敵アニメーションが揃っており、今後のウェブデザインがますます楽しみになる、未来を感じるデザインを中心に集めています。最新ウェブデザインも一緒に確認することで、デザイントレンドや動向をうまく掴むことができます。 Webアイデアの宝庫！注目したい最新ウェブデザイン35個まとめ Web制作の参考アイデアに！いま話題の最新ウェブデザイン50個まとめ Web制作参考アイデア集！話題の最新ウェブデザイン40個まとめ前回のまとめはこちらからどうぞ。動きが新感覚！Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ動きで魅せる！Web制作の参考UIインタラクション、アニメーションまとめ GoSurf Website

yomotsu 2020/08/03

リンク

ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度

思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。詳細は以下から。ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ Fixed Disappearing Scrolling Header スクロールすると表示されている文字テキストがフェードアウト