フッターのデザイン
サイト名をリボン状に表示する
- フッターを罫線で区切って表示する
footer { clear: both; color: #888; margin: 25px 0 0 0; padding: 8px 0 8px 0; border-top: solid 1px #aaa; } small { font-size: 0.75em; font-style: normal; text-align: left; display: block; }
サイト名をCSSで挿入する
- 「small:before」
small:before { content: 'GREEN LEAF'; }
挿入したサイト名のデザインを指定する
small:before { content: 'GREEN LEAF'; display: block; width: 200px; padding: 10px 0; background-color: #800; color: #fff; font-family: 'Righteous', cursive; font-size: 1.0em; text-align: center; }
サイト名を枠の右下に揃えて表示する
#container { width: 900px; margin: 0 auto; background-color: #fff; padding: 0 40px; -webkit-box-shadow: 0 0 30px #bbb; box-shadow: 0 0 30px #bbb; background-image: url(images/circle.png), url(images/circle-yellow.png); background-repeat: no-repeat; background-position: 20px 410px, 90px 500px; background-size: 94px 94px, 30px 30px; position: relative; }
small:before { content: 'GREEN LEAF'; display: block; width: 200px; padding: 10px 0; background-color: #800; color: #fff; font-family: 'Righteous', cursive; font-size: 1.0em; text-align: center; position: absolute; right: 0; bottom: 0; }
サイト名を回転する
- 反時計回りに「45度」回転
- 値「rotate(-45deg)」
small:before { content: 'GREEN LEAF'; display: block; width: 200px; padding: 10px 0; background-color: #800; color: #fff; font-family: 'Righteous', cursive; font-size: 1.0em; text-align: center; position: absolute; right: 0; bottom: 0; -webkit-transform: rotate(-45deg); }
サイト名の表示位置を調節する
small:before { content: 'GREEN LEAF'; display: block; width: 200px; padding: 10px 0; background-color: #800; color: #fff; font-family: 'Righteous', cursive; font-size: 1.0em; text-align: center; position: absolute; right: 0; bottom: 0; -webkit-transform: rotate(-45deg) translate(62px, 20px); }
枠からはみ出した部分をカットする
#container { width: 900px; margin: 0 auto; background-color: #fff; padding: 0 40px; -webkit-box-shadow: 0 0 30px #bbb; box-shadow: 0 0 30px #bbb; background-image: url(../chapter5/circle.png), url(../chapter6/circle-yellow.png); background-repeat: no-repeat; background-position: 20px 410px, 90px 500px; background-size: 94px 94px, 30px 30px; position: relative; overflow: hidden; }
ベンダープレフィックス(主要ブラウザに対応させる)
small:before { content: 'GREEN LEAF'; display: block; width: 200px; padding: 10px 0; background-color: #800; color: #fff; font-family: 'Righteous', cursive; font-size: 1.0em; text-align: center; position: absolute; right: 0; bottom: 0; -webkit-transform: rotate(-45deg) translate(62px, 20px); -moz-transform: rotate(-45deg) translate(62px, 20px); -o-transform: rotate(-45deg) translate(62px, 20px); -ms-transform: rotate(-45deg) translate(62px, 20px); }
回転
- rotate()
transform: rotate(30deg);
移動
- translate()
transform: translate(100px, 200px);
transform: rotate(30deg) translate(100px, 200px);