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

CSS3からの変更点

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

基本の使い方

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

[crayon-5ba99194dc82c955809075/]

サンプル

BOX01

box sizing

[crayon-5ba99194dc843497696940/]

上記のプレビュー内容を記載致します。

border radius

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

[crayon-5ba99194dc84f044668632/]

ボーダーの角丸の設定。

rotate

[crayon-5ba99194dc85c540992248/]

要素が動く

box shadow

[crayon-5ba99194dc869598873076/]

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

multiple columns

[crayon-5ba99194dc876939756137/]

カラム幅とカラム数を指定することが出来ます。文章が長くなる場合カラムを設定することで可読性が向上する可能性があります。でも今この文章はすごく読みづらいですよね。

hsla colors

[crayon-5ba99194dc884905932143/]

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

multiple backgrounds

[crayon-5ba99194dc88e721005378/]

opacity

[crayon-5ba99194dc895402645562/]

要素の色を薄くする

linear gradients

[crayon-5ba99194dc89c795852111/]

グラデーションをかける

text shadow

[crayon-5ba99194dc8a4869626426/]

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

transform origin

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

[crayon-5ba99194dc8ac499924798/]

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

text stroke

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

[crayon-5ba99194dc8b3204977752/]

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

参考サイト

Commentsこの記事についたコメント

%d人のブロガーが「いいね」をつけました。