【CSS3】で写真に色々装飾を加えてみた border-imageなど (枠・写真加工編【IE9以前は非推奨】
：どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・｀)おほー 今回はお役立ち記事が [...]
どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・｀)おほー
今回はお役立ち記事が思い浮かばないので、装飾つくって遊んだだけです。
こういうのお好きな方は参考にしたり、もっとこうしたほうがいいよね…など考える材料にしたりしていただけると幸いです。
なお、今回IE9～6は無視してます。border-imageなどがIE10以降実装になってるからですね。
IEでも表示したい！って方はCSS3 PIEやcssSandpaperを使って対応させると良いですよ(´・ω・｀)ｂ
今回写真は「ぱくたそ」さんから拝借いたしました。
写真のチョイスは僕の趣味ですｗ 包まる娘っていいよね♪(´・ω・｀)
それではちょこちょこやっていきましょう！
まずは、borderとかpaddingを使用した時に要素のサイズが変わるのを防ぐため、box-sizingを使用します。
次にimgを可変可能にしておきます。
これをしておくことで、とりあえず置いた画像のサイズをいちいち変えなくても崩れず編集していくことができます。
<p class="img01"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
<style>
.img01 {
max-width:500px;
margin:0 auto;
box-sizing:border-box;/* borderとpaddingをwidthに含める */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
}
.img01 img {
width:100%;
height:auto;
vertical-align:top;
}
</style>
枠を付ける編
では、まずはちょっと古臭いけど、白枠を付けてみます。(装飾用のclassを別に振ります)
<style>
.waku01{
padding:7px;
border:1px solid #ccc;
background:#fff;
}
</style>
<p class="img01 waku01"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
うん…普通ですね…ではちょっと影とか付けてみます。
<style>
.waku01 {
padding:7px;
border:1px solid #ccc;
background:#fff;
box-shadow: 1px 1px 5px rgba(20,20,20,0.2);/* ドロップシャドウ 【横位置 縦位置 ぼかし幅 色】の順に記述 */
}
</style>
ちょっとましになりましたが、やっぱ古臭いですねｗ(´・ω・｀)
次は半透明な枠とか作ってみます。
作り方はimgを内包しているボックスをposition:relative;にして、擬似要素:before :afterを上に乗っける形をとります。
ここから自由度がぐっと上がります。
<style>
.waku02 {
position:relative; /* positionの基準とするためrelativeを与えます。 */
}
.waku02:before {
content: ''; /* このプロパティが無いと擬似要素は機能しません、お決まりの呪文です。 */
display: block; /* ブロック要素にします。 */
position: absolute; /* absoluteで上に乗っけます。 */
top: 0; /* 縦横の値を入れるのは基本です。入れないとだめ！っと思っておくほうが今後の為いいです。 */
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0px 8px rgba(255,255,255,0.6);
}
</style>
<p class="img01 waku02"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
すこしだけ角丸にしてみました。
さりげなくがよいです。 過剰な角丸って変になっちゃいますからね！(´・ω・｀)
<style>
.waku02.radius img {
border-radius: 4px;
}
</style>
<p class="img01 waku02 radius"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
CSS3からborder-imageというプロパティが追加されました！
borderに画像を貼れるという代物です(´・ω・｀)ｂ
さっそく使ってみましょう！
紙のテクスチャ貼ったけど、なんだか額みたいですね・・・
<style>
.waku02.bImg {
border:10px solid #ccc;
border-image:url(paper.gif) 15 repeat;
-webkit-border-image:url(paper.gif) 15 repeat;
}
</style>
<p class="img01 waku02 bImg"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
額みたいなので、もうちょっと額っぽくしてみます。
<style>
.waku02.bImg:before {
box-shadow: none;
}
.waku02.shadow {
box-shadow: 1px 3px 8px rgba(20,20,20,0.3);
}
.waku02.shadow:before {
box-shadow: inset 1px 1px 6px 0px rgba(0,0,0,0.4),
-1px -1px 2px rgba(40,40,40,0.2),
1px 1px 2px rgba(255,255,255,1);
}
.waku02.bWidth {
border-width: 16px;
}
</style>
<p class="img01 waku02 bImg shadow bWidth"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
shadowを付けることで、少しはそれっぽく？なったと思いたいです。(´・ω・｀)
フィルターをかけたような効果を付けてみる。
先ほど作った額っぽい感じの中の写真にフィルター効果のようなものを付けてみます。
<style>
.filter01:after {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background: -moz-linear-gradient(to right bottom, rgba(107, 84, 12, 0.5) 0%, rgba(248, 212, 119, 0.18) 50%,rgba(104, 107, 70, 0.7) 100%);; /* FF3.6+ */
background: -webkit-linear-gradient(to right bottom, rgba(107, 84, 12, 0.5) 0%, rgba(248, 212, 119, 0.18) 50%,rgba(104, 107, 70, 0.7) 100%);; /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(to right bottom, rgba(107, 84, 12, 0.5) 0%, rgba(248, 212, 119, 0.18) 50%,rgba(104, 107, 70, 0.7) 100%);; /* IE10+ */
background: linear-gradient(to right bottom, rgba(107, 84, 12, 0.5) 0%, rgba(248, 212, 119, 0.18) 50%,rgba(104, 107, 70, 0.7) 100%); /* W3C */
}
</style>
<p class="img01 waku02 bImg shadow bWidth filter"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
セピアっぽくなるようにしてみました。
やり方は、beforeでもいいのですが、今回shadowでつかってますので、擬似要素：afterを使って、薄いグラデーションを載せています。
css filterを使えば、セピアとかさくっと出来るのですが、対応ブラウザが限定されるすぎるので今回この方法です。
それではもう一個つくってみます。
<style>
.filter02:after {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background: -webkit-gradient(radial, center center, 0, center center, 400, from(rgba(255, 255, 255, 0)), to(rgba(255,255,255,1)));
background: -moz-radial-gradient(rgba(255, 255, 255, 0) 0%, rgba(255,255,255,1) 150%);
background: radial-gradient(rgba(255, 255, 255, 0) 0%, rgba(255,255,255,1) 150%);
}
</style>
<p class="img01 waku02 bImg shadow bWidth filter02"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
今度は円形グラデーションをつかってみました。(´・ω・｀)ｂ
雰囲気がガラッとかわりますね！
CSSのグラデーションは記述が面倒くさいですが、作ってしまえばclassを振るだけで同じ効果を得られるので、なんだかんだ便利です♪
でわ、写真風にもどして、レイアウトを変えてみましょう。
傾きを使って、工夫してみる
まずは写真風にもどして、すこし傾けたりしてみます。
<style>
.img01.waku03 {
border: 10px solid #fff;
box-shadow: 0 0 0 1px #ccc,1px 3px 8px 0 rgba(40,40,40,0.3);
}
.waku03.rotate01 {
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.waku03.rotate02 {
-moz-transform:rotate(1deg);
-webkit-transform:rotate(1deg);
-ms-transform:rotate(1deg);
transform:rotate(1deg);
}
</style>
<p class="img01 waku03 shadow rotate01"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
やはりこれも少し傾けるくらいがよいです。
大げさなのは今の流行りではないですし、安っぽくなってしまいます。
せっかくなので、先ほど作ったfilterを使ってみましょう！
<p class="img01 waku03 shadow filter01 rotate01"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p> <br> <p class="img01 waku03 shadow filter02 rotate02"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
今回はこのくらいで！
次回は影などの表現をやってみたいと思います。(*´ω｀*)ﾉｼ