CSS

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

2016/07/14(Thu) 10:09

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

http://www.nxworld.net/tips/tootik.html

[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点

2016/07/13(Wed) 10:14

:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。

http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html

手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー | Webクリエイターボックス

2016/07/13(Wed) 10:13

人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。

http://www.webcreatorbox.com/tech/animation-libraries/

カルーセルやアコーディオン、ドロップダウンメニューなどをCSSのみで実装するコードを集めた・「You Don’t Need JavaScript」

2016/07/11(Mon) 10:11

You Don’t Need JavaScriptはよく見かけるUIをJavaScriptを使用せずCSSのみで実装するコードを集めているプロジェクトです。上はカルーセルのサンプル。

http://kachibito.net/useful-resource/you-dont-need-javascript

CSSはやっぱり便利！最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ

2016/07/08(Fri) 09:46

ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。

http://coliss.com/articles/build-websites/operation/css/css-components-without-javascript.html

[CSS]アイコンとテキストを横並びに揃えるスタイルシートのテクニック

2016/07/07(Thu) 10:13

アイコンとテキストを横並びにする配置は、Webページでよく使用されます。ナビゲーションやリスト、リンク、ヘッダやフッタのリンクなど、さまざまなコンテンツで見かけますね。

http://coliss.com/articles/build-websites/operation/css/aligning-icons-to-text.html

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

2016/07/05(Tue) 09:56

CSSを使用して表現したかっこいいホバーエフェクトやボタンデザインを多数作成・公開している「LittleSnippets.net」を眺めていて、個人的に好みなホバーエフェクトを見かけたので備忘録です。

http://www.nxworld.net/tips/css-split-mask-hover-effects.html

CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress

2016/07/05(Tue) 09:55

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。

http://coliss.com/articles/build-websites/operation/css/modern-css-reset-ress.html

意外と盲点だったCSS3の役立つ小技まとめ

2016/07/04(Mon) 09:54

リニューアルを行った時に、CSS3で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。

http://commte.net/blog/archives/5826

[CSS]半透明のパネルが奥に吸い込まれる！一味違った縦長スクロールを実装するスタイルシートのテクニック

2016/07/01(Fri) 07:23

コンテンツを半透明のパネルに配置し、スクロールすると、パネルが奥に吸い込まれていくのを実装するスタイルシートを紹介します。

http://coliss.com/articles/build-websites/operation/css/pure-css-z-axis-scrolling.html