css
(131)
Вертикальне центрування з допомогою CSS Flexbox
Flexbox - рішення, яке позбавляє розробників від кошмарів розмітки документа за допомогою CSS. У цього інструмента ще довгий шлях розвитку, проте вже зараз з допомогою Flexbox можна з легкістю вирішити найдавнішу проблему — вертикальне центрування ел...
Codeguida · 14 грудня 2020 · 13
Створюємо власний блог з допомогою Parse.js, частина 1
Ви коли-небудь стикалися з ситуацією, коли ви маєте ідею для веб-ресурсу, але не знаєте як її можна реалізувати? З Parse.js кожен, хто осягнув ази HTML, CSS і JavaScript може створити динамічний веб-сайт або web- додаток з легкістю. У цьому уроці ро...
Codeguida · 27 листопада 2020 · 7
nanobar.js - прогрес-бар без JQuery
Приклад: var options = { bg: '#acf', target: document.getElementById('myDivId'), id: 'mynano' }; var nanobar = new Nanobar( options ); nanobar.go( 30 ); // size bar 30% nanobar.go(100); Інст...
Codeguida · 26 листопада 2020
Веселощі з CSS лічильниками
CSS лічильники – це одна з тих цікавих можливостей про, які аж хочеться сказати: «Ого, не знав, що на CSS можна таке зробити». Простіше кажучи, вони дозволяють вам рахувати елементи по-порядку – без JavaScript. Базовий лічильник Ось це – простий прик...
Codeguida · 23 листопада 2020 · 32
Як зробити drop-down box за допомогою CSS3 анімації і checkbox
У цьому уроці я покажу вам, як зробити drop-down box за допомогою CSS3 анімації і checkbox хаку. Зазвичай для таких речей застосовують JQuery, але завдяки CSS3 ми можемо зробити це використовуючи властивість transition. Погляньте на демо! {full-post...
Codeguida · 21 листопада 2020 · 4
Як використовувати Device Orientation API
Сьогодні у нас є мобільні пристрої, які оснащені всім - від камер до геолокації. Ми маємо маленькі комп'ютери, що вміють робити майже все, що ми хочемо. Одним з ключових API для мобільних пристроїв є Device Orientation API. Device Orientation API доп...
Codeguida · 03 листопада 2020
Пришвидшуємо завантаження сторінки з допомогою завантажувача шрифтів
Коли в останній раз ви використовували Arial, Times New Roman, Helvetica або Comic Sans на веб-сторінках? Зараз використовуються веб-шрифти. Вони (в багатьох випадках) безкоштовні і прості в реалізації: @import url(http://fonts.googleapis.com/css...
Codeguida · 23 жовтня 2020
Асинхронне завантаження CSS
Коли справа доходить до оптимізації веб-сторінок, продуктивність, розмір і вага кожного ресурсу на сторінці є важливим фактором. Великі JavaScript і CSS файли можуть суттєво уповільнити завантаження сторінок, що буде дратувати користувачів. Існує ряд...
Codeguida · 20 жовтня 2020 · 23
Повне керівництво по Flexbox
Це повне керівництво пояснює все про flexbox, зосереджуючись на всіх можливих властивосях для батьківського елемента (контейнер flex) та дочірніх елементів (елементи flex). Воно також включає в себе історію, демонстрації, шаблони і таблицю підтримки...
Alex · 11 жовтня 2020 · 3.9K
Що ви повинні знати про змінні CSS
Коли веб-проект починає рости, його CSS зазвичай стає астрономічно-великим і брудним. Щоб вирішити цю проблему, були запроваджені CSS-змінні, що вже підтримуються популярними браузерами. Вони дозволяють розробникам зручніше працювати з часто використ...
Codeguida · 05 жовтня 2020 · 16
Переходимо до адаптивного вебу
Давайте почнемо з чуйного або реагуючого (responsive) веб-дизайну. Кожен веб-розробник сьогодні знайомий з концепцією чуйного веб-дизайну (RWD). В травні 2010, концепція була прийнята в якості передової практики, процес почав вдосконалюватися і з'яви...
Codeguida · 01 жовтня 2020
VenoBox
Основною перевагою VenoBox є те, що він обчислює максимальну ширину зображення на екрані і зберігає його висоту, якщо воно вище вікна (в невеликих пристроях ви можете прокрутити вміст вниз, уникаючи мікроскопічного масштабування зображення). Використ...
Codeguida · 24 вересня 2020 · 2