CSS3に変わってできるようになった事

Posted on by

CSS3からの変更点

CSS3に変わってから、色々な表現を手軽にcssで実装できるようになりました。
CSS3の前から画像などで実装していた部分もcssのみで実装可能になりました。
またどのような機能が追加されたかを紹介させて頂きます。

基本の使い方

クラスに、【display: flex;】を追加します。

.sample{
  display: flex;
}

サンプル

BOX01

box sizing

.boxsizing {
    width: 100%;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:1px solid #000;
}
上記のプレビュー内容を記載致します。

border radius

ボックスの４つのコーナーの角丸をまとめて指定する際に使用します。

.borderRadius {
    -webkit-border-radius: 10px 15px 5px 30px;
    -moz-border-radius: 10px 15px 5px 30px;
    border-radius: 10px 15px 5px 30px;
border:1px solid #333333;
}
ボーダーの角丸の設定。

rotate

.rotate {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

要素が動く

box shadow

.boxShadow {
    -webkit-box-shadow: #000 5px 5px 10px 3px inset;
    -moz-box-shadow: #000 10px 10px 10px 3px inset;
    box-shadow: #000 10px 10px 10px 3px inset;
}

ボックスにシャドウをつけることが出来ます。

multiple columns

.columns {
    -webkit-column-count: 3;
    -webkit-column-width: 75px;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #fff;
    -moz-column-count: 3;
    -moz-column-width: 75px;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #fff;
    -o-column-count: 3;
    -o-column-width: 75px;
    -o-column-gap: 20px;
    -o-column-rule: 1px solid #fff;
    column-count: 3;
    column-width: 75px;
    column-gap: 20px;
    column-rule: 1px solid #fff;
}
カラム幅とカラム数を指定することが出来ます。文章が長くなる場合カラムを設定することで可読性が向上する可能性があります。でも今この文章はすごく読みづらいですよね。

hsla colors

.hsla1 { background-color: hsla(200,0%,50%,1.0);}
.hsla2 { background-color: hsla(200,20%,50%,1.0);}
.hsla3 { background-color: hsla(200,40%,50%,1.0);}
.hsla4 { background-color: hsla(200,60%,50%,1.0);}
.hsla5 { background-color: hsla(200,80%,50%,1.0);}
.hsla6 { background-color: hsla(200,100%,50%,1.0);}

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

multiple backgrounds

.multipleBackgrounds {
    background: url(images/example.png) center center no-repeat,
                url(images/example-2.png) top left repeat;
}

opacity 

.opacity {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; /* for IE8 in IE7 mode */
    filter: alpha(opacity=30); /* for IE6-IE8 */
    opacity: .3;
}
要素の色を薄くする

linear gradients

.linearGradients {
    background-image: -moz-linear-gradient(top, #d85e0c, #ffffff); /* FF3.6 */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d85e0c), color-stop(1, #ffffff)); /* Safari 4+, Chrome 2+ */
    background-image: -webkit-linear-gradient(top, #d85e0c, #ffffff); /* Safari 5.1+, Chrome 10+ */
    background-image: -o-linear-gradient(top, #d85e0c, #ffffff); /* Opera 11.1+ */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d85e0c', endColorstr='#ffffff'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d85e0c', endColorstr='#ffffff')"; /* IE8+ */
    background-image: linear-gradient(to bottom, #d85e0c, #ffffff);
}
グラデーションをかける

text shadow

.textShadow {
    text-shadow: #555 4px 4px 4px; /* color, h-offset, v-offset, blur */
}

テキストにドロップシャドウ

transform origin

画像ボーダーについてまとめて指定する際に使用します。

.transformOrigin {
    -webkit-transform-origin: 20px 20px; /* h-offset, v-offset */
    -moz-transform-origin: 20px 20px;
    -o-transform-origin: 20px 20px;
    -ms-transform-origin: 20px 20px;
    transform-origin: 20px 20px;
}

2D変形、または、3D変形の原点を指定することができます。

text stroke

画像ボーダーについてまとめて指定する際に使用します。

.textStroke {
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-color: #d78965;
    -webkit-text-stroke-width: 3px;
    text-fill-color: #fff;
    text-stroke-color: #d78965;
    text-stroke-width: 3px;
}

文字の輪郭線を指定することが出来ます。

参考サイト

Web制作会社スタイル