Закругленные края CSS для меню сайта

закругленные углы css

От автора: Не редко случаются ситуации, что нужно сделать меню с закругленными краями в CSS и с последующей интеграцией с CMS. А чем проще разметка страницы, тем проще интегрировать в любую CMS.

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

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

    1. Анализируем макет.

    2. Создаем HTML разметку.

    3. Работаем с макетом, вырезаем нужные картинки.

    4. Создаем стили закругленных углов в CSS.

Детали урока по созданию закругленных углов в меню

Тема: HTML&CSS

Сложность: Легкая

Урок: Видео версия (.mp4)

Время: 29:51

автор

Автор: Андрей Бернацкий

Один из авторов проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — www.WebForMyself.com

Данный проект представляет собой подборку качественных материалов: обучающих статей, книг, курсов, видеоуроков — как зарубежных, так и отечественных специалистов в области сайтостроения.

Бернацкий Андрей свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.

Сайт: http://webformyself.com – «Основы Самостоятельного Сайтотсроения»

скачать исходникискачать урок

На этом урок по созданию закругленных краев в CSS, для меню сайта окончен, надеемся что он вам оказался полезен :)

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (30)

  1. Руслан

    Наконец то, этот урок, а то в уроке где показано как рисовать тему для wordpressa использовали radius а в Internet Explorer он не работает, что по себе уже не неправильно.

    • Анна

      чтобы Internet Explore закруглялись края, нужно подключить дополнительный файл border-radius.htc -> behavior: url(«border-radius.htc»);

      • Кирилл

        в 90% случаях border-radius.htc косячит и туга рабаоте в ИЕ 7 и в ИЕ8

        • Павел

          Кирилл, согласен: border-radius.htc применять не стоит — не работает, как надо.
          Есть более совершенный способ.

          • Анна

            Просветите пожалуйста :) что это за способ?

          • Andrey Bernacki

            Использование CSS3 свойств border-radius и background-image: linear-gradient. Таким образом можно обойтись вовсе не используя картинок. Единственный недостаток — в старых браузерах работать не будет.

          • Анна

            Просветите пожалуйста :) что за «более совершенный способ»?

    • Стас

      Да вы как раз написали правильно «НЕ НЕПРАВИЛЬНО». Если правильно сделать всё отлично работает во всех браузерах. Считаю технологию в видео неудачной, поскольку есть более легкий и правильный вариант. Код намного меньше, и фоновая картинка шириной в 1px шириной которая сама расползается по всему тексту.

  2. Павел

    Надеюсь Андрей не будет против, если размещу в своем ответе ссылку, где можно посмотреть как отлично работают CSS3 в ненавистном IE. Радиусы, градиенты, тени в IE6-7-8-9-10:
    test.emelyaplusweb.ru/hoods/klasik.html

  3. Вячеслав

    Ссылка не открывалась пока в конце командной строки не стер «.html»

  4. Стас

    К тому же если говорить о древних версиях браузеров, таких как ИЕ 6, то подскажите сколько людей его используют в процентном соотношении на сегодняшний день ? Ответ рядом ))

    • Павел

      IE6 — 24,4%
      IE7 — 3,3%
      IE5.5 — 0,5%
      IE5 — 0,33%
      остальные IE — 3,13%

    • Pocherk

      Стас! Вы наверное ориентируетесь на домашних пользователях — там у большинства современные броузеры, но в офисах еще полно компьтеров со старыми осликами (то бишь IE6 — 8), так что приходится это дело учитывать

      • Стас

        Учитывать конечно стоит, но придавать этому большое значение… Нормальные конторы всё равно обновляются, а если нет то пусть получают меню без скругленных углов, значит их всё устраивает. А идти в обратную сторону не стоит — мы всегда идем только вперед, постоянно изучаем новое. Удачи вам в инновационных технологиях ))). Ура! ;-)

  5. Павел

    Причем здесь «идти в обратную сторону»?
    Я где то призывал не использовать CSS3?
    Обеими руками за HTML5 и CSS3.
    А терять клиента из-за его старого браузера не хочу. Тем более если для этого требуется прописать лишь пару-тройку строчек кода.

    • Иоанн

      А зачем такой глупый клиент. Обновлять софт нужно не только потому, что изменилась технология отображения дизайна. А еще есть такая деталька как безопасность. В новых продуктах закрываются дыры в безопасности. Подстраиваясь под глупцов Вы тем самым поддерживаете хаккеров и прочих элементов. Подставляя тех же глупеньких клиентов. :)

      • Павел

        Глупо называть клиента глупым.
        Впрочем юношеский максимализм лечится только временем.

    • Стас

      А давайте мобильные телефоны выпускать с диском для набора номера как раньше, не все же умеют пользоваться последними разработками

      • Павел

        Да НЕВАПРОС.:)
        За ваши деньги — любая прихоть.:)
        «Утром деньги — вечером стулья…Можно наоборот, но деньги вперед.»

  6. Максим

    Андрей, а разве свойства, заданные для
    .menu li a
    не наследуются для .menu li a:hover ?
    Зачем им назначать одинаковые свойства font и display?

  7. mevr

    По крайней мере этот способ борьбы с закруглением, тенью и др. свойствами css3 не поддерживаемыми старыми браузерами я считаю лучшим!

  8. Владимир

    А нельзя сделать без спанов? Фоны можно поставить для li и a. Получается аналогичный результат, без лишних тегов.

  9. Andrey Bernacki

    Скорее всего с браузером. IE ниже версии 9 не поддерживает свойствo css3 border-radius. А вообще для данного урока свойствo border-radius не используется, тут все на картинках делается. Если все делали по уроку то должно отобразиться с закруглением. Если не получится, то пишите в службу поддержки http://support.webformyself.com

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree