Скріншот інструмента, покращений Prismify
Нещодавно я почав вивчати конструктор сайтів Bazium у рамках своєї практики. Інструмент насправді досить зручний, але є одна невелика, але дуже дратівлива проблема: округлення кутів просто недоступне для деяких елементів. Звісно, я міг би замінити ці елементи на альтернативи, і, ймовірно, саме так я і вчиню. Однак я вирішив прийняти виклик і насправді виправити проблему, округливши кути, які не можна округлити за допомогою стандартних інструментів, наданих конструктором сайтів.
Юридичне застереження та заявка про прозорість
Перед тим як продовжити написання цієї статті, я хочу уточнити природу поданого контенту:
Мета та обсяг
Ця стаття та весь її вміст призначені виключно для інформаційних та демонстраційних цілей. Наступні ключові моменти уточнюють природу вмісту:
Відмова від відповідальності щодо контенту
- Усі продукти, послуги, ціни та інформація про компанії, представлені в статті, є повністю вигаданими і створені виключно для демонстрації дизайну та портфоліо.
- Назви продуктів, логотипи, бренди та інші ідентифікатори є гіпотетичними і не представляють реальних комерційних пропозицій.
- Будь-яка схожість з реальними продуктами чи послугами є випадковою.
Уточнення щодо використання
- Ціни, специфікації та описи є вигаданими і не базуються на реальних ринкових продуктах.
- Жодні комерційні угоди не можуть або не повинні укладатися на основі інформації в цій статті.
Повідомлення про товарні знаки та інтелектуальну власність
- Усі товарні знаки, знаки обслуговування, торгові назви та бренди є власністю їх відповідних власників.
- Їх використання в цій статті є виключно для демонстраційних цілей і не має на увазі афіліацію чи схвалення.
Підтвердження читача
Читачи цю статтю, ви розумієте і погоджуєтесь, що:
- Це концептуальна демонстрація дизайну
- Жодні реальні комерційні відносини не маються на увазі чи не встановлюються
- Ідентифікатори брендів і товарні знаки використовуються лише для ілюстративних цілей
Початок роботи
Отримання імен CSS класів, які мене цікавлять
Щоб почати, я вирішив зосередитись на елементі, який я хотів округлити — в даному випадку, елементі “Gl01a: Галерея з пояснювальним текстом та кнопкою”. Перший крок — навести курсор на елемент і відкрити інструмент розробника (в Chrome: правий клік -> inspect), щоб отримати імена CSS класів елементів, які я хочу округлити.
Імена класів:
- fotoramastageshaft
- fotoramanavshaft
Простий код ін’єкції CSS властивості
Отримання простого коду, який ін’єктується для властивості “border-radius” до потрібних елементів та їхніх дітей
Без сумніву, я міг би переглядати документацію і написати код самостійно, але це забрало б багато часу, щоб зрозуміти, як це зробити правильно. Тому я вирішив скористатися коротким шляхом і попросив Perplexity згенерувати код для мене.
Тестування коду
Код вставлений у вбудований HTML елемент (зліва). Компонент “Gl01a” в редакторі (справа).
Час тестувати. Я додав вбудований HTML блок на сторінку та вставив код округлення до нього.
Здається, що зміни не відображаються в редакторі, оскільки властивість "border-radius" ін’єктується тільки під час завантаження фактичного вебсайту.
Як ви можете побачити на зображенні нижче, код працює.
Зображення з округленими кутами
Чесно кажучи, я очікував, що це займе більше часу, щоб отримати робочий код.
Додавання різноманіття
Зображення з різними радіусами округлення
Чудово, що все працює, але я хочу, щоб маленькі зображення мали менший радіус округлення. Встановимо 4px для них замість 12px.
Ось код, який виконує це завдання:
Схована підступність
Рамка великого зображення без округлення.
Як тільки я подумав, що зрозумів, як це працює, я виявив, що округлення не застосовується до великої рамки зображення, якщо зображення не стискається.
При детальнішому огляді я виявив, що зображення відображається через тег <img>, а не через <div>, до якого додається фонове зображення через CSS. Це пояснює, чому опція округлення зображення недоступна для цього компонента за замовчуванням.
Структура компонента “Gl01a”
На щастя, встановивши максимальну ширину компонента 1200px, я зміг зробити контейнер для великого зображення підходящим для округлення без його стиснення.
Налаштування фону та відступів, відкриті для компонента “Gl01a”
Автоматизація процесу
Інструмент для округлення кутів в роботі
Щоб уникнути запитів до AI кожного разу, коли потрібно округлити кути, я витратив кілька годин на взаємодію з Perplexity, щоб розробити функціональний інструмент, який автоматизує процес генерації коду для округлення кутів.
Я взяв цю кольорову палітру, щоб зробити це хоча б трохи стильним, а потім додав елегантну смугу прокрутки з Named scroll-timeline vertical від utilitybend
Як використовувати інструмент
Тепер перейдемо до практичної частини, де я поясню, як фактично використовувати цей інструмент.
Завантажити код
Сторінка проекту на SourceForge
Натисніть це посилання https://sourceforge.net/projects/bootleg-corner-rounding-tool/files/V1.0/Bootleg%20Corner-Rounding%20Tool.html/download, щоб завантажити код, або перейдіть на сторінку проекту і завантажте файл “Bootleg Corner-Rounding Tool.html” з папки “V1.0”.
Вбудувати інструмент у HTML код
Вбудований HTML код у Bazium (зліва). Той самий компонент з кодом (справа).
Додайте вбудований HTML код до вашого сайту.
Відкрийте файл “Bootleg Corner-Rounding Tool.html” (на Windows: клацніть правою кнопкою миші, виберіть “Відкрити за допомогою” і оберіть Notepad або інший інструмент для редагування тексту). Скопіюйте весь код з файлу і вставте його у вбудований HTML блок на вашому конструкторі сайтів.
Не забудьте зберегти зміни.
Запуск інструменту
“Bootleg Corner-Rounding Tool” вбудовано у виробничу версію вебсайту
Як тільки інструмент вбудовано у ваш сайт, відкрийте виробничу версію вашого сайту та двічі натисніть кнопку “Rounding Settings” у правому верхньому куті.
Вибір цілі для округлення кутів
Елемент, який підлягає округленню
Відкриті інструменти розробника, де необхідне ім’я класу виділене курсором миші
Щоб округлити елемент, вам потрібно отримати його ім’я класу.
Щоб отримати ім’я класу елемента в Chrome:
- Наведіть курсор на елемент.
- Клацніть правою кнопкою миші і виберіть “Inspect” в контекстному меню.
- В інструментах розробника прокрутіть виділену лінію вгору та вниз, поки не знайдете батьківський контейнер для елементів, які ви хочете округлити. Якщо в атрибуті класу кілька значень, розділених пробілами, візьміть останнє.
- Наведіть курсор на значення в атрибуті класу цього елемента і двічі клацніть на ньому.
- Скопіюйте значення атрибута (CTRL + C).
Округлення елемента
Елемент, округлений за допомогою програми “Bootleg Corner-Rounding Tool”
Як тільки ви отримаєте ім’я класу елемента, вставте його в поле “Enter class name” та натисніть кнопку “Add Element”.
Після цього з'явиться рядок для цього елемента, і ви зможете встановити бажане значення округлення, вибрати одиницю виміру зі спадного меню і натискати кнопку “Apply”, щоб округлити елемент. Зверніть увагу, що інколи може знадобитися змінити одиницю виміру для того, щоб округлення працювало, і немає гарантії, що воно буде працювати завжди або для всіх елементів.
Зробити округлення постійним
Код округлення, вставлений безпосередньо у вбудований HTML блок
До цього часу всі зміни були тимчасовими. Щоб зробити їх постійними, скопіюйте код з текстової області внизу і вставте його в редактор як вбудований HTML код.
На цьому етапі ви можете видалити сам інструмент з вашого проекту. Округлення, яке ви налаштували, не буде видно в редакторі, але буде застосовано до виробничої версії сайту.
Кредити
Фото від Matheus Bertelli з Pexels
Фото від Mathias Reding з Pexels
Proffesional Footer від Talos Talos
Перекладено з: Rounding the Unroundable: Building a Tool to Dynamically Inject CSS Properties Using JavaScript