Создаем закругленные углы на сайте при помощи CSS без применения Javascript

Logo
Создаем закругленные углы на сайте при помощи CSS без применения Javascript

Здравствуйте уважаемые читатели блога dmitriydenisov.com. Это вторая статья в категории «HTML, PHP, CSS и MySQL» и в ней я хочу рассказать о том, как создать на своем сайте закругленные углы при помощи CSS без применения разнообразных скриптов. Этот метод очень удобный и я решил написать про него отдельную статью, в которой приведу рабочий пример кода и расскажу, как с ним работать и реализовать на своем сайте закругление углов самостоятельно.

Создание закругленных углов при помощи CSS

Недавно я занялся усиленной оптимизацией своего сайта и, проанализировав много графиков, выявил, что зачастую виной долгой загрузки являлись Javascript, которые отвечали за создание закругленных углов на моем сайте. Поначалу я использовал именно этот метод так как для того чтобы его реализовать достаточно было добавить в нужный документ нужное нам правило CSS или класс. Сделав это, загрузка моих страниц еще больше ускорилась и теперь ее скорость в большей степени зависит только от ситуации на хостинге. На данный момент Page Speed главной страницы моего сайта составляет 86%, что очень даже неплохо. Подробнее об ускорении своих сайтов вы можете прочитать в статьях «Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess» и «Оптимизация блога WordPress для снижения нагрузки на сервер».

Итак, для того чтобы создать закругленные углы при помощи CSS вам нужно будет сделать следующее. Для начала подготовить все необходимое для работы, а именно текстовый редактор NotePad++ для редактирования файлов сайта, FTP клиент для закачки этих файлов на сервер, различные браузеры для проверки правильного отображения и дополнение к Mozilla Firefox под названием FireBug, которое понадобится нам для доведения наших закругленных углов до нормального вида.

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

  1. Открыть таблицу стилей и добавить в него правила CSS для закругленных углов
  2. Добавить код закругленных углов во все необходимые файлы своего сайта.
  3. При помощи дополнения FireBug определить недоработки и устранить их.

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

Как видите это не совсем то, что нам нужно. Для большего удобства работы и более быстрого поиска причины проблемы нам и понадобится FireBug. Скачать его вы можете перейдя по этой ссылке. После установки все что вам понадобится, это нажать на значок в виде жука в правом нижнем углу браузера Mozilla Firefox, после чего нажать на кнопку «Инспектировать объект» и выделить нужную нам часть дизайна на сайте.

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

Создание правил CSS для закругленных углов

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

.xcorner {
background: transparent;
margin:0;
}
.xtop {
display:block;
background:transparent;
font-size:1px;
margin-top: 10px;
}
.xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.xb1 {
margin:0 5px;
background:#fff;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

Свойство background:#fff; задают цвет фона. В данном случае закругленные края будут иметь белый цвет. При необходимости вы можете изменить его на свой.

border-right:1px solid #fff; — в этом свойстве вы можете изменить цвет закругленных углов с белого #fff на любой другой. Больше никаких изменений вносить я не рекомендую, так как это может нарушить функциональность данного метода создания закругленных углов.

Итак, с таблицами стилей мы разобрались. Теперь переходим к следующему этапу.

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

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

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

<div> <b class="xtop"><b></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

А для создания нижних углов вот этот код:

<b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></div>

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

Для наглядности наведу пример.

 

В картинке приведенной выше применен серый цвет фона, а нужный нам текст заключен в теги <div> с классом class=»cornerText». Наглядно это выглядит так:

<div class="cornerText" >
Текст нашей статьи, который находится в блоке, для которого мы создаем закругленные углы.
</div>

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

<div class="xcorner"> <b …></b>
<div class="cornerText">
Текст нашей статьи, который находится в блоке, для которого мы создаем закругленные углы.
</div>
<b><b …></b>
</div>

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

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

На этом все. Удачи вам и до скорых встреч на страницах блога.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 2

  • Андрей

    Как установить FireBug? Всё на Английском а гугловский браузер не пускает страница для перевода..

  • Дмитрий

    Переходим на сайт производителя, жмем по кнопке «Install Firebug», после чего в открывшемся окне жмем по ссылке «addons.mozilla.org» сразу под «Firebug : Recommended»

Оставить комментарий

отменить ответ