【5:Horizon】positionプロパティによるスクロールコンテンツ
プロジェクトNo.5:Horizon
水平線から太陽が昇る様子を、positionプロパティを使って表現してみた。
今回のポイントは以下の通り。
- positionプロパティ:絶対配置・固定配置
- z-indexプロパティ:重なり制御
- radial-gradient:円形グラデーション
- Webフォント:ブラウザ間でのフォント統一
- transformプロパティ:文字を回転させる
- border-radiusプロパティ:角丸表現
一番はまったのは、ブラウザ間での表示が異なるところでした。
配置やフォントなど微妙に異なるので考慮が必要です。
それぞれの解説は近日、別記事にアップします。(たぶん)
2015.4.4追記:
positionプロパティを使用する際の注意点|ブラウザ間での違い - one's way blog
2015.4.7追記:
CSSで線形、円形グラデーションを表現する - one's way blog
2015.4.8追記:
CSSで文字を回転させる|transform: rotate() - one's way blog