css (130)

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

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

9 порад щодо оптимізації зображень для прискорення вашого сайту

У цій статті ми розглянемо ефективні методи оптимізації зображень, які значно покращать продуктивність вашого застосунку. Почнемо з самого початку! 1. Формати зображень Вибір правильного формату зобра...
31 липня 2023 ·
1
· 59 · Alex

Адаптивне меню з допомогою CSS3 та jQuery

В цьому уроці ми створимо адаптивне меню за допомогою CSS3 і JQuery. Ось як це виглядатиме (перейдіть на Codepen та пограйтеся з шириною сторінки): {full-post-img} HTML Ми обертаємо все в nav елемент...
27 грудня 2021 ·
0
· 38 · Codeguida

Об'єктно-орієнтований CSS

Це звучить дуже дивно, але ідеї ООП можна реалізувати в CSS, зробивши його більш зручним та швидким. Що таке OOCSS? Коли Ви чуєте "об'єктно-орієнтований CSS", можна подумати, що це якийсь новий CSS-пр...
20 грудня 2021 ·
0
· 16 · Codeguida

Створюємо власний блог з допомогою Parse.js, частина 6: Редагування

####Попередні уроки: Створюємо власний блог з допомогою Parse.js Створюємо власний блог з допомогою Parse.js: Працюємо з даними Створюємо власний блог з допомогою Parse.js: Авторизація користува...
14 грудня 2021 ·
0
· 8 · Codeguida

Front-end воїн - Scroll Progress

Сьогодні ми розглянемо кілька методів демонстрації прогресу прокрутки веб- сторінки. Ця техніка використовується на багатьох сайтах, і не дарма; вона забезпечує контекстуальне розуміння кількості інфо...
13 грудня 2021 ·
0
· 44 · Codeguida

CSS фото-ефекти. Частина перша: Вінтаж

Ефект ерозії Цей ефект ми зазвичай бачимо у фільтрах, які надають фото вінтажний стиль. Тут найтемніші кольори висвітлюються, загублюються маленькі деталі у тінях і понижується контраст. {full-post-i...
08 грудня 2021 ·
0
· 11 · Codeguida

@-правила CSS

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

Чого можна досягнути з допомогою CSS змінних і неможливо зробити використовуючи препроцесори

Зараз дуже популярним є використання препроцесорів для CSS: Less, Saas, Stylus. Основною причиною широкого застосування цих інструментів є можливість роботи зі змінними. Проте, після компіляції в звич...
23 листопада 2021 ·
0
· 13 · Codeguida

Тренди веб-розробки в 2017 році

Інтернет - це майбутнє! Саме так казали люди десятки років тому, і вони не помилилися - тепер інтернет це невід'ємна частина життя багатьох людей. Ваш сусід, колега, випадковий перехожий в метро - всі...
20 листопада 2021 ·
0
· 3 · Codeguida

Основи Webpack: Частина 2

У першій частині туторіалу ми дізналися, як створити Webpack проект, а також як використовувати лоадери для обробки нашого JavaScript коду. Але найголовніша властивість Webpack полягає в його здатност...
12 листопада 2021 ·
0
· 110 · Codeguida

20 порад для написання сучасного CSS

В цьому пості ми поділимося колекцією з 20 порад та кращих практик, що зроблять ваш CSS набагато кращим 1. Остерігайтеся Margin Collapse На відміну від інших властивостей, вертикальні відступи (margin...
11 листопада 2021 ·
0
· 89 · Codeguida

Створюємо власний блог з допомогою Parse.js, частина 4: Додаємо новий блог

Попередні уроки: Створюємо власний блог з допомогою Parse.js; Створюємо власний блог з допомогою Parse.js: Працюємо з даними; Створюємо власний блог з допомогою Parse.js: Авторизація користувачі...
08 листопада 2021 ·
0
· 6 · Codeguida

Реліз Bootstrap 4 alpha!

Це вільний переклад поста з The Official Bootstrap Blog. Сьогодні особливий день для Bootstrap. Не тільки через те, що сьогодні наш четвертий День народження, а й через те, що після року розробки ми...
04 листопада 2021 ·
0
· 4 · Codeguida

Як не гаяти час на завантаження невидимого контенту

Браузер не розрізняє невидимий вміст від видимого Зазвичай не весь вміст вебсторінки поміщається на одному екрані. Коли сторінка відкривається, браузер обчислює розміри та позиції всіх DOM-елементів н...
17 жовтня 2021 ·
2
· 129 · Codeguida

Що цікавого можна зробити з checkbox

Checkbox дозволяють вибрати більше одного варіанта з запропонованих в формі. Розумно поєднуючи їх з CSS, можна отримати дивовижні речі. Ця стаття покликана продемонструвати деякі з креативних речей, щ...
16 жовтня 2021 ·
0
· 349 · Codeguida

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

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

9 недооцінених можливостей CSS

За більше як 20 років свого існування CSS став стандартом стилізації веб-сторінок. Продовжують виходити нові специфікації (Наприклад, CSS4), що додають нові круті можливості: анімації, трансформації,...
01 жовтня 2021 ·
1
· 15 · Codeguida

Sass за 15 хвилин

Якщо ви пишете велику кількість коду на CSS, препроцесори можуть заощадити вам багато нервів і часу. Використовуючи Sass, Less, Stylus або PostCSS (пост-процесор) робити великі і складні таблиці стилі...
23 вересня 2021 ·
1
· 157 · Codeguida

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

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

Ресурси, що блокують рендеринг: як правильно їх позбутися

Ця стаття буде корисною, якщо Lighthouse коли-небудь казав вам «прибрати ресурси блокування рендерингу» (якщо не казав, то все одно можете дізнатись, як цього уникнути). Ресурси блокування рендерингу...
21 вересня 2021 ·
2
· 280 · Codeguida

Основи роботи з адаптивним текстом

Не секрет, що для того щоб текст прочитало якнайбільше людей, він теж повинен бути адаптивним. Його розмір повинен залежати від розміру екрану. Зазвичай для цього задають розміри в rem. І тоді вже бра...
19 вересня 2021 ·
0
· 45 · Codeguida

Математичні функції CSS

Зараз у CSS є чотири добре підтримувані математичні функції. Кожна з них надзвичайно корисна у повсякденній роботі. Ці функції CSS можна застосовувати у найнесподіваніших випадках, наприклад, у градіє...
08 вересня 2021 ·
1
· 32 · Codeguida

Виріз в елементах: CSS чи SVG?

Фронтенд-розробники подекуди використовують на сайтах елементи з вирізами, ви мусили натрапляти на них хоча б раз. Для створення такої фігури за допомогою CSS або SVG існує кілька способів. Кожен з ни...
08 вересня 2021 ·
1
· 68 · Codeguida