Tag : CSS

- 133 Articles -

CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション

Read Article

CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション

ファーストビューで大きめのイメージやムービーなどを配置しているサイトでよく見る、次セクションへスクロールするよう促すラインアニメーションをCSSで表現したサンプルです。以前にもスクロールを促す要素として矢印・サークル・マウスなどをCSSで表現する実装コードを紹介しましたが、最近はこのタイプの実装要望が多いので自分用に一覧化したものをシェアします。

  • Tips
スタイル作成の時間短縮や勉強にも使える、CSS関連の便利ジェネレータ 20

Read Article

スタイル作成の時間短縮や勉強にも使える、CSS関連の便利ジェネレータ 20

用意された項目を数値入力や操作していくだけで簡単に見栄えが再現でき、必要なCSSコードなどを出力してくれるCSS関連のジェネレータのまとめです。CSSが苦手な人は上手く利用すればスタイル作成の時間短縮になりますし、CSSを勉強中またはこれから勉強しようと思っている人の学習ツールとして使えるものもあります。

  • Services & Resource
HTMLとCSSで表現するセパレータを生成できるジェネレータ「CSS Section Separator Generator」

Read Article

HTMLとCSSで表現するセパレータを生成できるジェネレータ「CSS Section Separator Generator」

「CSS Section Separator Generator」は、セクションの区切りを示す際などに配置するセパレータをHTMLとCSSで表現するコードを生成してくれるジェネレータです。サイズや位置などのオプションも用意されており、斜め・波・ギザギザなど種類も複数用意されています。

  • Services & Resource
CodePenで公開されている、Neumorphism(ニューモーフィズム)の見栄えを取り入れたデモ 20

Read Article

CodePenで公開されている、Neumorphism(ニューモーフィズム)の見栄えを取り入れたデモ 20

新たなデザイントレンドとして特に海外では去年の年末ぐらいから注目されているNeumorphism(ニューモーフィズム)を取り入れたデモを、CodePenで公開されている中からいくつか紹介します。実装・デザイン時のポイントとなるシャドウの使い方はもちろん、ボタンならhover時とactive時、フィールドならfocus時といったようにデモによってはユーザーの行動に応じて見栄えを変化させているものもあ…

  • Tips
CSSで複数行に対応したアニメーション付きアンダーライン(下線)を実装する方法

Read Article

CSSで複数行に対応したアニメーション付きアンダーライン(下線)を実装する方法

ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。1行・複数行関係なく使えるアニメーション付きアンダーライン(下線)を実装したい場合は、以下のように`linear-gradient()`と`background-size`を組み合わせること…

  • Tips
イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル

Read Article

イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル

要望があってサンプルとしていくつか作ってみたのをシェアします。パッと見は1枚のイメージなのですが、そこにホバーすると複数枚のイメージがあるように見せるアニメーションをCSSで実装したものです。リンク先でイメージが複数枚あるとかクリックすると複数枚表示するイメージモーダル(ライトボックス)が開くのを伝えたいときに使えるかと思います。

  • Tips
CSS Snippets #7

Read Article

CSS Snippets #7

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介します。以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという…

  • Tips

Close the search window,
please press close button or esc key.