• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

【CSS3】で写真に色々装飾を加えてみた border-imageなど (枠・写真加工編【IE9以前は非推奨】

投稿者アイコン
2015/01/16
書いた人:
yanoppa!
カテゴリ:
CSS   HTML   Web制作
56,973 views

どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・`)おほー 今回はお役立ち記事が [...]

【CSS3】で写真に色々装飾を加えてみた border-imageなど (枠・写真加工編【IE9以前は非推奨】

どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・`)おほー

今回はお役立ち記事が思い浮かばないので、装飾つくって遊んだだけです。

こういうのお好きな方は参考にしたり、もっとこうしたほうがいいよね…など考える材料にしたりしていただけると幸いです。
なお、今回IE9~6は無視してます。border-imageなどがIE10以降実装になってるからですね。
IEでも表示したい!って方はCSS3 PIEcssSandpaperを使って対応させると良いですよ(´・ω・`)b


今回写真は「ぱくたそ」さんから拝借いたしました。
写真のチョイスは僕の趣味ですw 包まる娘っていいよね♪(´・ω・`)


ブランケットを羽織った女性


それではちょこちょこやっていきましょう!


まずは、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>
  












ちょっとましになりましたが、やっぱ古臭いですねw(´・ω・`)
次は半透明な枠とか作ってみます。

作り方は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に画像を貼れるという代物です(´・ω・`)b

さっそく使ってみましょう!
紙のテクスチャ貼ったけど、なんだか額みたいですね・・・

ブランケットを羽織った女性

  <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>
  












今度は円形グラデーションをつかってみました。(´・ω・`)b
雰囲気がガラッとかわりますね!
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>
  













今回はこのくらいで!
次回は影などの表現をやってみたいと思います。(*´ω`*)ノシ


この記事を読んだ人はこんな記事も読んでいます