Форум

BETEPAH · #1 (**permalink**) 04.06.2014, 00:10

Дизайнер придумал pop-up окно с вот таким углом.
Есть какие-то идеи, как это сделать максимально кроссбраузерно и семантично?
Пока на ум пришло только добавление под pop-up'ом трех элементов с тенями, один из которых повернут под углом и png с завернутым углом. Но хотелось бы какое-то решение покрасивее.

Aetae · #2 (**permalink**) 04.06.2014, 03:03

Кроссбраузенрно - только div'ы да png. А так можно было бы с трансформами да градиентами поиграть. А то и svg\css фильтрами.
P.S. Нехороший дизайнер.)

рони · #3 (**permalink**) 04.06.2014, 03:48

BETEPAH,
мысли вслух

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

BETEPAH · #4 (**permalink**) 04.06.2014, 10:27

рони,
Ага, как-то так и думал. Может все-таки забью на 8й IE...
Спасибо!

Сообщение от Aetae

P.S. Нехороший дизайнер.)

devote · #5 (**permalink**) 04.06.2014, 10:30

Aetae,
ну что же ты так категорично, в ИЕ (старых) тоже есть фильтры трансформы...

devote · #6 (**permalink**) 04.06.2014, 10:33

вот веб-генератор для этих целей http://demos.aimweb.name/css-transform-generator/

BETEPAH · #7 (**permalink**) 04.06.2014, 10:43

devote,
отличная ссылка, спасибо!

P.S. Поставьте кто-нибудь плюсы devote и рони, а то я должен добавить отзыв кому-то ещё, прежде чем смогу снова добавить им

Aetae · #8 (**permalink**) 04.06.2014, 11:15

На самом деле основная проблема тут в тени. Неровные тени нормально можно только фильтром запилить. Если составлять из кусков - всё равно г-но выйдет.

devote · #9 (**permalink**) 04.06.2014, 11:27

Сообщение от Aetae

На самом деле основная проблема тут в тени.

ну тени тоже в ИЕ можно фильтрами сделать. Хотя не спорю, придется помучатся.

Aetae · #10 (**permalink**) 04.06.2014, 11:55

Только 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>

Хз как в других браузерах добиться такой же простоты.)

Форум

Справочник

Discord чат

Курсы javascript