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

知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ

TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard

nonnonkun 2014/07/14

CSS

リンク

すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ

作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。エンジニア速報は Twitter の@commteで配信しています。もくじ横並び１．今までの回り込み解除２．横並びや並び順３．均等に並べる／段組みナビゲーションメニュー４．多階層　ドロップダウン５．amazon風　メガドロップダウン６．ドロワーメニューコンテンツメニュー７．モーダルウィンドウ８．アコーディオン９．タブパネルテーブル１０．ストライプテーブル１１．レスポンシブ＋テーブルリスト１２．カウント

nonnonkun 2014/04/21

リンク

知っておくと速い！CSS3に関する「便利」なまとめ

作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。エンジニア速報は Twitter の@commteで配信しています。もくじ知っておきたいプロパティ１．カウント数を出力２．要素の前後に文字や画像３．カーニング４．画像フィルタ５．均等幅にレイアウト６．アニメーション一覧スマホサイト対策７．viewport ８．改行削除９．Webクリップアイコン１０．UIリセット／入力フィールド拡張１１．横並び１２．ボタンサンプル１３．画像を使わない矢印１４．自動改行１５．はみ出しを隠す１