Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как в css закруглить углы


Как сделать закругленные углы css

Приветствую вас, дорогие читатели!

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

Навигация по статье:

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

Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.

Как, например, здесь:

Круто, не правда ли?! Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

.round-corner{ height:100px; width:200px; background:#2F73B6; }

.round-corner{

height:100px;

width:200px;

background:#2F73B6;

}

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

border-radius: 20px;

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

Радиус закругления может задаваться как в пикселях, так и в процентах.

Например:

border-radius: 10%;

И вот что мы получим в итоге:

Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.

Такой же фокус можно проделать и для картинки, кнопки и практически любого элемента на вашем сайте. Для того чтобы закруглить углы в CSS нужно либо прописать для этого элемента класс, для которого задано свойство border-radius, либо вычислить класс блока, внутри которого расположен нужный элемент (в нашем случае это картинка), а затем прописать тег этого элемента, после чего в фигурных скобках прописать ему всё тоже CSS свойство border-radius.

Для картинки CSS код будет выглядеть так:

.content img { border-radius: 20px; }

.content img {

border-radius: 20px;

}

Вот что получится:

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

Куда вставлять CSS код?

У вас есть аж целых 3 варианта как прописать данное CSS свойство и закруглить углы для элементов на вашем сайте:

  1. 1.Открываете CSS файл вашей темы или страницы и там в самом конце дописываете:

    .round-corner{ border-radius: 20px; }

    .round-corner{

    border-radius: 20px;

    }

    Где вместо «round-corner» будет название класса элемента, для которого вы хотите закруглить углы, а вместо 20px будет ваше значение.

  2. 2.Этот же код можно прописать прямо на странице вашего сайта, обернув его в тег style

    Выглядеть это будет так:

    .round-corner{ border-radius: 20px; }

    .round-corner{

    border-radius: 20px;

    }

  3. 3.Также CSS свойство для закругления углов можно приписать нужному элементу при помощи атрибута style. Для картинки это будет выглядеть так:

    impuls-web.ru

    Закругление углов CSS: свойство border-radius — учебник CSS

    В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style, с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

    Как закруглить углы: свойство CSS3 border-radius

    Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

    Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

    .borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }

    Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:

    Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:

    .borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; } .borderElement1 { background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; }

    Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:

    .borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; }

    Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:

    • border-top-left-radius — для верхнего левого угла;
    • border-top-right-radius — для верхнего правого угла;
    • border-bottom-left-radius — для нижнего левого угла;
    • border-bottom-right-radius — для нижнего правого угла.

    Принцип скругления углов

    На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px, — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px, закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px, а второе — длиной вертикальной полуоси — 20px:

    Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

    Далее в учебнике: свойство box-shadow — создаем тени для элементов.

    idg.net.ua

    Скругление углов CSS

    Приветствую вас, дорогие читатели!

    Довольно часто, при верстке страниц, в зависимости от дизайна, появляется необходимость в скруглении углов блоков и изображений для придания странице более аккуратного вида. В сегодняшней статье я покажу вам, как это можно сделать с помощью CSS-свойств.

    Навигация по статье:

    Если у вас появилась такая необходимость вы можете воспользоваться стандартным CSS-свойством border-radius. Например:

    .radius-block{ border-radius: 25px; }

    .radius-block{

    border-radius: 25px;

    }

    В данном случае для блока задается параметр для всех сторон.

    Равномерное закругление

    Так же, можно задавать радиус для каждого отдельного угла. Например:

    .radius-block2{ border-radius: 5px 15px 25px 35px; }

    .radius-block2{

    border-radius: 5px 15px 25px 35px;

    }

    Разное закругление

    Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.

    Если вам нужно, к примеру, симметрично скруглить два противоположных угла по диагонали, то можно задать только два параметра:

    .radius-block3{ border-radius: 5px 35px; }

    .radius-block3{

    border-radius: 5px 35px;

    }

    Симметричное закругление

    В данном случае первый параметр работает для верхнего левого и правого нижнего, а второй – для верхнего правого, и нижнего левого.

    Необычное скругление углов CSS

    Еще у свойства border-radius есть одна интересная особенность. Вы можете задавать радиус скругления не только для какого-то конкретного угла, но и для вертикальной и горизонтальной половины угла.

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

    .radius-block4{ border-radius: 60px/25px; }

    .radius-block4{

    border-radius: 60px/25px;

    }

    Необычное закругление

    Используя данный вариант можно даже элипс:

    .radius-block5{ border-radius: 250px/75px; }

    .radius-block5{

    border-radius: 250px/75px;

    }

    Элипс

    Благодаря использованию различных комбинаций скругления уголов CSS-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)

    Если эта статья вам понравилась, и вы хотите меня поддержать, обязательно поделитесь ссылкой в социальных сетях и оставьте комментарий.

    А на этом у меня сегодня все. Желаю вам успехов в экспериментах. До встречи в следующих статьях!

    С уважением Юлия Гусарь

    impuls-web.ru

    Совет CSS: лучшее скругление углов

    От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

    Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

    Четвертые части каждой окружности формируют закругленные углы элемента.

    Когда объединяются толстые рамки

    При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.

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

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

    Узнать подробнее .mike { border-radius: 12px; border: 6px solid crimson; }
      border: 6px solid crimson;

    Пока нет проблем.

    Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.

    .mike { border-radius: 12px; border: 14px solid crimson; }
      border: 14px solid crimson;

    Рамка становится шире, а углы изображения – квадратными.

    Почему так происходит?

    Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.

    Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:

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

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

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

    Чтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.

    .mike { border-radius: 26px; border: 14px solid crimson; }
      border: 14px solid crimson;

    При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.

    Метод Box-shadow

    При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.

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

    .mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; }
      box-shadow: 0 0 0 14px crimson;

    Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.

    Применение переменных Sass

    Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.

    $border-width: 14px; $radius: $border-width*1.9; .mike { border: $border-width solid crimson; border-radius: $radius; }
    $radius: $border-width*1.9;    border: $border-width solid crimson;

    Заключение

    Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.

    Автор: Guil Hernandez

    Источник: http://blog.teamtreehouse.com/

    Редакция: Команда webformyself.

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

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

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

    webformyself.com


    Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!