Как закруглить углы изображения на css без фотошопа

Еще один пример закругления углов с псевдоэлементами и без дополнительных блоков

g src=»https://i1.wp.com/seodon.ru/primery/html-css/obshhaja-verstka/images/zakruglennye-ugly-s-pomoshhyu-psevdoelementov-2.png» height=»110″ width=»157″> Этот пример похож на предыдущий, но здесь для расстановки псевдоэлементов используется позиционирование. Благодаря такому подходу появилась возможность явно указывать высоту блока с закругленными углами.


Пример HTML и CSS: закругление углов, где можно изменять высоту блока

сайт — Закругляем углы в CSS с помощью псевдоэлементов, где у блока можно задавать высоту Содержимое блока.

И снова для IE6 и IE7 добавляем внутрь основного блока несколько дополнительных элементов с помощью expression, а код закрываем в условные комментарии. Вот только в этот раз мы даже не будем пытаться эмулировать псевдоэлементы, а поступим проще.

  1. Добавляем внутрь «block» четыре тега и применяем к ним позиционирование. А потом просто указываем им уголки-изображения в качестве фона и расставляем по углам основного элемента. То есть поступаем в точности так, как в одном из рассмотреных выше способов.
  2. Чтобы избавиться от однопиксельного бага (о котором выше говорилось не раз) добавляем к правым элементам-уголкам левое поле (CSS ) со стопроцентным значением и отрицательное смещение равное -9px. Вообще, если помните, это смещение должно быть равно ширине блока-уголка (у нас это 11px), но не забывайте о рамке в 2px, которая у нас здесь есть — нам ведь надо положить уголки поверх нее (11px-2px=9px).

К слову сказать, на самом деле проще было бы все-таки эмулировать псевдоэлементы, как мы это сделали в предыдущем примере — так добавочный код был бы меньше. Но только не в IE6, для этого браузера понадобилось бы еще несколько «костылей» и, как следствие, пришлось бы писать два отдельных условных комментария — для IE6 и IE7, а это только раздуло бы код…

В Firefox этот способ работает корректно с версии 3.6, а в Opera — с версии 10.0, костыли для них я придумывать не стал, так как это малоактуально.

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.

Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

5 способов скругления углов с Css3

1. Для моих пяти способов я создам html-документ, а также файл таблицы стилей с расширением «.css». html-файл я назову «borders.html», а файл таблицы стилей «borders.css» и размещу эти файлы в одном каталоге.

Разметка html-файла будет достаточно простой. Я просто подключаю к нему созданную таблицу стилей, а между тегов «body» размещаю 5 блоков «div» с различными идентификаторами. Внутри каждого блока будет абзац с текстов, чтобы блок не был пустым. Для html-файла это все. Вот его код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="borders.css">
<title>Borders</title>
</head>
<body>
<div id="border0">
<p>This is content for border number zero. It has border-radius</p>
</div>
<div id="border1">
<p>This is content for border number one. It has border-radius</p>
</div>
<div id="border2">
<p>This is content for border number two. It has border-radius</p>
</div>
<div id="border3">
<p>This is content for border number three. It has border-radius</p>
</div>
<div id="border4">
<p>This is content for border number four. It has border-radius</p>
</div>
</body>
</html>

2. Вся остальная работа будет с файлом таблицы стилей. Он уже подключен к нашему html-документу и теперь осталось только открыть его и начать с ним работать.

Сначала я задам несколько основных стилей для страницы и ее элементов. Я задам ширину страницы; выровняю блоки «div» так, чтобы они располагались в центре; придам им фоновый цвет; создам для блоков отступы, а также сделаю для них рамку в 1 пиксель.

Вот код, задающий основные стили для страницы:

body{text-align:center;
width:960px;
margin:0 auto}
#border0,#border1,#border2,#border3,#border4{
	margin-left:320px;
	margin-top:20px;
	padding:5px;
	width:300px;
	height:150px;
	background:#FFC;
	border:1px solid #F90;
}

А вот то, что мы увидим, если просмотрим страницу в браузере.

