Когда применять высоту/ширину в 100%?
Высота в 100%
Давайте сперва разберемся с менее сложным примером. Когда использовать height: 100%? Вообще-то многие из нас как минимум единожды задавались вопросом “какого черта? Я рассчитывал на то, что моя страница будет как минимум занимать всю высоту экрана!” Я прав?
Для того, чтобы ответить на этот вопрос, необходимо понимать, что на самом деле означает свойство height: 100%: полную высоту родительского элемента. Это далеко не означает “всю высоту экрана”. Так что если вы хотите, чтобы ваш контейнер занимал всю высоту экрана, height: 100% недостаточно.
Почему? Потому, что родительский элемент вашего контейнера (body) имеет высоту по умолчанию auto, что означает, что его размер определяется содержимым. Так что можете попробовать проставить height: 100% и для элемента body — это все равно не даст желаемого эффекта.
Почему? Потому, что родительский элемент тега body (html) имеет высоту по умолчанию auto, что означает, что его размеры зависят от содержимого. А что если попробовать задать элементу html height: 100%? Работает!
Почему? На самом деле потому, что корневой элемент (html) — это не самый последний родительский блок на странице — есть еще окно просмотра (viewport). Проще говоря — это окно браузера. Так что если задать height: 100% элементу html, вы сделаете его высоту, равной высоте браузера. Вот так-то просто.
Результат нашей истории отражен в следующем коде:
html, body, .container {
height: 100%;
}
А что если у родительского элемента задан min-height, но не задан height?
Roger Johansson недавно выявил проблему с height: 100% в случае когда у родительского элемента нет назначенной высоты, но для него задана минимальная высота. Я не буду углубляться в описание, но в итоге решение состоит в том, что родительскому элементу нужно задать высоту в 1px, так чтобы дочерний элемент мог растянуть его до min-height.
.parent {
min-height: 300px;
height: 1px; /* Необходим для того, чтобы дочерний элемент раскрылся на всю высоту min-height */
}
.child {
height: 100%;
}
Ширина в 100%
Теперь давайте разберемся с параметром width: 100%. Сразу напомню, что, как и с высотой, настройка width: 100% — это указание, что элемент должен быть такой же ширины, как и родительский элемент. Никаких сюрпризов здесь нет.
А сейчас поделюсь небольшим секретом. Ширина — не совсем правильное название для этого свойства. Свойство width на самом деле не определяет всю ширину элемента, а только ширину его содержимого, что совершенно отличается от полной ширины элемента.
Если мы добавим внутреннее поле и границы к вашему элементу, которому выставлена ширина width: 100%, то этот элемент уже не будет вписываться в родительский — он будет выходить за его пределы. Все это из-за полей и границ. И именно поэтому свойство width должно было бы называться content-width (шириной контента). Пожалуйста, рассмотрите следующий пример, чтобы понять, что я имею в виду:
Ширина родительского элемента равна 25em. Ширина дочернего элемента равна 100% (от его родительского элемента), но также имеет поля размером 1em (1em слева, 1em справа. В сумме по горизонтали это будет 2em), а также границу в 0.5em (всего 1em по горизонтали), что приводит к тому, что результирующая ширина дочернего элемента состовит 25em(100%) + 2em + 1em = 28em. Хмм… Хьюстон, похоже, у нас проблема.
Есть четыре способа поправить положение дел. Первый, и определенно лучший — избегать установки width: 100%, особенно если в этом нет пользы, как в данном случае. Дочерний элемент является блочным элементом, что автоматически расширяет его до ширины родительского элемента (без той проблемы, что мы видим выше). К сожалению, если мы имеем дело со строчно-блочными элементами, то можно воспользоваться следующим фиксом.
Можно не использовать width: 100%, и выставить конкретную ширину элементу самостоятельно. В нашем случае, это 20 — (2 + 1) = 22em. Надо сказать, что это решение плоховато, так как нужно вручную вычислять необходимую ширину элемента. Поищим другой способ!
Третьим вариантом будет использование calc(), чтобы автоматизировать вычисления: width: calc(100% — 3em). Все равно плохо. Во-первых, нам нужно вычислять сумму горизонтальных полей + вертикальных границ. Во-вторых, calc() поддерживается не самым лучшим образом в браузерах (его не поддерживают IE 8, Safari 5, Opera 12 и стандартный браузер Android).
Четвертый вариант — использовать свойство box-sizing: border-box. По существу, она меняет поведение модели контейнера так, что свойство width отражает суммарную ширину элемента, границы и поля включены. Хорошие новости заключаются в том, что поддержка браузерами этого свойства довольно хороша (все, кроме IE 7- и Opera 9).
Тень для рамки картинки
Для того, чтобы создать тень для рамки картинки нам понадобится пройти весь dwit описанный путь,
или просто взять скопировать код рамки из выше описанного пункта:
<style>.ramka_kartinki_css_2{ border: 1px solid black; padding: 4px;}</style>
И добавим в стили, тень для рамки, вы можете поиграться с цифровыми значениями тени рамки картинки:box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.22)
Соберем стили :
Css: <style>.ramka_kartinki_css_2{ border: 1px solid black; padding: 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.22);}</style>
Html :
В коде html меняем название класса :
<img class=»ramka_kartinki_css_2″ src=»https://dwweb.ru/__img/css/figure/bear.jpg»>
Соберем весь код вместе:
<style>.ramka_kartinki_css_2{ border: 1px solid black; padding: 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.22);}</style>
<img class=»ramka_kartinki_css_2″ src=»https://dwweb.ru/__img/css/figure/bear.jpg»>
Что такое блочная модель?
В соответствии с концепцией блочной модели, каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы.
Это стоит повторить: Каждый элемент на странице представляет собой прямоугольный блок.
Рис. 4.01. Когда мы смотрим на каждый элемент по отдельности, то можем увидеть, что все они прямоугольны, независимо от их представленных форм
Каждый элемент на каждой странице соответствует блочной модели, так что это невероятно важно. Давайте взглянем на неё, наряду с несколькими новыми свойствами CSS, чтобы лучше понять, как мы можем с этим работать
Свойство border-image-slice
После того как вы выбрали изображение с помощью border-image-source, вы применяете его к рамке, используя свойство border-image-slice:
element {
border-image-slice: 19;
}
Это свойство задает внутренние смещения от верхней, правой, нижней и левой стороны. Смещения разделяют изображение на 9 областей: четыре угла, четыре стороны и посередине:
В качестве значения вы можете указать от одного до четырех чисел или проценты. При указании четырех значений они применяются для смещений сверху, справа, снизу и сверху. Если вы пропускаете смещение слева, оно задается таким же, как справа. Если вы пропускаете смещение снизу, оно будет таким же, как сверху. Если вы пропустите значение смещения справа, оно будет установлено таким же, как смещение сверху. Если использовать только одно значение, оно будет использоваться для всех четырех смещений.
Процентные значения обозначают проценты от размеров изображения — ширины изображения для горизонтальных смещений и высоты для вертикальных.
Числа обозначают пиксели изображения, или координаты в случае, если это векторное изображение. Не добавляйте px после числа – в этом случае свойство не будет работать.
Вот как вы можете использовать border-image-slice:
<div class="box"> Border Image Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> .box { border: 19px dotted #c905c6; border-image-source: url(border-bg.png); border-image-slice: 19; }
Используя для рамки изображение размером 100 на 100 пикселей, которое выглядит следующим образом:
мы получим что-то выглядящее вот так:
Средняя область выводится полностью прозрачной, поэтому она не видна. Если вы хотите сделать ее видимой, добавьте ключевое слово fill.
Например, использовав изображение с непрозрачной центральной областью, вы получите такой же результат, как на рисунке выше.
Применив ключевое слово fill следующим образом:
.box {
border: 19px dotted #c905c6;
border-image-source: url(border-fill.png);
border-image-slice: 19 fill;
}
с изображением, содержащим в центральной области детализированный контент:
мы получим область с полностью видимым изображением, хотя оно и будет размытым и деформированным:
Свойство border-image-source
С помощью этого свойства назначается фоновое изображение для элемента рамки. Принимаемое значение – это URL-адрес изображения:
element {
border-image-source: url('myimage.png');
}
Также это свойство отлично работает с градиентами CSS:
element {
border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}
В браузере это выглядит примерно так:
Если вы установите для этого свойства значение none, или изображение не может быть отображено, то браузер будет использовать значения свойства border-style. Поэтому нужно использовать border-style в качестве запасного варианта.
Изображение, которое вы используете, не обязательно должно совпадать с рамкой по ширине и высоте. CSS установит нужные размеры автоматически.
Адаптивное закругленное изображение с использованием CSS
Нравится нам это или нет, но адаптивный веб-дизайн является важным требованием для веб-сайтов. Давайте посмотрим, что нам нужно изменить в нашем CSS-коде кругового изображения выше, чтобы сделать его адаптивным.
HTML-код остается прежним, потому что нам все еще нужен элемент-обертка:
HTML
<span class="circle-image"> <img src="/your-image.jpg"/> </span>
и адаптивный CSS-код, закругляющий наше изображение:
CSS
.circle-image{
display: inline-block;
overflow: hidden;
width: 33%;
padding-bottom: 33%;
height: 0;
position: relative;
}
.circle-image img{
width:100%;
height:100%;
position: absolute;
border-radius: 50%;
object-fit: cover;
}
Итак, что мы изменили?
Ну, во-первых, мы установили ширину (width) элемента span («обертки») в процентах. Это делает изображение круга адаптивным. Автор использовал значение, равное 33%, поэтому он будет масштабирован до 1/3 контейнера изображения.
Мы знаем, что для размещения адаптивных изображений, нужно использовать намного больше CSS, таких как, например, медиа-запросы, но это выходит за рамки этой статьи.
Есть один хитрый трюк, чтобы превратить фигуру в квадрат: установка height равной 0 и padding-bottom, равного ширине (width) элемента. Это нужно нам для того, чтобы убедиться, что изображение становится кругом, а не сжатым овалом.
Этот трюк автор статьи придумал не сам, а нашел здесь.
И последнее, что мы установили для элемента «обертки» — правило position: relative. Это связано с тем, что изображение внутри будет иметь position: absolute, и мы хотим, чтобы изображение было позиционировано как абсолютное, относительно элемента обтекания, а не всего документа. Наконец, мы снова установим border-radius равный 50%, но на этот раз для изображения. Это сделает изображение закругленным.
Резервные значения
Как для любого другого настраиваемого свойства, здесь можно получать (используя var) или устанавливать (записывать/перезаписывать) значения. Но с настраиваемыми Houdini-свойствами, если при переопределении установить неожиданное для него значение, механизм визуализации CSS вместо игнорирования строки отправит предустановленное начальное значение.
Рассмотрим пример ниже. Начальное значение для переменной установлено . Затем разработчик присвоил ему недопустимое для цвета значение . Без CSS-парсер проигнорирует недопустимую пару свойство-значение. С синтаксический анализатор в этом случае вернёт начальное значение .
Свойство border-width. Толщина границы.
Для установки толщины границы элемента используется свойство border-width
. Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.
Как и для свойства border-style
, для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.
Код примера:
Толщина границы в CSSОдно значение (2px) — толщина границы установлен для всех сторон блока.
Два значения (1px 5px) — первое значение установило толщину для верхней и нижней сторон, второе для боковой.
Три значения (1px 3px 5px) — первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (1px 3px 5px 7px) — каждое значение для одной стороны по часовой стрелке начиная с верхней.
Также для свойства border-width
существуют значения в виде ключевых слов. Всего их три:
- thin
— тонкая граница; - medium
— средняя толщина; - thick
— толстая граница;
Толщина границы: thin.
Толщина границы: medium.
Толщина границы: thick.
Делаем (условно) желтую рамку
Чтобы не вводить вас в заблуждение, внесу ясность: на самом деле желтый цвет это не «рамка», а лишь задний фон картинки. Чтобы такое сделать, необходимо добавить внутренний отступ изображения. Фактически — мы отодвинули картинку от края конструкции, в которой задний фон желтого цвета.
Вот так выглядит код картинки, когда я только ее загрузил в статью обычным способом на WordPress (встроенным загрузчиком, которым пользуетесь и вы):
XHTML
<img class=»aligncenter size-full wp-image-2437″ title=»картинка» src=»https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg» alt=»картинка» width=»512″ height=»210″ />
| 1 | <img class=»aligncenter size-full wp-image-2437″title=»картинка»src=»https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg»alt=»картинка»width=»512″height=»210″ /> |
А вот так будет выглядеть код картинки, если добавить задний фон желтого цвета с отступом:
XHTML
<img style=»background:#FFE296;padding:15px 8px 25px 8px;» class=»aligncenter size-full wp-image-2437″ title=»картинка» src=»https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg» alt=»картинка» width=»512″ height=»210″ />
| 1 | <img style=»background:#FFE296;padding:15px 8px 25px 8px;»class=»aligncenter size-full wp-image-2437″title=»картинка»src=»https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg»alt=»картинка»width=»512″height=»210″ /> |
И наглядный результат:
Самые внимательные из вас заметили, что добавилось style=»background:#FFE296;padding:15px 8px 25px 8px;», которое и задало необходимые нам параметры:
-
style=» » — конструкция, в которой мы описываем необходимые нам свойства CSS.
-
background:#FFE296; — задаем задний фон. Здесь #FFE296 обозначает желтый оттенок. Вы можете выбрать любой другой (воспользуйтесь пипеткой FastStone Capture или такой же пипеткой в Photoshop).
-
-
padding:15px 8px 25px 8px; — внутренний отступ, где отступы задаются так padding: сверху справа снизу слева;
Проблема контекста
Скажем, у вас на домашней страничке есть большая красивая картинка. На ней —
поля и леса, голубое небо, пушистые облака, и счастливая семья устраивает
пикник на траве.
Теперь уменьшим ее до 300 пикселей по ширине для мобильных устройств. При таком
размере наше семейство больше похоже на муравьев.
Когда большое изображение уменьшается, детали теряются. (Иллюстрация: Марк Макквитти)
Такую проблему мы называем проблемой «контроля впечатления». Некоторые
изображения просто не могут хорошо масштабироваться: тонкие детали теряются,
изменяется то впечатление, которое оно производит. В случае нашего изображения,
было бы гораздо лучше, чтобы на мобильной версии изображения фотография была бы
увеличена, обрезана так, чтобы поместить в центр изображения нашу счастливую
семью. Для того, чтобы решить эту проблему, нам нужно решение для отзывчивых
изображений, которое позволяет либо задать разные версии изображения для разных
ситуаций — либо изменять изображение на лету.
Иногда для узких изображений нужен другой масштаб и обрезка. (Иллюстрация: Марк Макквитти)
Создаем закруглённые уголки с помощью CSS 3
Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.
Кроссбраузерная совместимость.
К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 3.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).
Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.
Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.
Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
<body><div></div></body>
В CSS зададим для него высоту, ширину и цвет фона:
#box { width:590px; height:100px; background-color:#6B86A6; }
Добавляем свойство border-radius:
Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box { -moz-border-radius: 20px; }
Теперь все четыре угла будут иметь радиус 20px:
Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box { -moz-border-radius:20px 40px; }
Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box { -moz-border-radius:10px 20px 30px 40px; }
Объявляем свойство border-radius для каждого угла
Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:
- -moz-border-radius-topleft для верхнего левого угла;
- -moz-border-radius-topright для верхнего правго угла;
- -moz-border-radius-bottomright для нижнего правого угла;
- -moz-border-radius-bottomleft для нижнего левого угла;
Горизонтальный и вертикальный радиус
#box { -moz-border-radius-topleft: 30px 15px; }
Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.
При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box { -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
Использование свойства border-radius в Safari и Chrome.
Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:
- -webkit-border-top-left-radius для верхнего левого угла;
- -webkit-border-top-right-radius для верхнего правого угла;
- -webkit-border-bottom-right-radius для нижнего правого угла;
- -webkit-border-bottom-left-radius для нижнего левого угла;
При использовании краткой записи необходимо иметь ввиду, что её можно использовать только когда значения для всех углов равны, если значения разные, то необходимо указывать свойства для каждого угла.
Этот код не будет работать в Safari и Chrome:
#box { -webkit-border-radius: 10px 20px 30px 40px; }
Правильный код будет выглядеть так:
#box { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 40px; }
Горизонтальный и вертикальный радиус в Safari и Chrome.
В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box { -webkit-border-top-left-radius: 30px 15px; }
При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box { -webkit-border-radius: 30px 15px; }
Примеры.
Источник
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Свойство outline
Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:
- outline выводится вокруг элемента ( border внутри);
- outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Возникает вопрос — в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:
- создание сложных разноцветных рамок;
- добавление рамки к элементу при наведении на него курсора мыши;
- сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
- для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания различных дизайнерских эффектов.
Разноцветные рамки
Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.
Пример 1. Создание рамки
В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).
Рис. 1. Рамка вокруг элемента
Рамка при использовании :hover
При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое — заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).
Пример 2. Рамка при наведении
outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод — добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.
Пример 3. Рамка при наведении
Рамка вокруг полей формы
В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.
Рис. 2. Рамка вокруг полей
Пример 4. Убираем рамку
Округленное изображение с использованием CSS свойством background-image
По сути, мы используем CSS, чтобы установить наше изображение в качестве фона HTML-элемента и сделать элемент округлым. Таким образом мы получим желаемый результат.
Вот HTML-код:
HTML
и CSS-код, закругляющий наше изображение:
CSS
.circle-image{
width: 50px;
height: 50px;
background-image: url('your-image.jpg');
background-size: cover;
display: block;
border-radius:50%;
}
Готово!
Если вам нужно расположить изображение внутри круга нестандартно, вы можете использовать CSS-свойство background-position, чтобы указать левую и верхнюю позиции или комбинации значений: bottom | top | center | left | right.
В большинстве случаев описанных решений будет достаточно, но что, если вам нужно сделать адаптивное изображение круга с помощью CSS?
Синтаксис CSS border
- border-width
— толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях) - border-style
— стиль выводимой рамки. Может принимать следующие значения- none
или hidden
— отменяет границу - dotted
— рамка из точек - dashed
— рамка из тире - solid
— простая линия (применяется чаще всего) - double
— двойная рамка - groove
— рифленая 3D граница - ridge
, inset
, outset
— различные 3D эффекты рамки - inherit
— применяется значение родительского элемента
- none
- border-color
— цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».
BOX 2
Данная рамка имеет большой загиб в нижнем правом углу с соответствующим тенями, легкая внутренняя тень заменена на небольшой поверхностный градиент.
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box2{
margin: 50px;
width: 300px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: #f3f3f3;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-bottom-right-radius: 60px 60px;
-moz-border-radius-bottomright: 60px 60px;
border-bottom-right-radius: 60px 60px;
-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}
.box2:before{
content:'';
width: 25px;
height: 20px;
position: absolute;
bottom:0;
right:0;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
-moz-transform: rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
-o-transform: rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
transform:
rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
}
/* Здесь определяется затенение загиба */
.box2:after{
content: '';
z-index: -1;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
right:0;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
-webkit-transform: rotate(0deg)
translate(-45px,-20px)
skew(20deg);
-moz-transform: rotate(0deg)
translate(-45px,-20px)
skew(20deg);
-o-transform: rotate(0deg)
translate(-45px,-20px)
skew(20deg);
transform: rotate(0deg)
translate(-45px,-20px)
skew(20deg);
}
