CSS

icomoonでfont化したSVGが中マド状態になってしまう件の対処

2018/06/25 CSS No comments , , ,

こちら、デザイナーが作成したアイコン

(さらに…)

[css, js] 404エラーのimgタグをいい感じにスタイリングする

2018/05/29 CSS No comments ,

詳しく書いてある記事はこちらで、
https://bitsofco.de/styling-broken-images/
imgがbroken状態になるとbefore, after擬似要素使えるからよしなにやっつければおkという意味である。
この記事ではbefore, after擬似要素に背景色をつけてposition:absoluteで上に被せて消している。

私の場合は

  • どんなサイズの画像があるか事前にわからない
  • レスポンシブ
  • NO IMAGE画像素材を使う
  • Retina対応もする

ていう条件があった。
(さらに…)

[css] 斜めの背景を描く

2017/06/30 CSS No comments ,

斜めに大きくストライプするような模様の背景をCSSだけで作るにあたって、
新単位使ってみたサンプル

(さらに…)

[CSS] counter-increment を利用した list-style の変更

2016/07/12 CSS No comments

利用規約みたいな番号付きリストがやたら入れ子になる文書のマークアップしたときに、
入れ子になっているリストのリスト番号には括弧を付けたいっていうケースがあるじゃないですか…
そういえばcounterがあったな〜って思い出したんだ…

スプライトシートを使ったナビゲーションメニューを生成する構成例

2016/07/05 Compass, CSS No comments ,

gulp+ejs+sass …これは最早テンプレといっても過言ではない…( ˘ω˘ )

(さらに…)