Эффект границы, чтобы выделить картинку?

Я ищу специальный эффект CSS (3?): При нанесении оно выглядело так, что углы объектов выделяются немного больше, чем середина сторон. Что производит хороший эффект, как если бы лист бумаги лежал на веб-сайте.Эффект границы, чтобы выделить картинку?

Как вы называете этот эффект?

источник

2013-05-06 membersound

вы можете показать нам этот эффект каким-либо изображением или чем-нибудь еще? – Sachin

Если бы я знал ключевое слово, чтобы найти изображение, я бы также нашел источники css. Я просто забыл имя ... – membersound

Эта страница содержит хорошо выглядящий "согнутую бумагу" теневой эффект, с чистым CSS:

http://matthamm.com/box-shadow-curl.html

Пример кода для теневого эффекта на <li> элемент из источника выше:

HTML:

<ul class="box"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

CSS:

ul.box { 
position: relative; 
z-index: 1; /* prevent shadows falling behind containers with backgrounds */ 
overflow: hidden; 
list-style: none; 
margin: 0; 
padding: 0; } 


ul.box li { 
position: relative; 
float: left; 
width: 250px; 
height: 150px; 
padding: 0; 
border: 1px solid #efefef; 
margin: 0 30px 30px 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; /* avoid rotation causing ugly appearance at large container widths */ 
max-height: 100px; 
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); }

Примечание: Если вы используете родительский элемент. Убедитесь, что родительский div имеет позицию: relative; z-индекс: 99; или эти тени не появятся.

источник

2013-05-06 09:55:48 Arbel

Пожалуйста, размещайте соответствующий код здесь, внешние ссылки могут не работать в будущем, что сделает ваш ответ бесполезным. – Uooo

@ w4rumy, обязательно, сделано. – Arbel

-1

Вы можете сделать это с помощью небольшого трюка настройки ширины рамки для разных размеров. Например:

div{ 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    border-bottom: 2px solid black; 
    border-right: 2px solid black; 
    width: 200px; 
    height: 400px; 
}

Example

Не знаю, как это называется, хотя.

источник

2013-05-06 09:52:29 Uooo

Это не то, что означало TS, я боюсь. –

Вы можете сделать это с помощью CSS3 box-shadow и преобразований. Например.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
div { 
    width: 215px; 
    height: 80px; 
    border: 1px solid #ccc; 
    position: relative; 
    background: white; 
} 

div::before, div::after { 
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2); 
    -webkit-transform: rotate(-8deg); 
    transform: rotate(-8deg); 
    position: absolute; 
    left: 10px; 
    bottom: 12px; 
    z-index: -1; 
    width: 50%; 
    max-width: 100px; 
    height: 20px; 
    content: ""; 
} 

div::after { 
    -webkit-transform: rotate(8deg); 
    transform: rotate(8deg); 
    right: 10px; 
    left: auto; 
} 
</style> 

</head> 
<body> 

<div></div> 

</body> 
</html>

http://codepen.io/anon/pen/JuwLd

источник

2013-05-06 09:55:07

Эффект границы, чтобы выделить картинку?

ответ

Смежные вопросы