[B! css] Dursanのブックマーク

Dursan id:Dursan

cssに関するDursanのブックマーク (3)

CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに Flexboxでの折り返しスペースの確保テキストが長いコンテンツ画像の伸縮を防止するスクロールが連鎖するのを回避 CSS変数のフォールバック固定の幅・固定の高さによるレイアウトの崩れ忘れがちな背景の繰り返し垂直のメディアクエリ justif
Dursan 2022/01/20
css

web制作
リンク
これはすごい！TLで話題にのぼった3D CSS Testerで私も3Dを体験してみた！
javascriptを使用せずCSSのみで画像を3D回転させる事ができてしまう時代が既に到来していたようです。面白そうなので早速試してみました！ 3D CSS Tester CSS3を利用して画像を3D回転させることができるジェネレーター。横の数値を変更すれば即座に反映されます。反映された3D回転は、コードが書き出されているのでコピーしてそのまま使用することも可能です！！作ってみたただ単に書き出されたコードをまるまるコピーして、画像を差し替えただけですがちゃんと動いたことに感動しましたー！！ヾ(*´∀｀*)ﾉｷｬｯｷｬ ※CSS3のZ軸を用いた3D回転を使用しているため非対応ブラウザの方には表示されなかったり止まって見えたりすると思います。とりあえずChromeかiPhoneで見て頂ければ動くかと。参考：CSS transf orms の利用 – MDN （FireFoxの対
Dursan 2012/01/25
Webデザイン

css
リンク
使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI
似たようなツールは他にもあるが、シンプルで使いやすそうだったのでご紹介。 Unused CSSを使えば、使われていないCSS設定がどこにあるかを教えてくれる。使い方は簡単で、チェックしたいサイトのURLを入力するだけだ。すると、どのCSSファイルにどれだけ不要な設定が入っているかを教えてくれる。また、不要な設定を排除したCSSをダウンロードできたりもする。サイトの開発がながびくと不要な設定も増えていくことだろう。こうしたツールをうまく使ってサイトの最適化をはかりたいですな。
Dursan 2011/01/09
web制作

css

css
リンク
1