アプリ魂

はじめてのプログラミング生活

【119日目】transform:skewで背景画像に傾斜をつけてみた

f:id:seitokaii:20170120061018p:plain

HTML

CSS

POINT

@appdamacyですペコリ(o_ _)o))

今回は背景画像に傾斜をつける表現に挑戦しました。

というのもコンテンツの区切りが斜めにスパーンとひかれているオシャレなサイトをよく見かけるので、いちどやり方を覚えておきたかったのです。

実際に傾斜をつけるためのコードはこれだけ。skewで傾斜角度の設定をしてから、translateで縦軸を移動させて上に余白ができないようにしています。魅せ方によって微調整してみてください。

ただ最近はSVGで画像のカタチに変化を加えるのが主流みたいなので、そっちでもアレコレできるようになりたいと思っています。

f:id:seitokaii:20170120082550p:plain

Scalable Vector Graphics (SVG) は、2 次元ベクタ形式 のためのXML に基づくマークアップ言語です。おおまかには、テキストに対する HTML のような位置づけで、グラフィックに対して SVG が存在します。

SVG | MDN

明日も練習がんばりますペコリ(o_ _)o))

2016 APPDAMACY