CSS

[CSS] 背景画像の特定の位置を常に画面中央に配置する

2018/08/22 CSS No comments

backgroundプロパティだけでやるより融通がきくやつ。

See the Pen centering background image by Tenderfeel (@Tenderfeel) on CodePen.

サンプルの猫画像は縦長(1600×2400)のものを使って、猫の顔が常に画面に入るように指定している。

positionとtrasnform操作すれば画面に映す場所の指定ができる。
たとえば上固定して下を伸ばすなら top:0; bottom: auto; transform: translate(-50%, 0); となる。

[CSS] 縦スクロールのニュースティッカー

2018/08/22 CSS No comments , ,

縦方向に1件ずつスクロール表示するやつ

See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen.

表示エリアの高さ=リスト要素1件の高さ=keyframeのスクロール量 にする。
keyframesに入れてるvisibilityを消すと巻き戻る様子が表示される。
演出として巻き戻すところを敢えて見せるなら消してもよろしいと思う。

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だけで作るにあたって、
新単位使ってみたサンプル

(さらに…)