Tag: HTML5

Розширені селектори CSS, про які потрібно знати

За допомогою CSS можна створювати дійсно приголомшливі сайти. А правильний підхід до використання стилів дозволяє реалізувати практично будь-які ідеї у веб-дизайні. І одним з головних моментів тут є ефективне використання селекторів. За допомогою селекторів можна надати унікальні стилі навіть самим «віддаленим» елементам в DOM. Але іноді буває так, що звичайні селектори не підходять для вирішення цього завдання. Наприклад, коли код, і відповідно елементи DOM, генерується динамічно. На щастя для верстальників, доступ до деяких динамічних селекторів...

Які елементи можна (і потрібно) розміщувати у футері сайту

Розробка оптимального футеру (підвалу, нижньої частини, нижнього колонтитулу) сайту не завжди є у списку пріоритетів веб-дизайнера. З огляду на те, що футер знаходиться в самому низу веб-сторінки, легко припустити, що більшість відвідувачів сайту його майже не помічають, і тому не всі розробники приділяють йому достатньо уваги. Хоча футер, насправді, є дуже важливою частиною будь-якого сайту. За даними спеціального дослідження, приблизно 70% відвідувачів можуть прокручувати сайт до футеру, а приблизно 25% відвідувачів завжди будуть прокручувати сайт...

Прискорюємо свій CSS

Ви коли-небудь думали про розмір файлів CSS-стилів на своєму сайті? Адже якщо ці файли мають велику вагу, це негативно позначиться на завантаженні (відображенні) сторінки. Хоча CSS-файли сайту в основному важать небагато, вони дуже важливі в момент завантаження сайту в браузері. Оскільки браузер блокує відображення сторінки до повного завантаження CSS, ці файли повинні бути максимально легкими. У сьогоднішній статті ми розглянемо декілька порад, які допоможуть вам зменшити розмір CSS-файлів, а також прискорити рендеринг сторінок сайту.  ...

Як додати клікабельні телефонні номери на сайт

Кількість користувачів, які переглядають сайти зі своїх телефонів, зростає стрімко та з кожним днем. І досить часто потрібно досягти того, щоб телефонні номери можна було натискати. Наприклад, зайти на сайт доставки їжі з мобільного і, натиснувши на номер телефону, зробити замовлення. Хоча не всі користуються цією можливістю і на багатьох корпоративних сайтах розміщуються телефонні номери, що представляють собою просто текст, який не можна натискати. Тож у цій статті ми розкажемо, як можна додати на сайт...

Кращі практичні рекомендації по веб-дизайну

Якщо ви фрілансер, а ваша робота залежить від дизайну, значить ви іноді стикалися з поганим веб- дизайном. Дизайн – це важливий аспект в кожному проекті з веб-розробки. І неважливо, наскільки якісний код на сайті, якщо ваш макет змушує відвідувачів нервово здригатися. У цій статті ми детально розглянемо кращі практичні рекомендації по дизайну, які поліпшать ваші навички і розширять ваш кругозір.     Стежте за сучасними тенденціями Якщо ви періодично переглядаєте різні сайти в Інтернеті, ви...

Поради щодо оптимізації мобільного веб-дизайну

В останні роки мобільний трафік значно зріс і ця тенденція зберігається. Тому важливо приділяти особливу увагу оптимізації своїх проектів під мобільні пристрої. У цій статті ми розглянемо практичні поради щодо оптимізації веб-дизайну під мобільні пристрої.     №1: Використання декількох зображень в поєднанні з медіа-запитами Сподіваємося, що ви вже знайомі з медіа-запитами. Для мобільного дизайну медіа-запити є майже основними. В даний час проблема з медіа-запитами полягає в тому, що багато дизайнерів і розробники створюють сайти...

Гамбургер-меню для адаптивних сайтів: використовувати чи ні?

Адаптивний дизайн – це інноваційне рішення для правильного відображення сайту на екранах з різною роздільною здатністю. Але найбільш спірне питання в адаптивному дизайні – це вирішити, як має виглядати меню. У цьому пості ми поговоримо про 3 варіанти навігаційного меню для адаптивного сайту.   Концепція адаптивного дизайну зароджувалася як тренд, але зараз стала справжньою необхідністю. Розробка Ітана Маркота перевернула світ веб-дизайну ще в 2013 році. Саме це призвело до кардинальних змін в навігації та інтерфейсі...

Спеціальні символи HTML