Пока что ничего особенного. Просто 5 квадратных блоков, но сейчас мы сделаем им разные интересные формы.

3. Начнем с первого блока с идентификатором «border0». Ему мы придадим самое обычное скругление. Для этого для свойства «border-radius» нужно лишь указать радиус скругления и все 4 угла будут округлены согласно этому радиусу.

#border0{border-radius:20px;}

4.Это самое простое. Давайте немного усложним задачу и получим другую форму.

Мы можем придать каждому углу разный радиус скругления. Делается это вот так:

#border1{
	border-radius:25px 50px 25px 85px;
}

Первый параметр – это верхний левый угол, второй – верхний правый, третий – нижний правый, четвертый – нижний левый.

Получим вот такой результат:

5. Продолжим наши эксперименты со скруглением углов.

Мы также можем скруглять углы не только по радиусу круга, но и по радиусам эллипса. Для этого сначала нужно указать тот угол, над которым мы будем работать, а потом передать свойству 2 параметра: первый – горизонтальный радиус эллипса, а второй для вертикального радиуса эллипса. Просто представьте в углу вашего блока эллипс и Вам сразу станет понятно, каким образом скруглится угол.

В следующем примере я задаю радиусы скругления для верхнего левого и верхнего правого углов:

#border2{
border-top-left-radius:150px 30px;
border-top-right-radius:150px 30px;
}

Вот такой результат мы получим:

6. Таким же образом можно обработать все углы блока и тогда уже получится совсем другой результат:

#border3{
	border-top-left-radius:150px 30px;
	border-top-right-radius:150px 30px;
	border-bottom-right-radius:150px 30px;
	border-bottom-left-radius:150px 30px;
}

7. А теперь попробуйте сделать тоже самое, но только установите для углов различные значения радиусов эллипса:

#border4{
	border-top-left-radius:100px 40px;
	border-top-right-radius:50px 50px;
	border-bottom-right-radius:100px 50px;
	border-bottom-left-radius:120px 30px;
	margin-bottom:20px;
}

Поэкспериментировав с этим способом можно получать различные интересные формы. А если Вы еще и придадите тень Вашим блокам, то они будут выглядеть еще интереснее и эффектнее.

Надеюсь этот короткий урок был Вам полезен. Я думаю, Вы обязательно найдете применение этим приемам и сможете разнообразить страницы Ваших сайтов. Если нужен полный код – качайте с исходников (в начале статьи).


Пишите свои комментарии, делитесь Вашим мнением и успехами, а также пишите какие темы Вам интересны – буду очень признательна.

Также Вы можете поделиться этим уроком со своими друзьями при помощи кнопок социальных сетей ниже. И конечно же подписывайтесь на обновление блога, если Вы еще на него не подписаны. Со временем я планирую собрать достаточно большой архив полезной информации для веб мастеров и веб дизайнеров… так что оставайтесь на связи!

Ограничения и известные проблемы

  • Программа скругления углов выглядит просто, но на самом деле это самая сложная программа из всех, что я когда-либо писал. Несмотря на 4 месяца отладки в ней несомненно еще есть ошибки и недоработки. Пожалуйста, присылайте мне чертежи с контурами, которые программа не смогла обработать. Вместе мы сделаем программу лучше.
  • Есть много случаев, когда построить дугу скругления принципиально невозможно. Законы геометрии нельзя обмануть.
  • Узкие длинные «кишки», в которые не проходит заданная фреза, конечно, не будут скруглены — это просто невозможно. Чтобы отрезать этот кусок контура, выберите 2 несмежных сегмента на входе в кишку (нажав CTRL) и вызовите FP. Программа попробует сделать скругление между этими сегментами и сотрет непроходимый участок контура.
  • Программа не пытается удлинять сегменты перед скруглением. Если заданный диаметр недостаточен, чтоб дотянуться от конца одного сегмента до начала второго, то скругление не будет построено.
  • Программа не проверяет контур на наличие узких мест. Возможно останутся участки, где фреза просто не помещается. Проверьте результирующий контур на проходимость с помощью команды _Offset.
  • Замечено, что иногда построенную программой полилинию не может обработать команда _Offset. Это иногда происходит, когда оффсет должен поглотить одну из дуг скругления. Попробуйте чуть увеличить радиус дуг скругления (просто потяните среднюю точку к концам дуги) — это помогает.

