css (131)

Тригонометрія у CSS і JavaScript: ознайомлення

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

Codeguida · 24 червня 2021 · 224

@-правила CSS

Переклад статті Джеффа Грема на CSS-Tricks від 12 травня 2015. @-правило - директива, яка дозволяє створювати в CSS інструкції для зміни відображення або поведінки елементів сторінки. Кожен оператор починається символом @, що слідує перед одним із до...

Codeguida · 25 листопада 2021 · 22

Hex та RGB коди соціальних мереж

Соціальні ресурси Коди кольорів для 20 наступних медіа сайтів: Twitter Facebook Google Plus Pinterest Linkedin Youtube Vimeo Tumblr Instagram Flickr Dribbble Quora Foursquare Forrst В.К. WordPress StumbleUpon Yahoo Blogger SoundCloud SASS/LESS Hex...

Codeguida · 25 лютого 2021 · 1

Лінтинг у CSS: корисні та маловідомі можливості Stylelint

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

Codeguida · 21 вересня 2021 · 68 · 1

Тригонометрія у CSS та JavaScript: творчість і тригонометричні функції

У другій частині цієї серії, присвяченій тригонометрії, ми дослідимо тригонометричні функції JavaScript і дізнаємося, як ми можемо застосовувати їх до нашого коду CSS. У першій частині ми розглянули основи тригонометрії та дізналися, як можна застосо...

Codeguida · 29 червня 2021 · 126

Динамічні лого з допомогою CSS

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

Codeguida · 15 жовтня 2021 · 4

Різні способи написання CSS у React

Ми всі знайомі зі стандартним способом приєднання таблиці стилів у <head> HTML-документа, чи не так? Це лише один з декількох способів написання CSS. Але як це виглядає, якщо ми хочемо створити стиль в односторінковому додатку (SPA), скажімо, в проєк...

Alex · 04 серпня 2023 · 125

Як зробити таби на чистому CSS, а потім ще з них зробити акордеон

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

Codeguida · 05 липня 2021 · 10

Способи додати CSS в JavaScript застосунок

Перед обговоренням такої неоднозначної теми як CSS в JS варто зрозуміти, що немає жорсткого правила, яке б встановлювало єдиний спосіб для обробки CSS в застосунках на React, Vue чи Angular. Кожен проєкт різний, а кожен метод має свої переваги та нед...

Codeguida · 18 липня 2019 · 59

Все, що ви колись хотіли знати про inputmode

Атрибут inputmode підказує браузеру, який тип екранної клавіатури показувати на мобільних пристроях, залежно від обраного input або textarea. <input type="text" inputmode="" /> <textarea inputmode="" /> На відміну від атрибута type, inputmode не втр...

Codeguida · 4 роки тому · 11

Приголомшливі hover-ефекти за допомогою CSS змінних

Нещодавно я надихнувся грайливою hover-анімацією на сайті Grover. Переміщення мишки над кнопкою підписки має градієнтну заливку, яка видозмінюється при пересуванні курсору. Ідея проста, але результатом є кнопка, що виділяється з-поміж інших. Як можн...

Codeguida · 26 березня 2018 · 47

Використання initial у CSS

Ключове слово initial оточене містикою для багатьох розробників. Насправді це просто спосіб повернення базових значень властивостям CSS. Зазвичай розробники використовують значення властивостей CSS за замовчуванням, наприклад auto, 0, normal, тощо. Я...

Codeguida · 06 березня 2018 · 1