Tag : CSS

- 123 Articles -

Pure CSSで様々なタイプのツールチップを表示できる「Tootik」

Read Article

Pure CSSで様々なタイプのツールチップを表示できる「Tootik」

「Tootik」はツールチップを実装することができるCSSライブラリで、動きや見た目などすべてCSSで実装されています。表示位置、矢印表示の有無、カラー指定、フェード表示など用意された数種類の動きと見た目を組み合わせていく感じで、カスタムデータ属性を記述するだけで実装できる手軽さも特徴です。

  • Tips
CSS:分割されたマスクがパラパラと表示されるクールなホバーエフェクト

Read Article

CSS:分割されたマスクがパラパラと表示されるクールなホバーエフェクト

CSSを使用して表現したかっこいいホバーエフェクトやボタンデザインを多数作成・公開している「LittleSnippets.net」を眺めていて、個人的に好みなホバーエフェクトを見かけたので備忘録です。イメージにホバーすると半透明のマスクを被せてテキストを表示するというエフェクトは当ブログでも過去に紹介したこともありますし、一般的にも比較的よく見かけるようになりましたが、以下で紹介するのはそのマスク…

  • Tips
&(アンパサンド)のデザインが美しいGoogle Fonts

Read Article

&(アンパサンド)のデザインが美しいGoogle Fonts

ちょっと必要があって手軽に利用できるGoogle Fontsの中で&(アンパサンド)のデザインが特徴的なフォントを探したのですが、個人的に好みで覚えておきたいなと思うデザインが意外とあったのと今後同じような時にまた探すのは面倒なので備忘録として残しておこうと思います。デザインフォントでパッと見気になるのはやはりアルファベットだと思いますが、こうして見てみると記号のデザインもフォントによって様々で見…

  • Inspiration
CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

Read Article

CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

ひと通り揃っていて良いなと思ったので備忘録兼ねてご紹介。「Switcher styles collection」は`<input type="checkbox">`と`<label>`を組み合わせて作成したスイッチスタイルをまとめているもので、装飾やチェック時のアニメーションなどすべてCSSのみで実装されています。

  • Tips
CSSのみで実装するシンプルなドロップダウンメニュー

Read Article

CSSのみで実装するシンプルなドロップダウンメニュー

JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。

  • Tips
Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

Read Article

Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

便利だと思ったので備忘録兼ねてご紹介。CSSでn番目の要素に適用したい時などに利用する`:nth-child`疑似クラスや`:nth-last-child`疑似クラスですが、先頭(または最後)からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考える(悩む)ことがあると思います。「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはS…

  • Tips
新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

Read Article

新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

少し前に新しいInstagramのロゴデザインが発表されましたが、発表直後から様々な人達が各種デザインツールを使ってロゴデザインを再現したり、中にはHTMLとCSSを使って再現する人も出てきました。人によってはそれらを公開するだけでなく配布しているという人もいたので、個人的に目についたロゴデザインを再現したデザインリソースやCSSテクニックをいくつかまとめてみました。もちろんデザインで使用する際な…

  • Material
CSSで実装するボタンホバー時のボーダーアニメーションエフェクト

Read Article

CSSで実装するボタンホバー時のボーダーアニメーションエフェクト

自分用に一覧化したのがほしくて作ったのでシェアします。主にゴーストボタンなどのシンプルなボタンデザインのホバーエフェクトとして使われることが多いと思うボーダーアニメーションのサンプルです。どれも特別派手な動きでもなく同じような感じではありますが全5種類あり、すべてCSSだけで実装しているのでボーダーの太さやカラーなどは簡単に変更可能です。

  • Tips
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法

Read Article

CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法

特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを…

  • Tips
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

Read Article

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、`img`であれば画像を配置して `width:100%;` と `height:auto;` 辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ…

  • Tips
入力欄フォーカス時のアニメーションをまとめた「Awesome input focus effects」

Read Article

入力欄フォーカス時のアニメーションをまとめた「Awesome input focus effects」

覚えておきたいと思ったので備忘録兼ねて。「Awesome input focus effects」はinputやtextareaといった入力欄へフォーカスした際のアニメーションをまとめているもので、3グループ・全24種類のエフェクトがあります。もちろん人によりますが、個人的にはいずれもシンプルな動き(見た目)に思うので、どのタイプのサイトでも取り入れられるように思います。

  • Tips
CSSで子要素の表示を維持しつつ、要素を回転させる方法

Read Article

CSSで子要素の表示を維持しつつ、要素を回転させる方法

なんとなくやってみて、もしかしたら今後使うことあるかもと思ったので備忘録。CSSの`transform: rotate()`と`animation`を使って要素が常に回転するような動きを実装する際、単純に親要素にそれらを指定するだけだと中にある子要素の見栄えも回転します。それを子要素の見栄えは回転せずにそのままの表示が維持されているように見せる方法です。

  • Tips

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