Как сделать скругление заданием радиуса

Команда Скругление расположена на инструментальной панели Геометрия.

Вызываем команду и на Панели параметров указываем радиус скругления

Также важное значение имеют свойства «Усекать элемент 1» и «Усекать элемент 2». Как определить, что такое элементы 1 и 2? При построении скругления необходимо кликнуть по двум объектам между которыми скругление и будет строиться

Элемент 1 — элемент по которому кликаем вначале.

Например, нам нужно построить скругление на углу с радиусом 50 и чтобы оба отрезка усекались. Параметры должны быть указаны следующим образом:

Было вот так:

Вначале указали горизонтальный отрезок, потом вертикальный, получили вот так:

Условие, чтобы оба объекта пересекались не является обязательным, например можно построить скругление между двумя вот такими отрезками:

Результат:

Или двумя замкнутыми кривыми

Результат:

Описание

В качестве исходных данных вы можете выделить две линии или линию и дугу. Главное чтоб они лежали в одной плоскости и имели общую точку. Так же вы можете выбрать через Ctrl два сегмента полилинии (прямых или дугообразных). 

Во время выбора объектов вам будут доступны опции:

  • ДИаметр — ввод диаметра фрезы
  • частиВКЛ/частиВЫК- включить режим выделения подобъектов (сегментов полилинии), чтоб не держать Ctrl.
  • СТоронаФрезы/ВСеУглы — делать скругления только со стороны прохода фрезы по контуру, или скруглять все углы.
  • ПЕреключитьСтиль — Быстро переключить стиль настроек ЧПУ, используя номер стиля.
  • НАстройка — вызов диалога настройки

Если в настройках текущего стиля ЧПУ не задан диаметр фрезы, то он будет запрошен. Вы можете задать любой диаметр фрезы. По умолчанию диаметр равен 8мм или пол дюйма (в зависимости от единиц чертежа).

Во время ввода диаметра вы так же можете выбрать опцию НАстроить, чтоб вызвать диалог настроек.

Если не отмечена опция «С двух сторон», то программа попросит  выбрать с какой стороны контура пойдет фреза – снаружи или изнутри контура. Можно задать это с помощью слоев – если контур на слое NC_Наружный, то выборка делается снаружи, если NC_Внутренний — то изнутри.

Программа начертит дугу диаметром чуть больше фрезы (зазор тоже настраивается) по касательной к обоим сегментам и подрежет сегменты для стыка с дугой. Программа не умеет удлинять сегменты для построения скругления. 

Если сегмент полилинии окажется слишком короткими для сопряжения с дугой скругления, то программа подтянет дугу к концу этого сегмента. Если попытка скругления не увенчалась успехом, то программа попробует построить скругление следующих сегментов. Но это работает только для коротких сегментов, в пределах диаметра фрезы. 

Вы можете настроить программу пропускать тупые углы. Делать скругления в слишком тупых углах не имеет смысла, т.к. отличие от исходного контура может оказаться едва заметными, меньше погрешности.  Программа автоматически вычислит самый тупой угол, для которого имеет смысл делать скругление. Например, для фрезы 8мм и погрешности 0.5мм будут проигнорированы углы тупее 122.1° . Пропуск тупых углов настраивается в диалоге настроек ЧПУ.

Imageonline.com.ua – позволит вырезать фото по кругу

Еще один инструмент онлайн — Imageonline.com.ua, который позволит вам легко и просто обрезать фото в разных рамках, в том числе и по кругу. Это бесплатный инструмент, который имеет в запасе много различных эффектов и инструментов для работы с вашим изображением. Этот инструмент предлагает вам заочное обрезание, в котором вы только настраиваете нужные параметры и настройки и не видите будущий результат, посмотреть можно только тогда, когда фото уже обрежется.

