CSS Outline Generator
Налаштування outline
Outline
Колір
Статус
Очікування
Живе превʼю
Приклад outline
Що таке CSS Outline Generator
Цей CSS Outline Generator допомагає швидко зібрати outline для кнопок, інпутів, карток і focus state. Ви можете змінювати товщину, стиль, колір і outline-offset, а потім копіювати готовий CSS.
На відміну від border, outline не впливає на розмір елемента в макеті. Тому він зручний для focus ring, accessibility state і виділення без зсуву верстки.
Як користуватися
- Встановіть товщину, стиль, колір і відступ outline.
- Дивіться, як превʼю оновлюється одразу.
- Натисніть Generate, щоб отримати нормалізоване значення outline.
- Або вставте готовий CSS outline у поле вводу й натисніть Parse, щоб розібрати його назад.
Поради
- Використовуйте outline для focus state, щоб верстка не смикалась.
- Додатний outline-offset відсуває outline від елемента.
- Пунктирний або крапковий outline добре підходить для editor-style інтерфейсів.
- Для доступності краще брати контрастний колір outline.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.
CSS Border Radius Generator
Генератор і парсер CSS border-radius з живим прев’ю.
Інші інструменти
›
CSS Box Shadow Generator / Parser
Генеруйте, парсьте та переглядайте CSS box-shadow онлайн. Налаштовуйте offset, blur, spread, color та inset.
Інші інструменти
›
Генератор CSS Text Shadow
Створюйте, переглядайте, парсьте та копіюйте CSS text-shadow з підтримкою кількох шарів.
Інші інструменти
›
Color Converter
Конвертуй HEX, RGB, RGBA і HSL миттєво у браузері.
Інші інструменти
›
FAQ
У чому різниця між outline і border?
Border займає місце й впливає на розмір елемента. Outline малюється зовні та не змінює розмітку.
Що робить outline-offset?
outline-offset задає відстань між краєм елемента та outline.
Чи корисний outline для accessibility?
Так. Outline часто використовують для видимого focus state у кнопках, лінках і формах.
Чи можна використовувати відʼємний outline-offset?
Так. Відʼємні значення зміщують outline всередину, але ефект залежить від елемента та дизайну.