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

CSS3からの変更点

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

基本の使い方

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

サンプル

BOX01

box sizing

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

border radius

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

ボーダーの角丸の設定。

rotate

要素が動く

box shadow

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

multiple columns

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

hsla colors

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

multiple backgrounds

opacity

要素の色を薄くする

linear gradients

グラデーションをかける

text shadow

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

transform origin

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

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

text stroke

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

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

参考サイト

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

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