css (131)

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

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

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

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

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

Alex · 31 липня 2023 · 48

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

В попередній статті ви дізналися як додати дані на Parse.com і відобразити їх на вашому сайті. Ви познайомилися з поняттям об'єкт, колекція та екземпляр, і створили свій перший клас. Починаючи з цього уроку, ми будемо створювати в адмін-панель блогу....

Codeguida · 30 грудня 2021 · 10

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

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

Codeguida · 27 грудня 2021 · 19

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

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

Codeguida · 20 грудня 2021 · 10

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

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

Codeguida · 14 грудня 2021 · 5

Front-end воїн - Scroll Progress

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

Codeguida · 13 грудня 2021 · 26

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

Ефект ерозії Цей ефект ми зазвичай бачимо у фільтрах, які надають фото вінтажний стиль. Тут найтемніші кольори висвітлюються, загублюються маленькі деталі у тінях і понижується контраст. {full-post-img} Фото з ефектом ерозії: {full-post-img} Крок п...

Codeguida · 08 грудня 2021 · 6

@-правила CSS

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

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

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

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

Codeguida · 23 листопада 2021 · 3

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

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

Codeguida · 20 листопада 2021 · 2

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

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

Codeguida · 12 листопада 2021 · 53