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

1. Користувацькі змінні (CSS Variables)

Змінні CSS роблять ваш код багаторазовим і зручним для підтримки. Визначте свої змінні на рівні root, щоб вони могли використовуватися по всьому стилю:

:root {  
 --primary-color: #3498db;  
 --secondary-color: #2ecc71;  
}  
button {  
 background-color: var(--primary-color);  
 color: var(--secondary-color);  
}

Використовуючи var(), ви можете легко змінювати кольори або інші значення без необхідності оновлювати багато місць у вашому CSS.

2.

Сьогодні я провів кілька годин, намагаючись відтворити інтерфейс з нашого дизайну в Figma. Незважаючи на те, що я точно скопіював усі стилі з Figma, з'являлися загадкові проблеми з відступами в реалізації.
Після ретельного розслідування ці проблеми зазвичай пов'язані з тим, як браузери обробляють відступи в типографіці в порівнянні з тим, як це робить Figma. Це мене зацікавило, і я заглибився в це питання, виявивши проблему «Leading space & Vertical trimming».

Що таке Leading space & Vertical trimming 🤔?
Давайте спершу розглянемо кілька понять типографіки, щоб зрозуміти основну проблему.

Типографічні відступи (джерело зображення: wikipedia)

• Базова лінія: Невидима лінія, на

Відвідайте офіційний вебсайт

Які найкращі практики веб-дизайну при використанні Microthemer?

Коли ви занурюєтесь у світ веб-дизайну, правильний вибір інструментів може зробити значну різницю. Серед таких інструментів Microthemer вирізняється як інтуїтивно зрозумілий кастомізатор сайту, який дозволяє вам без зусиль редагувати вигляд вашого сайту — без необхідності писати код. Але крім простого вибору Microthemer, важливо розуміти кілька найкращих практик, щоб максимально використовувати цей потужний інструмент. У цій статті ви знайдете поради та трюки, які допоможуть вам створювати красиві, зручні для користувачів вебсайти.

Це зображення належить images.pexels.com.

Розуміння Microthemer

Для початку давайте коротко розглянемо, що таке Microthemer і як він працює у контексті … Читати далі

Sass (Syntactically Awesome Style Sheets) — потужний препроцесор CSS, який розширює можливості CSS за допомогою таких функцій, як змінні, вкладеність, міксини та інше. Якщо ви хочете підвищити рівень своїх навичок у CSS, Sass може зробити процес стилізації більш ефективним та організованим. Незалежно від того, чи ви новачок у Sass, чи вже маєте досвід, ця стаття допоможе вам зрозуміти, як використовувати Sass і скористатися його потужними можливостями. 💡

1. Що таке Sass? 🤔💭

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

Sass — це розширення CSS, яке робить написання … Читати далі

текст перекладу

Як створювати графіку програмно за допомогою CSS Paint API

Як веб-розробники, ми часто покладаємося на зображення для створення візуально багатих інтерфейсів. Хоча зображення є потужним інструментом, вони можуть впливати на продуктивність і ставати пікселізованими на дисплеях з високою роздільною здатністю. А що, якби ми могли генерувати графіку програмно за допомогою JavaScript і безшовно інтегрувати її в наші стилі CSS? Зустрічайте CSS Paint API.

CSS Paint API дає змогу створювати власну графіку, незалежну від роздільної здатності, прямо в CSS. Замість того, щоб покладатися на зовнішні файли зображень, ми можемо визначати функції JavaScript (зареєстровані як "paint worklets"), які генерують зображення … Читати далі

текст перекладу

1. У чому різниця між одиницями em та rem в CSS?

Відповідь:

• em: Відносно розміру шрифта батьківського елемента. Наприклад, якщо розмір шрифта батьківського елемента становить 16px, а ви встановите font-size: 2em;, то розмір шрифта буде 32px.
• rem: Відносно кореневого елемента (`). Якщо розмір шрифта кореневого елемента становить16px, тоfont-size: 2rem;завжди буде32px`, незалежно від розміру шрифта батьківського елемента.

Пояснення:
em є чутливим до контексту, що може призвести до каскадних змін розміру, в той час як rem забезпечує сталість і є зручнішим для підтримки великих проектів.

html { font-size: 16px; 

текст перекладу

](https://www.pexels.com/photo/person-holding-gray-twist-pen-and-white-printer-paper-on-brown-wooden-table-955389/)

Давайте навчимося відображати конкретний вихід для введеного значення в полі вводу. Це поширена задача при роботі з HTML-формами та введенням користувача.

По-перше, давайте створимо просту HTML-форму з полем вводу та кнопкою. Користувач введе свій текст у поле, і коли він натисне кнопку, ми відобразимо певний результат.

Приклад вводу-виводу на JavaScript
Надіслати       

        ```  У цьому HTML-коді ми маємо поле вводу з id `myInput`, кнопку, яка викликає JavaScript-функцію `displayOutput()` при натисканні, та параграф з id `output`, у якому ми відобразимо наш результат.  Тепер давайте додамо JavaScript-код, який отримуватиме введення користувача та відображатиме результат.  ```  ```  У цьому JavaScript-коді ми 

Шукаєте цікаве доповнення, яке може додати родзинку вашому вебсайту і зробити його більш привабливим? Спробуйте 3D кнопку Facebook з профілем Popup на основі HTML і CSS.

Код джерела: 3D кнопка Facebook з профілем Popup

Це чудова кнопка, сучасна кнопка з 3D ефектом при наведенні, і при ховері з'являється профільне вікно, що вискакує над кнопкою. Як ви бачите, її GUI містить ім'я профілю і кількість підписників, що робить її ідеальним доповненням для виділення профілів в соціальних мережах.

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

Додатково, джерело коду розроблене в належному стандартному … Читати далі

🎯 Колись намагались поділитись конкретною частиною довгої статті? Чи вказати на цитату, сховану глибоко на веб-сторінці? Зустрічайте Text Fragments! 🌟 Ця чудова функція змінює правила гри в контексті точного поширення веб-контенту. Більше не потрібно нескінченно прокручувати — просто клікни, і ти на місці! 🚀

📚 Що таке Text Fragments?

Text fragments, позначені як #:~:text=, це революційний спосіб створити посилання на конкретну частину тексту на будь-якій веб-сторінці. Це як магія ✨ — коли хтось натискає на твоє посилання, їх браузер автоматично прокручує до того місця, яке ти хочеш, щоб вони побачили. Розмовляємо про точність! 🔍

Наприклад, замість того, … Читати далі

🎯 Авторизація в Laravel: новий рівень із Spatie Role and Permission!

Авторизація користувачів у проектах Laravel є критично важливою для забезпечення безпеки та організації робочих процесів. Пакет Spatie Role and Permission надає гнучку та потужну інфраструктуру для ролей та прав доступу. Цей пакет дозволяє користувачам працювати з різними ролями та надає всі необхідні інструменти для підвищення безпеки вашого проекту. 🚀

💡 Що можна зробити за допомогою Spatie Role and Permission?

1️⃣ Ролі та права доступу:

• Ви можете призначати користувачам одну або кілька ролей.
• Для кожної ролі можна визначити специфічні права доступу.
• Можна безпосередньо надавати права доступу конкретним користувачам.

2️⃣ Гнучка … Читати далі