文字を少し傾けてインパクトを出したい！
基になっているサイトタイトル
３度ほど傾けた例
<style type="text/css">
#cc-website-title h1{
transform:skew(-3deg , -3deg);
}
</style>
サイトタイトルを使用していないテンプレート一覧
2015年7月25日現在サイトタイトルを使用していないテンプレートは以下の通り。
Dubai、Dublin、Malaga、Milano、Paris、Reykjavik、St.Petersburg
※Romaは対応しているけど使えないかなぁ？
※Osakaはサイトタイトルは存在しているが、非対応（対応させる方法は存在しますが、そうすると、上の点線を犠牲にすることになります。）
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
傾きの使用方法
skewによる傾きの考え方
transform:skewを指定すると文字の中心を基点にして上下方向、左右方向への傾きを作る。
まずは何もしない状態
独自レイアウト
transform:none;
上下左右に２ピクセル分づつずらしてみる
■ transform:skew(-3deg , -3deg);
- 左右の傾き: 左方向に（プラス）、右方向に（マイナス）
- 上下の傾き: 左方向へ（プラス）、右方向に(マイナス）
イタリック
独自レイアウト
transform: skew(-10deg , 0deg);
反対方向の斜体
独自レイアウト
transform: skew(10deg , 0deg);
上方向に傾き
独自レイアウト
transform: skew(0deg , -5deg);
下方向に傾き
独自レイアウト
transform: skew(0deg , 5deg);
背景がある文字は背景も一緒に傾く
背景と一緒に、右上、左下方向に傾ける。
独自レイアウト
transform: skew(0deg , -3deg);
背景と一緒に、右、左に傾斜させる。
独自レイアウト
transform: skew(-15deg , 0deg);
自分が探している色を見つけたい時は原色大辞典が役に立ちます！
この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
コメントをお書きください