1. 1. Закруглення кутів за допомогою CSS і HTML коду із записом в файл стилів Style.css
2. Що таке CSS
3. Робимо прямокутник з рамкою в CSS
4. Як зробити закруглені кути в CSS
5. Як вставити в рамку текст
6. Закруглення обраних кутів
7. 2. Закруглення кутів за допомогою HTML коду без запису в файл стилів
8. HTML закруглені кути
9. 3. Зображення із закругленими кутами. Рамка навколо картинки HTML
10. Заокруглюємо кути картинки з додаванням рамки
11. Закруглення обраних кутів картинки

У даній статті навчимося самому простому і швидкому способу в прямокутних формах закругляти кути за допомогою CSS і HTML кодів і робити красиві форми картинок для сайту.

Дуже часто веб-дизайнери в своїх роботах змінюють форми геометричних фігур, картинок, фотографій і т.п., отримуючи закруглені кути. Це надає проекту закінченість і приємний дизайн.

Існують різні за складністю реалізації способи перетворити звичайний прямокутник в прямокутник із закругленими кутами. Ми познайомимося з двома найпростішими і швидкими способами, а також навчимося робити картинки і рамки навколо картинок із закругленими кутами для оформлення сайту і веб-сторінок:

1. Закруглення кутів за допомогою CSS і HTML коду із записом в файл стилів Style.css.

2. Закруглення кутів за допомогою HTML коду без запису в файл стилів.

3. Зображення із закругленими кутами. Рамка навколо картинки HTML.

1. Закруглення кутів за допомогою CSS і HTML коду із записом в файл стилів Style.css

Розглянемо перший спосіб отримання прямокутника з закругленими кутами за допомогою CSS і HTML коду із записом в файл стилів Style.css.

Що таке CSS

CSS - це Каскадна Таблиця стилів (Cascading Style Sheets - CSS), що використовує спеціальний код. З його допомогою можна змінювати шрифти, форми і кольору елементів, на сторінках веб-додатків позиціонувати елементи, включати фонові зображення. CSS3 остання версія даної розробки CSS.

Блоки, що складаються з CSS скриптів, розміщуються у файлі шаблонів стилів, шрифтів і квітів - Style.css для подальшого підключення їх за допомогою HTML-файлів ( файли з розширенням .php ) В різних місцях сайту (шапка, контент, коментарі, підвал і сайдбар).

Працювати з CSS і HTML кодами і файлами легко і доступно. Головне все робити дуже уважно і не поспішаючи.

Робимо прямокутник з рамкою в CSS

Щоб зобразити на сайті звичайний геометричний прямокутник, необхідно описати його параметри: довжину, висоту, колір фігури, міжлітерний при необхідності стилі рамки (товщина, колір і т.п.). Для цього формуємо наступний блок CSS, в якому описані стилі (параметри) прямокутника:

#ugolkrug {width: 200px; / * Довжина фігури * / height: 100px; / * Висота фігури * / color: # 0000; / * Колір тексту * / background: # FF7F00; / * Фон блоку * / border: 3px #CCCCCC solid; / * Стилі рамки * /}

Заходимо в адмінпанель WorPress, відзначаємо зліва пункти меню Дизайн => Редактор, відкриваємо файл Style.css і в кінець файлу додаємо цей блок. Не забувайте натискати Save (зберегти).

Код кольору задається в шістнадцятковій системі і може складатися з шести знаків (це його повний код) або з трьох знаків (скорочений код). Скорочувати код кольору можна в разі збігу першої цифри з другої, третьої з четвертої і п'ятої з шостий. Наприклад, код # BB00CC можна скорочено записати так # b0c. Букви A, B, C, D і F в коді кольору використовувати тільки латинські.

Значення 3px в атрибуті border показує ширину рамки.

Після занесення стилів в файл Style.css ми можемо показувати наш прямокутник в будь-якому місці сайту. Для цього розміщуємо тег HTML коду в тому місці, де повинен з'явитися наш прямокутник. Тег має такий вигляд:

<Div id = "ugolkrug"> </ div>

Зверніть увагу, що стилі CSS для даної фігури заносяться в файл один раз, а HTML-тег можна розташовувати на сайті необмежену кількість разів.

В результаті видачі отримуємо такий прямокутник з рамкою.

Як зробити закруглені кути в CSS

Для заокруглення кутів використовується атрибут border-radius.

Ми могли б додати тільки цей атрибут. Він нормально відображає результат заокруглення в нових версіях браузерів, але у багатьох користувачів ще залишилися старі версії, де цей атрибут не функціонує належним чином. Тому для сумісності ми додамо ще кілька описів цього атрибута, прив'язаного безпосередньо до певних браузерам, в наш блок у файлі Style.css, отримавши наступний код:

