dayjournal | CSS #008 – 画像の加工

CSS3で画像の加工をしたい場合は下記のように記述します。

index.html


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>sample</title>

        <link href="stylesheet.css" rel="stylesheet"/>

    </head>
    <body>

        <div id="sample">
            <div id="filter">
                <img src="sample.jpg" height="600" width="600">
            </div>
        </div>

    </body>
</html>

stylesheet.css


#sample {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#filter {
    -webkit-filter:blur(5px);
    -moz-filter:blur(5px);
}

index.htmlを実行すると下記のようにブラウザで表示されます。利用する場合にはベンダープレフィックスが必要です。

グレースケールに加工:


-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%)

セピアに加工:


-webkit-filter:sepia(100%);
-moz-filter:sepia(100%)

dayjournal memo

CSS #008 – 画像の加工

Yasunori Kirimoto 2015/9/21