CSSだけでヒーローイメージのセクションにシンプルなパララックス効果
Result CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれませんが。 内容としては3D空間を作り、ヘッダに疑似要素を作って背景画像を設定、z軸に沿ってオブジェクトを遠ざけるよう設定します。 header::before { transform: translateZ(-4px); } header div { transform: translateZ(-2px); }また、3D空間の中でフラット描画されるよう、親要素にtransform-styleを設定しておきます。 header { transform-style: preserve-3d; }これだけだと単に縮小された状態になってしまうのでscaleで戻してあげる必要があります。 scaleで戻すには計算が必要です。Googleの記事では以下の計算法が使われています。 scale = (pers
CSS | 色々な図形を描画するCSSサンプルコード集 | 1 NOTES
CSSを使って色々な図形を描画するサンプルコード集になります。 ここにない図形も色々と紹介しています。 CSS 図形デザイン集 | ONE NOTES 図形の中にテキストなどを含める場合の注意点サンプルではできる限り、要素サイズの維持を考慮していますが、中には要素そのものがサイズを持たないサンプルもあります。 そういったサンプルの図形要素内にテキストなどの要素を含める場合は、レイアウトの崩れなどに注意して下さい。 解決策としては以下の方法などがあります。 before、afterの空きがあれば、図形部分は移動するサイズのある親要素を持たせて図形の配置はposition指定にするpaddingや文字サイズ、文字数を調節して図形の範囲内に収めるposition指定で影響を与えないようにするtext-overflowなどでみ出る部分を非表示にする正円（Perfect Circle）正円（せいえん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
