css CSS3时尚复古照片效果

Posted 2021-05-13

CSS3 trendy retro photo effect
------------------------------
This is how You can create a trendy retro photo effect with nice tricks of CSS3 filters and linear gradients. See without effect on hover.

Originally written by Chris Spooner on Line25.com — http://line25.com/tutorials/create-a-trendy-retro-photo-effect-purely-with-css

A [Pen](https://codepen.io/Twikito/pen/DltwF) by [Twikito](https://codepen.io/Twikito) on [CodePen](https://codepen.io).

[License](https://codepen.io/Twikito/pen/DltwF/license).

<figure>
  <img src="http://farm6.staticflickr.com/5449/7226439182_756e2b00e6.jpg" alt="">
</figure>

<!-- Another Pen? codepen.io/Twikito -->

/* 
  Originally written by Chris Spooner on Line25.com
  https://line25.com/tutorials/create-a-trendy-retro-photo-effect-purely-with-css
*/

figure {
  box-shadow:inset 0 0 100px rgba(0,0,20,.7), 0 5px 15px rgba(0,0,0,.5);
  background:-webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
  width:500px; height:338px; }

figure img { 
	-webkit-filter:sepia(0.2) brightness(1.1) contrast(1.3);
  transition:-webkit-filter 0.3s ease-in-out;
	position:relative; z-index:-1; }

figure:hover { background:none; }
figure:hover img { -webkit-filter:sepia(0) brightness(1) contrast(1); }

/* BLAH BLAH */
body { background:url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png) repeat; }
figure { margin:20px auto; }