Онлайн скруглитель imgonline.com.ua

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

  1. Откроется окно с настройками вашей будущей картинки. Окно состоит из 3 блоков.
  2. В первом блоке нужно выбрать ваше изображение на компьютере и загрузить его на сервис.
  3. Второй блок представляет собой основные настройки будущей фотографии, где вы выбираете рамку для обрезки, место обрезки, повернуть или отобразить зеркально, сглаживание краев и т.д.
  4. Последний блок с выбором 2 расширений будущего фото и настройкой качества изображения.
  5. После того, как вы нажмете кнопку «Ок» в новой вкладке откроется ваша обрезанная фотография, где вы сможете посмотреть на результат работы скруглителя.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Шаг 1

Создайте папку (например, folder) и поместите в ее директорию простую HTML страницу (например, index.html). Эта страница должна содержать следующий код:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

XHTML

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Урок 1</title> <link href=»style/style.css» rel=»stylesheet» type=»text/css» /> </head> <body> <div id=»container»> <div id=»top_corners»> <b class=»xb1″></b><b class=»xb2″></b><b class=»xb3″></b><b class=»xb4″></b><b class=»xb5″></b><b class=»xb6″></b><b class=»xb7″></b> </div> <div class=»content»> <p>Данный блок закруглен без использования картинок</p> </div> <div id=»down_corners»> <b class=»xb7″></b><b class=»xb6″></b><b class=»xb5″></b><b class=»xb4″></b><b class=»xb3″></b><b class=»xb2″></b><b class=»xb1″></b> </div> </div> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<meta http-equiv=»Content-Type»content=»text/html; charset=utf-8″ />

<title>Урок 1</title>

<link href=»style/style.css»rel=»stylesheet»type=»text/css» />

</head> <body>

<div id=»container»>

<div id=»top_corners»>

<b class=»xb1″></b><b class=»xb2″></b><b class=»xb3″></b><b class=»xb4″></b><b class=»xb5″></b><b class=»xb6″></b><b class=»xb7″></b>


</div>

<div class=»content»>

<p>Данный блок закруглен без использования картинок</p>

</div>

<div id=»down_corners»>

<b class=»xb7″></b><b class=»xb6″></b><b class=»xb5″></b><b class=»xb4″></b><b class=»xb3″></b><b class=»xb2″></b><b class=»xb1″></b>

</div> </div> </body> </html>

Для того чтобы понять где, что и как, мы разберем код нашего файла index.html более подробно.

Итак, «xb1″,»xb2″,»xb3″,»xb4″,»xb5″,»xb6″,»xb7»- это блоки, при помощи которых и создаются наши закругленные углы. Данные блоки расположены горизонтально один под другим, как пешеходная зебра, к примеру. Т.е. вначале идет блок «xb1», затем блок «xb2», после этого блок «xb3″и так до блока «xb7» включительно. Все блоки отличны, либо равны, по своей ширине от блока «соседа» (в противном случае закругления углов блока у нас не было бы, в итоге мы получили бы обычный прямоугольник).

Блок «top_corners» — блок, в котором расположены блоки «xb1″,»xb2″,»xb3″,»xb4″,»xb5″,»xb6″,»xb7» в порядке возрастания. За счет данной последовательности («xb1″,»xb2″,…,»xb7») образуются верхние закругленные правый и левый углы нашего блока.

Блок «down_corners» — блок, в котором расположены блоки «xb7″,»xb6″,»xb5″,»xb4″,»xb3″,»xb2″,»xb1» в порядке убывания. Если придерживаться этой последовательности («xb7″,»xb6″,…,»xb1»,), то у нас образуются закругленные нижние правый и левый углы.

Т.о., мы создали все четыре закругленных угла блока (при помощи блоков «xb1″,»xb2″,…,»xb7″). Но у вас наверняка возникнет вопрос: » – Зачем нам блок «content»?». Данный блок является контентной частью нашего блока (блока с закругленными углами). Если в блоке должна располагаться какая-либо информация, то ее необходимо прописывать именно в рамках блока «content».

