Скругленные границы через CSS
Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.
В этой статье приводится пара полезных на взгляд автора рецептов. Возможны вы уже с ними знакомы, а возможно вынесите для себя что-то новое, решать вам.
1. Скругленные границы
Сразу поясню о чем речь:

Необходимо сверстать этот блок так, чтобы он тянулся по ширине и высоте. Как правило, первое что приходит в голову — сверстать таблицу 3x3. В угловые ячейки положить 4 разных изображения с уголками, в центр поместить контент, а остальным ячейкам повесить соот-ие бордеры. Способ кроссбраузерный и довольно простой. Но во-первых, верстать такие блоки таблицами не по фэншую, а во-вторых можно отказаться от четырех мелких изображений.
Итак, соберем четыре угла в одно изображение. В моем примере получился такой результат (32x26 px):

Теперь нам осталось спозиционировать это изображение в фоне четырьмя разными способами в блоках размером 16x13px, стоящими в углах блока. В результате у автора получилось вот так:
CSS:
.roundborder { border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB;} .roundborder .content { border-left:1px solid #DBDBDB; border-right:1px solid #DBDBDB; text-align:center; color:#7A7A7A; padding:10px 15px; } .roundborder .t, .roundborder .b { position:relative; height:12px; } .roundborder .t div, .roundborder .b div { position:absolute; width:16px; height:13px; padding:0; margin:0; } .roundborder .t .l { top:-1px; left:0; background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top left; } .roundborder .t .r { top:-1px; right:0; background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top right; } .roundborder .b .l { background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom left; bottom:-1px; left:0; } .roundborder .b .r { background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom right; bottom:-1px; right:0; }
HTML:
<div class="roundborder"> <div class="t"> <div class="angles l"></div> <div class="angles r"></div> </div> <div class="content"> Content </div> <div class="b"> <div class="angles l"></div> <div class="angles r"></div> </div></div>
Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом. Итак, задача решена: мы избавились от таблиц и уменьшили число HTTP-соединений на три, за счет сбора углов в один овал.
источник: fastcoder.org
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Блог им. smashercosmo / Кроссбраузерная вёрстка отформатированного кода
Добрый вечер, уважаемые читатели. Итак, для начала поясню, о чем пойдёт речь в этой статье. В интернете существует огромное количество публикаций на тему вёрстки и программирования, и в большинстве... читать далее
[Перевод] CSS: интересные возможности border-radius
Что можно сделать с помощью CSS-свойства border-radius? Автор материала, перевод которого мы публикуем, говорит, что больше, чем кажется на первый взгляд. В частности, речь идёт о том, что углы... читать далее
Жизнь фронтендера в Spotify
Изображения — это, как правило, самая «тяжелая» статика в вебе. Многие фронтендеры знают об адаптивных изображениях, которые позволяют использовать определённые изображения для разных разрешений. Но... читать далее
Шпаргалка по верстке для больших и маленьких
Хочу представить вашему вниманию небольшую шпаргалку, в которой собраны решения некоторых из часто встречающихся проблем, а также кое-какие малоизвестные, на мой взгляд, факты. Статья рассчитана... читать далее
Используем AMP как библиотеку общего назначения для создания быстрых динамических сайтов
Изменить первое впечатление очень трудно. И я говорю не только о людях. Технологии также часто становятся заложниками первого впечатления — своей первой версии. И потом несмотря на годы развития,... читать далее
[Из песочницы] Организация адаптивной верстки в БЭМ с SCSS
Одна из главных сложностей возникающая у многих фронтенд-разработчиков при использовании методологии БЭМ в CSS — это способ организации адаптивной вёрстки. Как известно блоки и элементы должны быть... читать далее
Комментарии (1)
Прокомментировать
Облако тегов
angular css CSS es6 frontend habrahabr.ru HTML html html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре vue Блог компании RUVDS.com Веб-дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт блог браузеры верстка вёрстка дайджест интернет-магазин информационный ресурс корпоративный сайт модуль мы рекомендуем портфолио разработка ссылки фронтенд
Реклама на сайте
Студия создания и продвижения сайтов hover.com.ua