今回は先生から急遽病気で行けなくなったとの連絡をもらいましたので、先生ぬきでの勉強会でした。
サイトを見ていて気になるエフェクトってありますよね。そんなときはFireFoxのFireBugでhtmlとcssをコピってしまおう。そんでもってcssの値をかえたり、プロパティ自体をオフにしてみたりする事で理解を深める。「編集ボタン」でhtmlをコピー、cssをコピーしてhtmlファイルにペースト。どのcssをコピーするかは各自のセンスで。知らないプロパティとかが出て来てもとりあえずコピる。動けばとりあえずOK!
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
*, *:after, *:before { -moz-box-sizing: border-box; } nav a { color: #FFFFFF; display: inline-block; font-size: 1.35em; font-weight:400; letter-spacing: 1px; margin: 15px 25px; outline: medium none; position: relative; text-decoration: none; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); text-transform: uppercase; } .cl-effect-5 a span { display: inline-block; position: relative; transition: transform 0.3s ease 0s; } .cl-effect-5 a:hover span, .cl-effect-5 a:focus span { transform: translateY(-100%); } .container > section { margin: 0 auto; padding: 10em 3em; text-align: center; } .color-5 { background: none repeat scroll 0 0 #CD4436; } .cl-effect-5 a { height: 1em; overflow: hidden; padding: 0 4px; } .cl-effect-5 a span:before { content: attr(data-hover); font-weight:700; position: absolute; top: 100%; transform: translate3d(0px, 0px, 0px); } |
html
|
1 2 3 4 5 6 7 8 9 |
<section class="color-5"> <nav id="cl-effect-5" class="cl-effect-5"> <a href="#cl-effect-5"><span data-hover="Seraglio">Seraglio</span></a> <a href="#cl-effect-5"><span data-hover="Sumptuous">Sumptuous</span></a> <a href="#cl-effect-5"><span data-hover="Scintilla">Scintilla</span></a> <a href="#cl-effect-5"><span data-hover="Palimpsest">Palimpsest</span></a> <a href="#cl-effect-5"><span data-hover="Assemblage">Assemblage</span></a> </nav> </section> |
質問
・フォントの太さが参考サイトと違うのはなぜ？
・IE/Firefox だと文字の高さをキープするけど、Mac/Firefoxだと文字の高さが（幅も）キープされないのはなぜ？
今日の勉強会は謎をのこしつつ終了しました。