Как красиво оформить картинки на сайте

В html код добавить:

 <ul class="box"><li><img src="image.jpg" /></li></ul>

В файл стилей добавить:

 


ul.box { 


position: relative; 


z-index: 1; 


overflow: hidden; 


list-style: none; 


margin: 0; 


padding: 0; } 


ul.box li { 


position: relative; 


float: left; 


width: 160px; /* ширина рамки при размере картинки 150 */ 


height: 160px; /* высота рамки при размере картинки 150*/ 


padding: 2px; 


border: 1px solid #efefef; 


margin: 0 10px 10px 0; 


background:#fff; 


-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 


-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 


box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } 


ul.box li:before, 


ul.box li:after { 


content: ''; 


z-index: -1; 


position: absolute; 


left: 10px; 


bottom: 10px; 


width: 70%; 


max-width: 300px; 


height: 55%; 


-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 


-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 


box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 


-webkit-transform: skew(-15deg) rotate(-6deg); 


-moz-transform: skew(-15deg) rotate(-6deg); 


-ms-transform: skew(-15deg) rotate(-6deg); 


-o-transform: skew(-15deg) rotate(-6deg); 


transform: skew(-15deg) rotate(-6deg); } 


ul.box li:after { 


left: auto; 


right: 10px; 


-webkit-transform: skew(15deg) rotate(6deg); 


-moz-transform: skew(15deg) rotate(6deg); 


-ms-transform: skew(15deg) rotate(6deg); 


-o-transform: skew(15deg) rotate(6deg); 


transform: skew(15deg) rotate(6deg); }

лайфхак от меня: - если вам нужно сконвертировать файл PDF в JPG картинки, заходите сюда https://docs.zone/pdf-to-jpg

и сервис все сделает быстренько за вас, очень удобно

Для редактирования картинок привыкла использовать фотошоп. Кстати, полезно обращать внимание не только на красоту картинок, но и на их оптимизацию.