Округлі куточки, css

Округлі куточки, CSS

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

I. Почнемо роботу з Adobe Photoshop:

  1. Створимо нове зображення (Ctrl + N) невеликого розміру, наприклад: 300х200 пікселів, на білому тлі;
  2. Скористаємося інструментом Rounded Rectangle Tool (U). Поставимо радіус округлення кутів Radius рівним 10 пікселів, і управління розмірністю додається об'єкта Round Rectangle Options - Unconstrained

    Виберемо який-небудь колір для панелі, наприклад: # 74c44c
    Використовуємо даний інструмент на нашому полотні, потім натиснемо правою кнопкою миші в панелі Шари (Layers) за назвою з'явився шару Shape 1 і виберемо пункт Resterize Layer. У результаті повинно вийти щось схоже на зображення нижче:
  3. Збільшимо масштаб зображення до максимального (Ctrl ++) і використовуючи інструмент Crop Tool (C) виділимо лівий верхній кут нашої фігури (Rounded Rectangle) як показано на малюнку

    Тобто захопимо тільки область де йде обрізка кутів, все що залито суцільним не потрапить в зону вирізу. Далі натиснемо правою кнопкою миші всередині виділеного прямокутника і виберемо пункт Crop. отримаємо:
  4. Збережемо отримане зображення в файл, для цього натиснемо Ctrl + Shift + Alt + S або виберемо пункт Save for Web (Зберегти для Веб) в меню File (Файл). У вікні виконаємо наступні настройки:
    1. GIF - формат в який будемо зберігати зображення;
    2. Adaptive - режим корекції кольором, в нашому випадку є найкращим;
    3. Параметри зменшують якість і чіткість зображення (Dieter, Lossy, Web Snap) вимикаємо і ставимо на мінімум;
    4. Прибираємо галочку навпроти Transparency (Прозорість);
    5. Виберемо кількість квітів Colors так щоб не було втрати якості;
    6. Параметр Matte встановлюємо в значення none
    7. Далі натискаємо кнопку Save (Зберегти) і зберігаємо зображення, наприклад під ім'ям: panel_top_left.gif
  5. Проробимо пункти 3-4 з трьома залишилися кутами, в результаті отримаємо набір зображень:
    1. panel_top_left.gif - лівий верхній кут;
    2. panel_top_right.gif - правий верхній кут;
    3. panel_bottom_left.gif - лівий нижній кут;
    4. panel_bottom_right.gif - правий нижній кут.

На цьому робота з Adobe Photoshop закінчена.

  1. Створимо html - документ (далі планується що, читач цієї статті має початковими знаннями HTML і CSS);
  2. Додамо 4 вкладених один в одного тега
  3. Наведемо для першого тега
    клас і назвемо його panel.

Колір фону слід задати тільки у першого (родітелького) тега

;

  • Далі щодо батьківського тега
    опишемо стилі для всіх вкладених тегів
    :

    Тобто для кожного тега

    задаємо у вигляді неповторюваного фону раніше створені зображення. Для першого тега
    фоном буде зображення panel_top_left.gif. яке за допомогою комбінації параметрів top left властивості background розмістимо в верхньому лівому кутку. Зображення panel_top_right.gif. є фоном перший вкладений тега
    в тег
    з класом panel за допомогою комбінації параметрів top right властивості background розмістимо у верхньому правому кутку і т.д.

  • Наведемо відступ тексту від країв панелі і застосуємо деякий оформлення до тексту, який буде міститися всередині панелі:
  • Зберемо тепер все це в один документ:

    і отримаємо результат:

    Наша панель може змінювати свої розміри, як у висоту, так і в ширину, при цьому якість округлення куточків не губиться

    Створюйте сайти так,
    щоб вони радували око!

    P.S. Коли Всі браузери будуть підтримувати CSS3, такий приклад можна буде здійснити за допомогою одного тега

    і одного CSS-класу до нього, тому що буде існувати можливість задати відразу кілька фонових малюнків для одного елемента.

    Схожі теми

    Вам сподобався наш блог, хочете стежити за оновленнями? Підпишіться на RSS розсилку або розсилку по електронній пошті. Так само ви можете стежити за нами в Twitter.

    Хлопці ну нормальні ж статті постили а тут дитячий сад розвели ....

    Чесно кажучи я не (до) читав. А то що вона перенесена я помітив трохи пізніше бо в рідері йдуть спочатку самий нові але було вже пізно

    да цей спосіб використовує гугл.

    Alex. я б не радив так робити, це жахливий спосіб.

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

    Описаний же мною спосіб, повторюся, більше року тому для іншого блогу, можна назвати «залізним». Він буде працювати у всіх браузерх, при будь-якому масштабі і розмірі шрифту. До того ж не порушує семантику. Якщо заздалегідь відома ширина або висота блоку, колічсетво зображень можна скоротити.

    Можна і спрайт, а можна і взагалі картинки в DataURI запхати прямо в CSS.

    У css є команда -moz-border-radius: 10px 10px 10px 10px;
    Але вона підтримується тільки в FireFox'е, в Опері і ІЕ неработает

    Ще коротше -moz-border-radius: 10px;

    при використанні «-moz-border-radius» код не пройде валідатор.

    У мене картинки не вантажаться (відключені - інтернет повільний) і все прямокутне.
    А -moz-border-radius працює!

    hello world.
    швидше простіше без фотожопа

    >> PS Коли Всі браузери будуть підтримувати CSS3 ... існуватиме можливість задати відразу кілька фонових малюнків для одного елемента.

    Буде існувати властивість border-radius, що дозволяє оформити куточки без малюнків взагалі. Його навіть IE в дев'ятій версії подужав.

    >> швидше простіше без фотожопа

    Схожі статті