Якщо вам потрібно вставляти в свої публікації спеціальні символи, яких немає на клавіатурі, ви можете використовувати об’єкти HTML, які починаються з амперсанду (&) і закінчуються крапкою з комою (;). У мові HTML є багато заготовлених спецсимволів. Щоб вставити певний символ у вихідний код сторінки, потрібно використовувати відповідний HTML-код. Наприклад, найпопулярніший HTML-код – це нерозривний пробіл. Щоб його вставити у вихідний код, використовуйте     Деякі спецсимволи можна просто копіювати і вставляти. Щоб HTML-об’єкти правильно визначалися...

Псевдокласи в CSS – мінімальний набір знань

Псевдоклас в CSS стилях – це ключове слово, яке при додаванні до селектора визначає його особливий стан. Наприклад, псевдоклас :focus дозволяє застосовувати особливі CSS-стилі для елементів, які знаходяться в фокусі (наприклад, можна підсвічувати фокусне поле введення форми кольором, відмінним від інших використовуваних кольорів форми).   Синтаксис: селектор:псевдоклас {властивість: значення; } приклад .content:hover {background-color: #06a79d; }     Основні псевдокласи CSS: :active – надає стиль активному посиланню :checked – використовується для елементів (наприклад, checkbox і radio),...

Соціальний проект – сайт-візитка кожній школі Житомира

Наша команда вирішила створити сайт мережі шкіл у м.Житомирі в якості соціального експерименту. На даний момент не у кожної школи Житомира є сайт, а ті що є або застарілі, або використовують старі технології та CMS. До того ж практично кожен другий старий сайт містить віруси, що шкодить не тільки іміджу школи, а й відвідувачам таких сайтів. Інформація на сайтах розміщується часто хаотично, довго не оновлюється і викликає сумніви. Тож ми вирішили змінити цю ситуацію, та...

Шпаргалка по jQuery для початківців

Ми вирішили зібрати всю основну інформацію по jQuery (таку як робота з ядром, атрибутами, селекторами; маніпуляція з DOM, події, ефекти, AJAX та ін.) для початківців в одному місці. Сподіваємося, що дана шпаргалка буде корисна всім програмістам, незалежно від їх рівня та досвіду.   Ядро: Функції jQuery, Дані об’єкта, Дані, Взаємодія Атрибути: Attr, Значення, Клас, HTML, Текст   Селектори: Основні, Ієрархія, Основний фільтр, Форма, Атрибути, Фільтр контенту, Фільтр дочірніх елементів, Фільтр видимості   Переміщення по дереву...

Використання Flexbox в CSS3 для адаптивного дизайну

У цій статті ми хочемо більш детально зупинитися на використанні flexbox в CSS3, в якості одного з просунутих способів досягнення адаптивності на сайті. При створенні CSS складність макетів була не такою, якою вона буває в наші дні. Раніше макети були з фіксованою шириною і невеликими варіаціями розташування блоків, а сьогодні макети сайтів можуть набувати практично будь-яких обрисів. Все це змушує розробників придумувати хаки для CSS, щоб контент відображався більш-менш правильно.   Flexbox (гнучкі коробки) –...

Основні способи вертикального вирівнювання елементів в CSS

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

Скошені краї блоків за допомогою CSS-масок і трансформацій

За допомогою вузлуватих, скошених країв у різних html-елементів (картинок, блоків, цілих секцій) можна надати унікальний вигляд будь-який веб-сторінці. У цій статті ми розглянемо практичні приклади того, як легко можна додати скошені краї будь-якому html-елементу за допомогою простих методик CSS-масок і CSS-трансформацій.     Щоб створити кути для країв елементів за допомогою CSS трансформацій зазвичай доводиться «перекошувати» батьківський елемент, а потім «відв’язувати» дочірній елемент, але такий метод має ряд зайвих обмежень. А що робити, якщо потрібно...

Ознайомлення із CSS-анімацією (animation)

У минулій статті ми робили короткий огляд CSS-переходів, а в цьому пості проведемо ознайомлювальний рейд по корисним, як я сподіваюся, питанням CSS-анімації. Ці дві нові властивості в CSS3 дозволяють створювати на сайті привабливу і «магічну» інтерактивність, навіть без використання JavaScript. Також, в сьогоднішньому пості, розглянемо практичний приклад застосування властивості animation в CSS.   Анімація в CSS3 вже сьогодні використовується практично всіма сучасними веб-дизайнерами, незважаючи на більш високі стандарти і вимоги до браузерів. Оскільки ці нововведення...