#ugolkrug {width: 200px; / * Довжина фігури * / height: 100px; / * Висота фігури * / color: # 0000; / * Колір тексту * / background: # FF7F00; / * Фон блоку * / border: 3px #CCCCCC solid; / * Стилі рамки * / -moz-border-radius: 10px; / * Закруглення для старих Mozilla Firefox * / -webkit-border-radius: 10px; / * Закруглення для старих Chrome і Safari * / -khtml-border-radius: 10px; / * Закруглений. для браузера Konquerer системи Linux * / border-radius: 10px; / * Закруглення кутів для всіх, хто розуміє * /}

HTML-тег div видасть нам прямокутник в рамці з заокругленим і кутами:

<Div id = "ugolkrug"> </ div>

Як вставити в рамку текст

Для розміщення в прямокутнику тексту необхідно в блок CSS додати атрибут відступів тексту від країв padding, а HTML-тег буде містити в собі потрібний текст, наприклад "pib9.ru". Таким чином блок CSS має такий вигляд:

#ugolkrug {width: 200px; / * Довжина фігури * / height: 100px; / * Висота фігури * / color: # 0000; / * Колір тексту * / background: # FF7F00; / * Фон блоку * / border: 3px #CCCCCC solid; / * Стилі рамки * / -moz-border-radius: 10px; / * Закруглення для старих Mozilla Firefox * / -webkit-border-radius: 10px; / * Закруглений. для старих Chrome і Safari * / -khtml-border-radius: 10px; / * Закруглений. для браузера Konquerer системи Linux * / border-radius: 10px; / * Закруглення кутів для всіх, хто розуміє * / padding: 5px; / * Внутрішні відступи * /}

а HTML-тег для видачі тексту буде виглядати так:

<Div id = "ugolkrug"> pib9.ru </ div>

Отримуємо прямокутник із закругленими кутами і текстом:

Якщо з коду прибрати атрибути опису розмірів прямокутника width і height, то можна отримати такі форми із закругленими кутами:

1. Без тексту

2. З текстом

В цьому випадку форми приймають розміри середовища: довжина відповідає ширині поля, а висота змінюється в міру наповнення форми вмістом.

Закруглення обраних кутів

В описі стилів параметр 10px в атрибуті border-radius показує радіус заокруглення, який можна змінювати, підбираючи потрібний. Якщо задати 0, то закруглення не відбудеться. Цим властивістю можна скористатися, коли необхідно зробити закруглення обраних кутів.

Розпишемо значення радіуса заокруглення для кожного кута, вказуючи нулі там, де скасовуємо закруглення. Наприклад, скасуємо закруглення в третьому і четвертому кутах. Наш код прийме такий вигляд:

#ugolkrug {width: 200px; / * Довжина фігури * / height: 100px; / * Висота фігури * / color: # 0000; / * Колір тексту * / background: # FF7F00; / * Фон блоку * / border: 3px #CCCCCC solid; / * Стилі рамки * / -moz-border-radius: 10px 10px 0 0; / * Закруглення для старих Mozilla Firefox * / -webkit-border-radius: 10px 10px 0 0; / * Закруглений. для старих Chrome і Safari * / -khtml-border-radius: 10px 10px 0 0; / * Закругл.для брауз.Konquerer сист. Linux * / border-radius: 10px 10px 0 0; / * Закруглення кутів для всіх, хто розуміє * / padding: 5px; / * Внутрішні відступи * /}

Відлік кутів ведеться за годинниковою стрілкою, починаючи з лівого верхнього кута, тобто .:

1. Лівий верхній кут.

2. Правий верхній кут.

3. Правий нижній кут.

4. Лівий нижній кут.

Таким виходить прямокутник з вибраними закругленнями тільки в верхніх кутах.

2. Закруглення кутів за допомогою HTML коду без запису в файл стилів

Розглянемо другий спосіб отримання прямокутника з закругленими кутами за допомогою HTML коду без запису в файл стилів.

HTML закруглені кути

Є одна невелика фішка, яка ще більше спрощує весь процес - це HTML закруглені кути. Вона полягає у формуванні HTML коду, в якому прописуються ті ж стилі, що і в кодах CSS. При цьому використовуються ті ж атрибути, що і в блоці CSS і відпадає необхідність запису блоку в файл Style.css. Одним словом - замінюємо повністю кодом HTML код CSS.

Замість нашого блоку CSS отримуємо HTML скрипт, який вставляємо в те місце, де повинен видаватися прямокутник із закругленими кутами:

<Div style = "width: 320px; height: 160px; color: # 0000; background: # FF7F00; border: 3px #CCCCCC solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml - border-radius: 10px; border-radius: 10px; padding: 5px; "> Закруглені кути за допомогою HTML без використання файлу Style.css </ div>

