サイトタイトルを傾ける

文字を少し傾けてインパクトを出したい!

基になっているサイトタイトル

3度ほど傾けた例

<style type="text/css">    

#cc-website-title h1{

        transform:skew(-3deg , -3deg);

}

</style>

サイトタイトルを使用していないテンプレート一覧

2015年7月25日現在サイトタイトルを使用していないテンプレートは以下の通り。

Dubai、Dublin、Malaga、MilanoParisReykjavikSt.Petersburg

※Romaは対応しているけど使えないかなぁ?

※Osakaはサイトタイトルは存在しているが、非対応(対応させる方法は存在しますが、そうすると、上の点線を犠牲にすることになります。)

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

傾きの使用方法

skewによる傾きの考え方

transform:skewを指定すると文字の中心を基点にして上下方向左右方向への傾きを作る。

まずは何もしない状態

独自レイアウト
transform:none;

上下左右に2ピクセル分づつずらしてみる

■   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);

自分が探している色を見つけたい時は原色大辞典が役に立ちます!

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422