*

ウェッブ制作

Width =px

ホーム > HTML・CSS > HTM5/CSS3 >
14.テキストをリボン状に表示 MENU 

14.css3 テキストをリボン状に表示、サイト名などに使いページを引き立てる Chap 5-11

学習書の「sample_a」(Chap5_1-11)を表示しソースコードを見て下さい。
リボン表示
フッターを変更し、右下隅にリボン状のサイト名を表示

CSS記述 フッター部分
  • 行番
  • 説 明
  • 2-12
  • 背景色を無し、文字色を白で左寄せ、上部枠線の色#aaaaaaに
  • 13-22
  • 「small」の追加セクター「small::before」を入れて、リボン状のサイト名を表示
  • 23-25
  • サイト名の位置をコンテンツの右下に固定
  • 26
  • 現在水平に表示されている帯をrotate(-45deg):反時計回りに-(マイナス)45度回転。回転の中心は、縦と横の中心点、translate(62px, 20px):横位置を62px 縦位置を20px移動させて位置合わせ
  • 27-
  • 主要ブラウザへの対応
CSS記述 container部分
  • 行番
  • 説 明
  • 2
  • コンテンツをrelative(相対位置指定)、サイト名固定のため
  • 4
  • 枠からはみ出す帯状の右と下の部分を隠す