Загнутый угол с тенью
Вложений: 1
Дизайнер придумал pop-up окно с вот таким углом.
Есть какие-то идеи, как это сделать максимально кроссбраузерно и семантично? Пока на ум пришло только добавление под pop-up'ом трех элементов с тенями, один из которых повернут под углом и png с завернутым углом. Но хотелось бы какое-то решение покрасивее. |
Кроссбраузенрно - только div'ы да png. А так можно было бы с трансформами да градиентами поиграть. А то и svg\css фильтрами.
P.S. Нехороший дизайнер.) |
BETEPAH,
мысли вслух :write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">body{
background:#DDD;
font-size:24px;
}
#one{
float:left;
position:relative;
width:0px;
height:0px;
background:transparent;
border-right:145px solid transparent;
border-top:100px solid #EEEEEE;
}
#five{
margin:0px;
position:absolute;
left:-38px;
top:-114px;
display:block;
color:#FA7C25;
width:0px;
height:0px;
border-right:25px solid transparent;
border-bottom:70px solid #FA7C25;
border-left:155px solid transparent;
-moz-transform:rotate(-34deg);
-webkit-transform:rotate(-34deg);
-ms-transform:rotate(-34deg);
transform:rotate(-34deg);
-o-transform:rotate(-34deg);
box-shadow:0 10px 12px -6px #777;
}
#two{
margin:0px;
width:490px;
height:400px;
background:#EEEEEE;
box-shadow:5px 5px 6px #777;
}
#tree{
float:left;
width:345px;
height:100px;
background:#EEEEEE;
box-shadow:1px 4px 8px #777;
}
</style>
</head>
<body>
<div id="two"></div>
<div id="tree"></div><div id="one"><div id="five"></div></div>
</body>
</html>
|
рони,
Ага, как-то так и думал. Может все-таки забью на 8й IE... Спасибо! Цитата:
|
Aetae,
ну что же ты так категорично, в ИЕ (старых) тоже есть фильтры трансформы... |
вот веб-генератор для этих целей http://demos.aimweb.name/css-transform-generator/
|
devote,
отличная ссылка, спасибо! P.S. Поставьте кто-нибудь плюсы devote и рони, а то я должен добавить отзыв кому-то ещё, прежде чем смогу снова добавить им |
На самом деле основная проблема тут в тени. Неровные тени нормально можно только фильтром запилить. Если составлять из кусков - всё равно г-но выйдет.
|
Цитата:
|
Только ff:
<style>
div{
background: linear-gradient(-15deg,
transparent 0,
transparent 14px,
#ddd 15px,
#ddd 100%);
width:100px;
height:100px;
position:relative;
filter:url(#f3);
resize:both;
overflow: hidden;
}
div:after{
content: "";
display:block;
background: linear-gradient(15deg,
transparent 0,
transparent 14px,
#f70 15px,
#f70 100%);
transform: rotate(-30deg);
width:58px;
height:15px;
position:absolute;
bottom:0;
right:0;
}
</style>
<svg height="0" width="0">
<defs>
<filter id="f3" x="-0.2" y="-0.2" width="200%" height="200%" >
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
</svg>
<div contenteditable="true">div</div>
Хз как в других браузерах добиться такой же простоты.) |
| Часовой пояс GMT +3, время: 08:14. |