こんにちは！bibiです。風邪が流行ってますねー
自分もその流行に乗りいまだに喉がつらいのと鼻が利かない後遺症に悩まされております。
鼻が利かないと味がよくわからないんですよね！
食事が美味しく摂れないことが風邪ひいたことより凹んでおります。。
まあ風邪には恨みはありませんよ！！むしろ少し休めてよかっ（略）
皆さんも風邪、気を付けてくださいねー！ 風邪にはビタミンCと、身体を温かくして
さっさと寝ちまうのが一番ですよ★ﾐ
それじゃあ！快適なWEBライフを☆彡
おっと忘れてた・・・
記事ですよ記事！
誰も書かないなんて言ってないじゃないですか！！（逆ギレ）
えーと・・・
今回は・・・
誰にでも簡単にできます！背景を斜めにするデザインです！
htmlはまずこちら。
|
1 2 3 4 5 6 |
<section class="contents"> <div class="inner"> <h1>ふざけんな風邪</h1> <p>風邪のおかげでうんたらかんたらでうんたらかんたら</p> </div> </section> |
おっと心の声がだだ洩れ。。まあ事実ですからねしょうがないね。
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 |
.contents { position: relative; overflow: hidden; margin: 20% 0; padding: 80px 0; } .contents:before { content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 80%; margin: 3% -10% 0; background: #FF0004; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(6deg); -ms-transform: rotate(6deg); transform: rotate(6deg); z-index: -1; } .inner { box-sizing: boder-box; width: 100%; max-width: 640px; height: 100%; margin: 0 auto; padding: 100px 10px 120px; color: #fff; text-align: center;} |
これで準備完了！カンタンでしょ。。
ポイントは、背景に色を付けて、
|
1 |
background: #011931; |
ここで角度をつける。
|
1 |
transform: rotate(6deg); |
斜めデザインだと初見で「おおっ！」って思われること請け合いです！
CSSのみで意外と簡単にできるので、皆さまお試しあれ！光あれ！