読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【5:Horizon】positionプロパティによるスクロールコンテンツ

one's wayプロジェクト CSS

f:id:seintoseiya:20150402190350p:plain
プロジェクト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

全ソースはこちら

github.com

関連アプリ・書籍

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

できるポケット HTML5&CSS3/2.1全事典

できるポケット HTML5&CSS3/2.1全事典