Розпродаж хостинг-планів на неймовірних умовах!
Знижка від 300 до 500грн!
 

автор Дмитро Кондрюк

18.02.2011

2

Зверніть увагу: ця публікація побачила світ більше року тому, з того часу багато чого могло змінитися ;)

Я почав розповідати про секрети CSS3 у попередній статті, тепер настав час продовжити.

Сьогодні ми будемо робити кути округлими! І ніякого використання картинок для цього, як було колись. Для цього нам потрібно лише скористатися border-radius’ом. Читачі, які читають цю статтю з Internet Explorer нічого не побачать, оскільки він не підтримує цю технологію. Тому змініть ваш браузер на останні Opera (підтримує версія 10.53 і вище), Mozilla Firefox, Safari чи Chrome.

CSS3 – округлі кути для всіх чотирьох кутів (вибачте за тавтологію)

#my_CSS3_id {
border: 5px solid #c4c8cc;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

CSS3 – округлі кути для деяких кутів

#my_CSS3_id {
border-top-left-radius:15px;
border-top-right-radius:0px;
border-bottom-right-radius:15px;
border-bottom-left-radius:0px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:15px;
}

Те ж саме можна робити з картинками, достатньо лише вставити її в ці теґи.

Далі буде: CSS3: Border Color

© Не Кіт

Дмитро Кондрюк

Автор публікації Дмитро Кондрюк

В веб-індустрії з 2003 року. В 2009р. заснував проект Український WordPress (що у подальшому став офіційним сайтом команди локалізації WordPress в Україні). З 2010 року засновник і технічний директор проекту Український хостинг для WordPress (WPHost.me) - повноцінного хостинг-сервісу, максимально оптимізованого на використання CMS WordPress.

Є що відповісти?

Ваш email не буде публікуватися

Можна скористатися такими тегами в тексті:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  • 02.03.2011 at 10:35

    -webkit-border-radius вже не потрібний, бо всі броузери на webkit\’овому движку вже розуміють правило border-radius

    • 02.07.2011 at 13:52

      думаю, слід врахувати, що не всі оновлюють вчасно браузери, тому щоб у їхніх старіших версіях відображались всі ефекти, варто прописати -webkit-. це не складно, але корисно.