Теперь мы понимаем, что наш создаваемый блок с закругленными углами состоит из 3-х подблоков.

Также вашему вниманию хочу привести увеличенное изображение левого верхнего угла блока:

А также нижнего левого:

Другие инструменты для фото

Создавай Коллажи из Фото

Создавайте коллажи с большим выбором шаблонов и используйте расширенные настройки, чтобы настроить дизайн. Процесс создания коллажа очень простой: просто загрузите фото в готовый шаблон, поменяйте их местами если это потребуется, настройте цвет рамки или добавьте фон, также опционально вы можете добавить текст или клипарт к коллажу. Создать Коллаж

Изменить Размер Фото

Этот простой редактор поможет тебе быстро изменить размер фото под нужную ширину и высоту с сохранением пропорций. Этот инструмент будет полезен, если вы хотите уменьшить или увеличить размер фото до определенного количества пикселей по ширине или высоте. Изменить Размер

Обрезать Фото Онлайн

Нужно обрезать фото? Легко! Воспользуйтесь нашим редактором, который поможет быстро обрезать фото в нужной области. Вы также можете выбрать из списка пропорции обрезки, например, фото 3х4 или обложка Youtube, это сделает обрезку максимально точным. Обрезать Фото

Отразить и Повернуть Фото

Нужно быстро зеркально отразить фото? Тогда воспользуйтесь нашим простым редактором, который поможет вам быстро отразить фото вертикально или горизонтально, а также повернуть фото вправо или влево. Отразить Фото

Размыть Фото Онлайн

Нужно сделать фон или фото в размытом стиле? Тогда этот редактор поможет вам это реализовать это очень быстро и качественно. Просто загрузите фото и настройте глубину резкости размытия и через мгновение вы получите размытое фото. Этот инструмент будет полезен, если вам нужно сделать размытый фон или просто обработать фото. Размыть ФОто

Фото Фильтры и Эффекты

Этот редактор имеет большой набор фото фильтров и эффектов, которые придадут вашему фото особый стиль. Используя этот инструмент, вы можете получить ретро фото стиле начала 20-го века или сделать яркое фото в стиле диско с цветными градиентами и еще сотни вариантов дизайна! Фото Фильтры

Добавить Рамку для Фото

Воспользуйся большим набором красивых фоторамок, чтобы сделать ваше фото в уникальном стиле. Чтобы добавить рамку к фото, просто откройте редактор и выберите понравившийся вариант рамки из списка (например рамка в стиле винтаж или гранж) или вы можете просто добавьте цветную обводку к фото. Фото Рамки

Арт Фильтры для Фото

Этот удивительный инструмент на основе нейронных сетей, позволит вам за несколько секунд, трансформировать ваше фото в картину известного художника. Эти фильтры имеют разные художественные стили и основаны на картинах известных художников, так что не упустите шанс стать еще ближе к искусству! Арт Фото

Красивые Текстуры для Фото

Наш фоторедактор имеет десятки необычных текстур, которые можно наложить на фото и настроить уровень прозрачности. Все текстуры отсортированы по категориям, поэтому вам будет легко выбрать самый оптимальный вариант для вашего фото. Фото текстуры

Добавить Текст на Фото

Этот инструмент будет полезен, если вам нужно быстро добавить к фото один или несколько текстов. Воспользуйтесь большим выбором разнообразных шрифтов, которые отразят настроение ваших слов лучше всего. Чтобы начать, просто загрузите фото в редактор и выберите шрифт из списка, введите текст и настройте его цвет и размер. Добавить Текст

Добавить Клипарт к Фото

Этот инструмент сделает настроение для любой фотографии или изображения. Выберите подходящий стикер из сотен видов клипарта и добавьте к своему фото одним кликом. Перетаскивайте стикеры внутри фото и настраивайте их по своему желанию. Фото Клипарт

