От автора: Часто перед начинающим верстальщиком возникает ряд задач, которые ему нужно разрешить для выполнения верстки страницы. Одна из наиболее часто встречаемых проблем – это закругление углов блока средствами HTML/CSS.
Сегодня мы разберем и посмотрим на то, как можно закруглить углы блока. В этой статье описан метод закругления углов при помощи позиционного построения блоков.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1
Создайте папку (например, folder) и поместите в ее директорию простую HTML страницу (например, index.html). Эта страница должна содержать следующий код:
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее| 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-х подблоков.
Также вашему вниманию хочу привести увеличенное изображение левого верхнего угла блока:
А также нижнего левого:
Шаг 2
После этого в папке folder мы создаем еще одну папку (например, style). Затем в нее мы помещаем файл-CSS (например, style.css), который должен содержать следующий код:
| 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 | #container{ width: 100%; } .xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7{ display: block; overflow: hidden; } .xb1, .xb2, .xb3, .xb4, .xb5, .xb6{ height: 1px; } .xb1{ margin: 0 8px; background: #7f7f9c; } .xb2{ margin: 0 6px; background: #7f7f9c; } .xb3{ margin: 0 4px; background: #7f7f9c; } .xb4{ margin: 0 3px; background: #7f7f9c; } .xb5{ margin: 0 2px; background: #7f7f9c; } .xb6{ margin: 0 2px; background: #7f7f9c; } .xb7{ margin: 0 1px; background: #7f7f9c; height: 2px; } .content{ display: block; height: 100px; background: #7f7f9c; } .content p{ font-size: 2.5em; color: #fc0; margin: 0 10px; letter-spacing: 1px; } .top_corners{ margin: 0; padding: 0; } .down_corners{ margin: 0; padding: 0; } |
Теперь мы подробно рассмотрим код файла style.css, т.к. именно тут задаются те параметры свойств, которые в совокупности и дали нам возможность закруглить углы блока.
Начнем со свойств display: block; и overflow: hidden;, которые заданы для блоков "xb1"," xb2",…,"xb7". Эти свойства предназначены для того, чтобы блоки "xb1", "xb2",…,"xb7" выстраивались друг за другом (блочное расположение).
Для каждого блока задан свой цвет (background: #7f7f9c;) и свой отступ при помощи свойства margin.
Разберем свойства блоков "xb1", "xb2",…,"xb7" на примере блока "xb1":
.xb1{
margin: 0 8px; — отступ блока слева и справа в 8 пикселов от блока "container". Значение "0" –это отсуп блока сверху и снизу относительно блока "container" (сверху) и блока "xb2" (снизу);
background: #7f7f9c; — цвет блока.
}
Аналогично и с блоками "xb2","xb3",…,"xb7" (каждый имеет свой отступ). Можно сказать, что свойство margin в данной рассматриваемой теме является ключевым. Но не стоит забывать про свойство height, т.к. именно оно задает высоту блока (для блоков "xb1", "xb2",…,"xb6" она равна 1 пиксель, для "xb7" – 2 пикселя ).
Рассмотрим свойства блока "content". Они такие же, как и у блоков "xb1", "xb2",…,"xb7", но отличие есть только в величине высоты блока (она равна 100 пикселей). При помощи данного свойства мы можем увеличивать и уменьшать высоту блока с закругленными углами (об этом мы поговорим чуть позже).
У блока "container" есть всего лишь одно свойство width. Оно помогает нам задать ширину блока с закругленными углами. Изменения ширины блока за счет данного свойства будут рассмотрены ниже.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееБлоки "top_corners" и " down_corners" являются вспомогательными. Функциональной нагрузки не несут. При желании их можно удалить – все останется на своих прежних местах. Они введены для более ясного представления кода.
После того, как выполнены пункты 1 и 2, в окне нашего браузера появился блок с закругленными углами:
"Да, блок с закругленными углами есть, но он же растянут на всю ширину окна браузера, да и высота у него не та, что мне нужно", — скажете Вы. Но переживать по этому поводу не стоит. Данный блок можно задавать любой нам необходимой как ширины, так и высоты.
Для этого нам необходимо ознакомиться более подробно с файлом style.css., а именно вот с этими элементами и их свойствами:
| 1 2 3 4 5 6 7 8 9 10 | #container{ width: 100%; } и .content{ display: block; height: 100px; background: #7f7f9c; } |
За ширину создаваемого блока отвечает блок "container".
Как мы можем увидеть, в элементе container задана ширина блока 100% (т.е. блок тянется и располагается на всю ширину экрана браузера). Для ее изменения нам нужно изменить параметр свойства ширины блока width (сейчас он равен у нас 100%). Поставим, к примеру, 600 пикселей:
| 1 2 3 | #container{ width: 600px; } |
После внесения вышеуказанных изменений наш блок стал выглядеть так:
Для того чтобы задать нужную высоту блока, необходимо в свойствах блока "content" изменить параметр свойства высоты блока height (сейчас он равен у нас 100px). Зададим высоту блока, равную, например, 300 пикселей:
| 1 2 3 4 5 | .content{ display: block; height: 300px; background: #7f7f9c; } |
Теперь наш блок выглядит вот так:
Шаг 3
В завершении темы хотел бы поговорить еще об одной немаловажной детали – это радиус закругления угла блока. Как Вы уже поняли, закругленный угол создается именно по средствам наложения одного блока на другой (увидеть это можно на увеличенном изображении левого верхнего угла, а также левого нижнего, которое я приложил выше). Для того чтобы увеличить радиус закругления Вам просто необходимо добавить n блоков "xbn". Каждый новый блок должен иметь совершенно другое значение свойства height и margin от предыдущего. За счет этого и будет достигнут закругленный угол.
Т.о., чем больше у вас используется блоков «xbn», тем больше радиус закругления угла блока.
Также прилагаю подробную карту блоков для того, чтобы было проще во всем ориентироваться:
На этом у меня все. Спасибо за внимание.
Заключение
В этом уроке мы научились закруглять углы блоков средствами HTML/CSS. Рассмотрен метод "закругление углов блока при помощи позиционного построения блоков" закругления углов блока. Существуют еще несколько способов закругления углов блока (например, при помощи картинок; средствами CSS3, JS), но их мы рассмотрим уже в следующий раз.
Хотелось бы выделить преимущества и недостатки рассмотренного метода:
1. Этот метод исключает возможность некорректного отображения web-страницы в браузере, что является явным недостатком метода "закругление углов блока при помощи картинок" (если отключить отображение картинок в окне браузера при использовании "закругление углов блока при помощи картинок", то блок будет отображен некорректно – отсутствие закругленных углов);
2. Понятный и легкий в использовании код;
- недостатки:
1.Нужно использовать много блоков, чтобы создать один с закругленными углами.
С Новым 2011 Годом!
Автор: Михаил Влащенко
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить
а как насчет валидации и SEO ??? это допустимо?
А почему это может быть недопустимо?
В принципе учтено все, код валиден. Вопрос, если делать большой радиус скругления, не появится эффект лесенки? И еще, как IE6 отображает такой способ скругления?
IE 6 то же корректно отображает. А насчет радиуса скругления — автор конечно не я, но на сколько я разобрался то радиус скругления можно увеличить добавив еще несколько тегов <b> в верхний и нижний скругляющие div-ы. И паддинги подработать немного чтобы смотрелось аккуратно.
Эффект лесенки не появляется, если правильно позадавать ширину, высоту и отступы блока. Поддержка от IE6+, возможно и IE5, я не тестил.
С Наступающим! Вау! А зачем так сложно теперь то уже? Есть же CSS3 и box-radius. Даже под эксплорер работает, если постараться. Очень удобно и просто закругляет углы, радиус закругления можно настраивать. И тень можно через box-shadow. Рекомендую!
Спасибо за поздравление, Вас то же с наступающим!
Все верно, есть уже CSS3, который все это решает тремя строками. Но тут вопрос даже не в том, что CSS 3 поддерживают только последние версии браузеров, которые стоят далеко не у каждого пользователя. Тут дело в том, что сам сколько этим занимаюсь — ни разу про такое не слышал. Вот собственно решил что будет интересно и вам про это почитать. Может какие другие идеи родятся…
Давно есть кроссбраузерный box-radius, благодаря которому извращений в html коде не будет в принципе. Поддерживается даже IE6.
А это решение возможно интересно, если хочется почитать «как это было». Но использовать на сайте этого не стоит.
Never Lex: Полностью с тобой согласен, 1 строка лишнего кода и подключение одного файла, делает такие чудеса, например Ваш IE6 будет знать border-radius, box-shadow, multiple background images, linear-gradient — вот как это можно сделать w-blog.org.ua/?p=1727
Может автор не знает, что чем меньше размер CSS файла тем быстрее загружаются стили, Ваши 58 срок кода можно превратить в 10 срок, а получиться тоже самое.
Я лично не рекомендую пользоваться методом автора, очень он устарел.
Очень интересная статья, спасибо!
Как всегда, полезная статья, попробуем повторить.
Новогодняя загадка — кто отгадает?
Сделал я описанные 2 шага. Скопировал тексты в Блокнот. Пришлось только убирать номера строчек.
Запустил — увидел блок с закругленными краями, но вместо текста — квадратики в броузерах IE и Opera и ромбики с вопросами в Firefox и Chrom.
Сравнил свой файл и предложенный файл в папке demo по содержанию. Использовал Total Commander 7.02a. Не сравнились только 5 и 14 строки: в моем файле — нормальный текст, а в авторском — «зюки». К чему бы это всё?
Новогодняя отгадка — Новогодней загадки!
Всё дело в кодировке. Если в строке 04. вместо utf-8 написать windows-1251, то всё станет на свои места. Или в браузере изменить кодировку Настройка->Инструменты->Кодировка (в общем изменить кодировку на кириллицу).
Спасибо, Валера! Все получилось. Можно встречать Новый год с чистой совестью и чувством исполненного долга! Поздравляю тебя и всех читателей этих комментариев с Новогодними праздниками! Желаю новых успехов, новых побед, новой радости, нового, чистого, светлого, пушистого и замечательного счастья.
Считаете целесообразно писать 60 строк кода вместо 2-3 строк CSS3? Да еще и забивать головы разным хламом тем, кто пишет: «…интересная статья, полезная…». Может все таки лучше для таких объяснить что так, как в примере делать НЕЛЬЗЯ! Сейчас большинство браузеров понимают и box-radius и box-shadow. А тем, кто только начинает изучать CSS начинайте знакомиться с CSS3 и не забивайте себе головы подобными глупостями.
Конечно целесообразно! Вы отдаете отчет каждому своему действию. Если где-то что-то пойдет не так, то ваш закругленный угол уже не тот. Вы не бездумно взяли прописали две строки и все (хоть это и проще). Вы хоть как-то мыслите. Вы развиваетесь, а не деградируете.
«Великий» CSS3 это конечно круто. Им пользуется каждый первый, в том числе и я. Но данная статья не для того, чтобы забивать голову, как вы сказали, а для общего развития.
ЗЫ: читайте хотя бы заключения или выводы, в них всегда сама суть.
В заключении данной статьи четко написано, что есть еще другие способы закругления углов блока и они перечислены. Не по душе этот способ, пожалуйста, обратитесь к другому, более легкому.
Спасибо за статью. Очень полезная информация.
С Наступающим всех Новым Годом!
Адский изврат из прошлого века.
Полезный способ, видел его описание несколько раз на разных порталах — спасибо что написали эту статью здесь , но по моему мнению -в этом способе слишком много кода.
Если идет речь о блоке с радиусом закругления углов 10-15px , то смотрится неплохо , но если радиусы закруглений больше 15px приходится добавлять еще Огромное количество блоков, чтобы закругления казались плавными.
И еще :
» Этот метод исключает возможность некорректного отображения web-страницы в браузере, что является явным недостатком метода «закругление углов блока при помощи картинок» (если отключить отображение картинок в окне браузера при использовании «закругление углов блока при помощи картинок», то блок будет отображен некорректно – отсутствие закругленных углов); »
Мне кажется, если картинка заданна как Фоновая (через CSS), то браузер при отключении (в настройках отображения страницы) картинок все равно отображает фоновые рисунки , или я ошибаюсь?
PS: Мб я приверженец больше работы с графикой чем с версткой , но я не встречал браузеров способных отключить отображение абсолютно всей графики на странице, да и если даже это возможно , то зачем? Ушло время 56кб модемов как страшный сон ; я сам из глубинки , но в нынешнее время скорость интернета по всей России достойная любого мыслимого серфинга по сайтам и функциями «облегчения страниц » уже просто никто не пользуется.
.Статья интересная.Спасибо за поздравлнние. Вас тоже с Новым годом! Творческих успехов Вам!
Полезно для общего развития, объяснено доходчиво. Но использовать на своем (а тем более клиентском) сайте очень не советую. Готов поспорить с утверждением, что это «понятный и простой в использовании код». К одному блоку нужно подстроить 7 блоков сверху и 7 снизу. А если таких «обстраиваемых» блоков на странице 4 (8, 16…)? Код обрастает горой несемантического «мусора», объем файла растет. Зачем? Человек отключил картинки, ему не надо «красивостей» — давайте уважать его желание! А хочешь «красиво» — не отключай картинки и любуйся скругленными углами.
Знать это, конечно, надо. Рекомендую даже сделать в качестве упражнения. Увидите, в какую свалку ваш код превратится.
Абсолютно верно подмечено, Максим. Применить данный способ, если на странице есть хотя бы уже два блока, не очень гуманно (не говорю, если их 5 и более). Со стороны семантики это просто недопустимо. Урок для общего развития.
Спасибо, все поятно.
Подобный пример интересен с точки зрения разве что оригинальности.
Плохо в нем то, что он совершенно несимантичен, создает много лишнего кода и морально устарел с появлением свойства CCS3 border-radius.
Большое спасибо за статью. Будем пробовать.
И поздравляю Вас и Ваших читателей с Новым годом и желаю успехов!
это ужас конечно.. лучше так людей не сбивать с толку
С новым годом!
Webformyself! Поздравляю команду сайта с Новым годом! Спасибо за статьи и активное участие в интернете! Ваши оппоненты (как правило, без предметных аргументов) — самая лучшая реклама ваших статей. И вообще — лучший способ не получить по голове — не высовываться. Но это уже вне главного принципа интернета…
Слишком сложно.. сейчас уже итак все современные браузеры поддерживают скругление.. Но если давиться для тех 5%, которые пользуються ие6, то лучше и проще сделать это картинкой-сниппетом..
Имхо, это полнейшая ерунда. Большинство современных браузеров поддерживают CSS3, а там уже есть свойство закругления углов. Для ИЕ, я так работать не собираюсь. Это ужасно не структурировано и ужасно неудобно.
Нет уж, извольте.
Здравствуйте уважаемые Андрей Бернацкий, Рог Виктор и команда, Поздравляю Вас С Новым 2011 Годом!
Желаю вам всего хорошего в Товым Году!
Ребятя, Счастья Вам и Успехи!
Я очень слежу за вашими статьями и советами, большое спасибо!
Пока разбираю что к чему
Алмаз
Всем привет!
Я автор данной статьи.
Прочитав комментарии, заметил, что большенство из них несут характер отрицательного типа. Быстрее всего это вызвано тем, что Вы видите данный метод впервые. Если Вы внимательно прочитает статью, а именно заключение, то увидете, что это не единственный способ закругления углов блока и я не настаиваю на его использовании (в нем выделены как преимущества, так и недостатки). Просто пытаюсь донести до Вас, что есть еще методы, который могут разрешить данную поставленную задачу. Данный метод представлен для Вашего всеобщего развития!
Понятно всем, что каждый для себя выбрал определенный способ закругления углов и использует только его, другие ему неприемлемы и кажутся чужими. Это тоже самое, что болеть за Англию, когда Вы фанат Испании, при том, что матч Англия — Испания. Как говорится: «На вкус и цвет товарищей нет!».
Для тех, кому данная статья пришлась по вкусу, если возникнут вопросы, пишите, рад буду обсудить.
По поводу критики, куда же без нее! Это как Добро и Зло…
Всем спасибо за внимание. Желаю не останавливаться на достигнутом, творческих Вам успехов.
Спасибо, Миша, пиши следующую про скругление с помощью картинок, средствами CCS3 и JS.
Очень ждем!!!
Мама родная! «фиолетовенький с переподвыподвертом»??! Зачем так громоздить? Можно ведь на много проще добиться подобного эфекта. Причем способ универсальный и «масштабируемый» легко.
Достигается подобный эффект использованием CSS свойства border-radius, с помощью которого можно создавать HTML элементы без единой картинки.
.round{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
Хотя большинство современных браузеров уже поддерживают HTML5, но Internet Explorer надо заставить воспринимать новую версию разметки, для этого нужно подключить небольшой скрипт:
В данном примере скрипт подгружается с сайта googlecode.com, но его можно скачать и подгружать со своего сервера.
Далее, используем следующий скрипт:
DD_roundies.addRule(‘.round’, ’10px’);
В данном случае все HTML элементы с классом round будут с закруглёнными углами. Подробнее читайте на домашней страничке скрипта: dillerdesign.com/experiment/DD_roundies/ (англ.) Там же можно его скачать.
По мотивам: web2.0blog.ru
Блин, некоторые вещи не отобразились:
Хотя большинство современных браузеров уже поддерживают HTML5, но Internet Explorer надо заставить воспринимать новую версию разметки, для этого нужно подключить небольшой скрипт:
В данном примере скрипт подгружается с сайта googlecode.com, но его можно скачать и подгружать со своего сервера.
Далее, используем следующий скрипт:
DD_roundies . addRule ( ‘ . round ‘ , ‘ 10px ‘ ) ;
Конечно можно, никто ж не спорит.:)
Упс, прошу пардона. Я последние строки статьи то и не прочитал.
Способов то конечно достаточно, только я за то, чтобы давать «начинающему разработчику» сразу самый не объемный и в то же время универсальный способ. Ведь если кто то потратит уйму усилий, чтобы добиться нужного эффекта вышеописанным способом, врятли уже будет что то переделывать, когда найдет более универсальный метод.
Не хочу со своим самоваром в чужой огород, но у меня помоему немножко удобнее сделано с помощью собственного jQuery плагина. Если честно, то нуждаюсь в тестинге.
Ссори — побилась ссылка, вот coder-blog.ru/?p=590 — здесь плагин.
Чё-то не могу скачать исходники. То пишет, не найден файл, то вместо исходников — демо
Автор:-»Заключение
….Существуют еще несколько способов закругления углов блока…….»
Один из них, с помощью CSS3, то о чём говорилось выше:
Данный блок закруглен без использования картинок
в CSS:
#content{
Width:100%;
Height:100px;
background:#7f7f9c;
font-size: 2.5em;
color: #fc0;
margin: 0 10px;
letter-spacing: 1px;
border-radius:6px;-//округление углов, чем больше значение, тем сильнее закругление углов
-webkit-border-radius:6px;-//для браузеров Google Chrome и Safari
-moz-border-radius:5px;-//для Firefox
-khtml-border-radius:10px;-//это для Linux
}
Всё!
Не знаю как в ранних, в IE9 работает.
Пробывал с помощью PIE получилось!
небольшие 5 копеек по теме закругления углов: finego.ru/tools/border-radius-generator