Ефекти css: закруглення кутів елементів

Синтаксис каскадних таблиць стилів побудований так просто, що можливість отримання самого несподіваного дизайну доступна навіть далекому від програмування і розробки сайтів людині. Можливо від того, що дитячі ігри в кубики залишилися у кожного в пам`яті, використовувати цей багатогранний досвід в HTML, CSS не складає труднощів.

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

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

Класичні прямі конструкції

Немає нічого дивного, що прогрес в області програмування та інформаційних технологій узаконив прямокутні конструкції. Передові ідеї не стали витрачати час на округлі форми, але не забули подати в розпорядження розробника достатньо можливостей в тегах і правилах HTML, CSS і суміжних мовах програмування.

Будь-який елемент, який використовується на сторінці, має прямокутну область, причому в ній виділяється кілька складових частин, з яких в кожному конкретному випадку слід використовувати тільки необхідне, з урахуванням вимог кросбраузерності, особливостей розмітки конкретного змісту в доступних синтаксичних конструкціях.

Загальні правила CSS

Каскадні таблиці стилів пропонують описувати елементи так:

• властивість: значення.

При цьому властивість - конкретне ім`я, а значення може бути як ім`ям, так і перерахуванням імен або значень.

Відносно блокових елементів і необхідності робити за допомогою CSS закруглення кутів, має сенс використовувати властивість border-radius і його значення в форматі "38px" або "8px 16px 24px 38px".

Якщо в якості значення задається одне число, воно буде встановлено таким для всіх кутів. Запис всіх чотирьох значень відносить:

• перше число - до лівого верхнього кута;
• друге - до правого верхнього;
• третє - до правого нижнього;
• Останнім - до лівого нижнього.

Спільне використання деяких правил

Поняття border, image і background можуть бути використані спільно. Це нормально, і названі правила не заважають один одному, формуючи загальну композицію. Головне - усвідомлювати те, що саме кожне з них означає, і як на що накладається.

Перш ніж реалізовувати той чи інший елемент, важливо провести кілька експериментів, щоб переглянути роботу на декількох браузерах. Орієнтація на поради, рекомендації, сторонні приклади або синтаксис CSS, закруглення кутів і т. П. Рідко буває краще власної свіжої практики.

Важливо розуміти, що border, image, з точки зору оформлення кутів, - однотипні поняття. Малюнок може бути представлений не в png-форматі. Він буде обрізаний браузером, згідно з правилами встановленими в CSS. Закруглення кутів - турбота розробника незалежно від прямокутності вихідного матеріалу.

Особливості HTML, CSS від браузерів

Вітається запис стилю оптом - для всіх браузерів відразу. У всякому разі класичні приклади на тему "CSS: закруглення кутів" пропонують писати так:

Відео: Уроки по CSS / CSS3. Частина 8. Закруглені кути (border-radius)

background: # FF7F00- / * фон * /

border: 1px #CCCCCC solid- / * рамка * /

-moz-border-radius: 10px; / * CSS закруглення кутів для Mozilla Firefox * /

-webkit-border-radius: 10px; / * ... Для Chrome і Safari * /

-khtml-border-radius: 10px; / * ... Konquerer * /

border-radius: 10px; / * CSS закруглення кутів для всіх * / і т. П.

Відео: Уроки HTML і CSS (відео Уроки)

Однак в більшості випадків досить вказати останнє правило. Надмірність слід використовувати, лише коли в ній є реальна необхідність.

Класичні і чудові таблиці

Незважаючи на численні суперечки прихильників табличній верстки (tr, td) і варіанти використання тегів div і span ( «чудова» верстка), об`єктивна практика віддає перевагу варіанту розумної необхідності.

У Дівов є одні гідності, у таблиць інші. Якби вони один одного не доповнювали, а просто конкурували, питання швидко б випарувався в один варіант, який об`єднує кращі сторони таблиць і Дівов.

Більшість сайтів створюється за допомогою CMS (систем управління сайтами) і в розпорядження розробника приходить не тільки широкий асортимент «гігантських» масивів даних, сотень папок, об`єктів, а й таблиць.

Теги [div | span], як такі, не виділяються, але єдине, що точно надходить на повний відкуп розробника, - це CSS стилі. Причому будь-яка CMS чітко розділяє як код, що входить в неї від творчості розробника, так і власні стилі від доданих стилів, а щодо змін (наприклад, в css - закруглення кутів таблиці), завжди можна відновити настройки і стилі за замовчуванням.

Криві і кути, не передбачені синтаксисом

Можна строго дотримуватися всіх правил HTML, CSS, але мати результат, ними не передбачений. Накладаючи елементи один на одного, можна отримувати будь-які області будь-якої конфігурації. Використовуючи PHP-програмування на сервері, можна відправляти в браузер відвідувача будь-які файли стилів і прикріплювати до них відповідний javascript код в тілі HTML-файлу або окремого js-файлу.

Будь-який варіант контуру, будь-яка форма власного елемента поза правилами CSS! Закруглення кутів - всього лише частковість, а реальні можливості набагато ширше. При цьому програмуючи власні об`єкти, можна не звертати уваги на особливості окремих браузерів, використовувати тільки ті теги і конструкції мов гіпертексту, які сприймаються усіма без винятку браузерами.

Використовуючи ідеї об`єктно-орієнтованого програмування, можна спроектувати зовнішній вигляд кута або кривої, очевидно не передбаченої жодним браузером форми. При цьому зовсім не обов`язково, що це буде саме кут області, спочатку прямокутної форми. Важливо, що компоненти кривої, описані в формі правил CSS, об`єднуються в єдиний візуальний об`єкт javascript кодом і в потрібний момент у потрібному місці браузера, відображають себе в правильній формі.

При такій технології нічого не заважає таким об`єктам реалізовувати себе в тривимірній площині або демонструвати анімацію.