Эффект Виньетки для Фото

С этим инструментом вы сможете быстро добавить виньетку к фото и настроить параметры яркости и насыщенности. Виньетка делает края фотографии немного затемненными и увеличивает визуальный фокус центра фото. Фото Виньетка


Тилт Шифт Эффект для Фото

Хочешь сделать эффект Тилт Шифт для фото? Попробуй инструмент Tilt Shift от нашего бесплатного фоторедактор, который позволяет быстро настроить величину фокуса и глубину размытия изображения. Вам больше не нужно скачивать дополнительные программы, чтобы добиться эффекта Тилт Шифт. Тилт Шифт

Оцените этот инструмент: Ужасно Плохо Нормально Хорошо Отлично 5 / 5 55 голосов

Информационный уголок:

i

Текст

<div class=»corner-box-5″> <div class=»corner-icon-cont-5″> <span class=»corner-icon-5″>i</span> <div class=»corner-textbox-5-2″> Текст — 2 </div> </div> <div class=»corner-textbox-5″> Текст </div> </div>

1 2 3 4 5 6 7 8 9 10 11

<div class=»corner-box-5″>

<div class=»corner-icon-cont-5″>

<span class=»corner-icon-5″>i</span>

<div class=»corner-textbox-5-2″>

            Текст — 2

</div>

</div>

<div class=»corner-textbox-5″>

        Текст

</div>

</div>

.corner-box-5 { display:inline-block; margin: 10px; width: 300px; border: 1px solid #ccc; border-radius: 3px; padding: 30px; overflow: hidden; position: relative; z-index: 2; } .corner-icon-cont-5 { color: #fff; } .corner-icon-cont-5:before { content: »; height: 50px; width: 50px; transition: 0.5s ease; border-radius: 0 0% 100% 0; background: #337AB7; top: 0; left: 0; position: absolute; z-index: 1; } .corner-icon-cont-5:hover { width: 100%; height: 100%; } .corner-icon-cont-5:hover:before { border-radius: 0; width: 150%; height: 150%; transition: 0.5s ease; } .corner-icon-cont-5:hover .corner-icon-5 { top: -50%; left: -50%; transition: 0.5s ease; } .corner-icon-cont-5:hover .corner-textbox-5-2 { transition: 0.5s ease; top: 50%; left: 0; z-index: 4; } .corner-icon-5 { position: absolute; top: 0; left: 0; z-index: 3; transition: 0.8s ease; padding: 10px 16px; font-weight: bold; } .corner-textbox-5-2 { position: absolute; top: -200%; transform: translateY(-50%); transition: 0.4s ease; width: 100%; color: #fff; left: -200%; padding: 30px; } .corner-textbox-5 { text-align: center; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

.corner-box-5 {

displayinline-block;

margin10px;

width300px;

border1pxsolid#ccc;

border-radius3px;

padding30px;

overflowhidden;

positionrelative;

z-index2;

}

.corner-icon-cont-5 {

color#fff;

}

.corner-icon-cont-5:before {

content»;

height50px;

width50px;

transition0.5sease;

border-radius0%100%;

background#337AB7;

top;

left;

positionabsolute;

z-index1;

}

.corner-icon-cont-5:hover {

width100%;

height100%;

}

.corner-icon-cont-5:hover:before {

border-radius;

width150%;

height150%;

transition0.5sease;

}

.corner-icon-cont-5:hover .corner-icon-5 {

top-50%;

left-50%;

transition0.5sease;

}

.corner-icon-cont-5:hover .corner-textbox-5-2 {

transition0.5sease;

top50%;

left;

z-index4;

}

.corner-icon-5 {

positionabsolute;

top;

left;

z-index3;

transition0.8sease;

padding10px16px;

font-weightbold;

}

.corner-textbox-5-2 {

positionabsolute;

top-200%;

transformtranslateY(-50%);

transition0.4sease;

width100%;

color#fff;

left-200%;

padding30px;

}

.corner-textbox-5 {

text-aligncenter;

}


С этим читают