Перший спосіб заокруглення кутів можна застосовувати, коли одна і та ж форма, не змінюючи стилі, використовується більше ніж один раз. Другий спосіб застосовується для форм, стилі яких використовуються один раз.

3. Зображення із закругленими кутами. Рамка навколо картинки HTML

Ще хочу подарувати Вам корисну інформацію. Часто, використовуючи картинки для оформлення сайту, дуже хочеться зробити їх ще красивіше, змінюючи їх форму, обрамляючи рамкою красивого кольору і різної ширини. При цьому виникає питання: "Як закруглити кути картинки?".

Це робиться дуже просто, і зараз ми цьому навчимося.

Розташуємо картинку на сайті, зробивши її фоном для самої себе в якості фону тега div. Отримуємо такий код і картинку:

<Div style = "background: url ( 'http://pib9.ru/wp-content/uploads/2012/07/kak-vstavit-kartinku-na-sajt.jpg'); width: 307px; height: 230px; " title = "Як вставити картинку на сайт" alt = "Як вставити картинку на сайт"> </ div>

В атрибуті url ( '') вставляєте посилання на свою картинку.

Заокруглюємо кути картинки з додаванням рамки

Закруглення кутів картинок в CSS і HTML і додавання рамки можна виконати одним з двох способів, описаних вище.

Використовуючи перший спосіб даної статті, коди картинок для файлу стилів і тега div HTML-коду будуть виглядати наступним чином:

# Img-radius {border: 3px solid # 85A0C9; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; } <Div id = "img-radius" style = "background: url ( 'Посилання на картинку'); width: 307px; height: 230px;" title = "Картинки з закругленими кутами" alt = "Картинки з закругленими кутами"> </ div>

Зверніть увагу, що частина атрибутів можна заносити в файл стилів, а частина в тег div. У нашому випадку розміри картинки width і height вставлені в HTML-код.

Код HTML другого способу без використання файлу стилів, описаного в цій статті, має такий вигляд:

<Div style = "background: url ( 'Посилання на картинку'); width: 307px; height: 230px; border: 3px solid # 85A0C9; border-radius: 30px; -webkit-border-radius: 30px; -moz-border -radius: 30px; " title = "Картинки з закругленими кутами" alt = "Картинки з закругленими кутами"> </ div>

В результаті роботи кодів кожного з двох способів отримуємо один і той же результат - картинку з закругленими кутами:

Закруглення обраних кутів картинки

Змінюючи радіуси кутів зображення, ширину і колір рамки, можна отримати нестандартні форми картинок для сторінки сайту. Наведу кілька прикладів кодів, за допомогою яких отримала такі дуже симпатичні форми картинок.

<Div style = "background: url ( 'Посилання на картинку'); width: 289px; height: 231px; border: 3px solid # F6BF15; border-radius: 150px 150px 0px 0px; -webkit-border-radius: 150px 150px 0 0; -moz-border-radius: 150px 150px 0 0; "> </ div>

<Div style = "background: url ( 'Посилання на картинку'); width: 265px; height: 211px; border: 7px solid # 799F2E; border-radius: 120px 200px 0 180px; -webkit-border-radius: 120px 200px 0 180px; -moz-border-radius: 120px 200px 0 180px; "> </ div>

<Div style = "background: url ( 'Посилання на картинку'); width: 276px; height: 206px; border: 8px solid # 787CAA; border-radius: 300px 0px 150px 300px; -webkit-border-radius: 300px 0px 150px 300px; -moz-border-radius: 300px 0px 150px 300px; "> </ div>

<Div style = "background: url ( 'Посилання на картинку'); width: 281px; height: 210px; border: 2px solid # 405C0A; border-radius: 0 180px 0 200px; -webkit-border-radius: 0 180px 0 200px; - moz-border-radius: 0 180px 0 200px; "> </ div>

<Div style = "background: url ( 'Посилання на картинку'); width: 244px; height: 244px; border: 5px solid # CCA5D1; border-radius: 160px 160px 160px 160px; - webkit-border-radius: 160px 160px 160px 160px; -moz-border-radius: 160px 160px 160px 160px; "> </ div>

Посилання на картинку і розміри можна брати в адмінпанелі: Медіафайли => Бібліотека і біля обраної картинки натиснути: Редагувати.

У наступній статті ми навчимося використовувати отриманий прямокутник із закругленими кутами і рамкою у вигляді фону для форми підписки за допомогою HTML. Ви отримаєте готові скрипти симпатичною форми RSS підписки, яку зможете розташувати в сайдбарі, в статті або в будь-якому іншому місці свого сайту.

Буду вдячна, якщо поділитеся з друзями інформацією: