Tag: CSS3

Сайт для платформи онлайн-навчання BikWebClass

  Опис проекту: Розробка сайту для платформи, яка спеціалізується на онлайн-навчанні – BikWebClass. Метою створення платформи є поширення знань і навичок, які будуть корисні дорослій людині в різних областях діяльності – від бізнесу до повсякденних потреб. На сьогоднішній день доступні наступні онлайн курси, в таких категоріях як: Харчова безпека для операторів харчового ринку Безпечна Їжа для споживачів Торгівля Безпека дітей   В наявності є курси з платним, та безкоштовним контентом.         Особливості...

Способи створення кола за допомогою CSS стилів

Досить часто при верстці веб-проекту є потреба в створенні круглих елементів: круглі кнопки, круглі мініатюри, круглі іконки, або навіть цілі круглі контейнери. В деяких випадках вийти з ситуації можна з допомогою простих картинок, а іноді такий підхід не допомагає. Як же вирішити проблему, і тільки за допомогою CSS стилів? В сьогоднішньому уроці ми розглянемо 5 основних способів, з допомогою яких ви зможете створювати на своїх сайтах будь-які круглі елементи.     Кола в CSS Існує...

Маніпулювання ступенем важливості завантаження ресурсів в браузері

Для браузера не всі ресурси володіють однаковим ступенем важливості та пріоритету. Кожен браузер має свою своєрідну евристику, згідно з якою він визначає, які ресурси завантажувати в першу чергу, а які – пізніше. Наприклад, CSS стилі мають більш важливий пріоритет, ніж скрипти і картинки. Іноді браузер може неправильно розставляти пріоритети завантаження і довантажувати з сервера менш важливі ресурси в найпершу чергу. Наприклад, інструмент для підвищення якості веб-сторінок Lighthouse від компанії Google рекомендує боротися з цим так:...

Сайт для компанії НВ ТОВ «Житомирбіопродукт»

  Опис проекту: Розробка сайту для компанії-виробника в м.Житомир. Компанія НВ ТОВ «Житомирбіопродукт» займається виробництвом натуральних високоякісних продуктів харчування для здоров’я людини, які призначені для забезпечення профілактики виникнення і розвитку захворювань. Компанія випускає свою продукцію під торговим знаком ТЗ «Ан-Нушка». Продукція компанії представлена ​​в багатьох аптеках, торгових мережах, а також інтернет-магазинах Житомира, Києва, Львова, Одеси та інших містах України.     Особливості проекту: 100% адаптивний дизайн Слайдер основних продуктів з коротким описом і посиланням на...

Уроки по CSS: що таке одиниці перегляду vw, vh, vmin і vmax

Одиниця перегляду, або, як її ще називають – довжина у відсотках від області перегляду – це адаптивна одиниця в CSS стилях, яка дозволяє визначати розміри в процентах від ширини або довжини області перегляду. Одиниці області перегляду корисно використовувати в тих випадках, коли інші відносні одиниці CSS (такі як відсотки) не справляються з поставленим завданням. В офіційній документації W3C про ці елементи сказано дуже мало, тому в сьогоднішній статті ми розглянемо ці одиниці більш докладно. Також...

Приклад односторінкового сайту з повноекранними секціями

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

Як зробити красиву анімовану кнопку Пошук з CSS3 та jQuery

В сьогоднішньому уроці ми на практиці розглянемо те, як можна створити просту, але дуже красиву кнопку для пошуку, всього лише з допомогою CSS3 і jQuery.   Готова кнопка буде виглядати приблизно так:     Для створення такої гарної анімованої кнопки для вікна пошуку ми будемо використовувати наступні інструменти: HTML – для структури документу CSS3 – для стильового оформлення та анімації руху jQuery – для реагування на натискання кнопок     Деякий час тому назад розробники...

Як завантажувати CSS файли асинхронно

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

Основні моменти для безпеки HTML і CSS

Якщо ви розробник і пишете на HTML/CSS, вам потрібно знати основні моменти, які стосуються безпеки. Хтось може сказати, що HTML і CSS не можуть бути об’єктом атаки зловмисників, але з розвитком веб-технологій у них для атаки з’являються все більше можливостей. В сьогоднішній статті ми розглянемо найважливіші моменти, на які слід звернути увагу кожному розробнику. Вони допоможуть слідувати кращим методикам безпеки та уникнути вразливостей.     Кращі практики для безпеки Ретельно перевіряйте залежності, використовувані в вашому...

Основи чуйної (responsive) типографії у веб-дизайні

Адаптивний або чуйний веб-дизайн – це не тільки стовпці, сітки, картинки та іконки. Все це не матиме сенсу без текстового контенту. Як одного разу сказав Білл Гейтс: «Контент – це король». Тому, адаптивна типографія – це той важливий фактор, який не повинен залишати поза увагою кожен веб-дизайнер і веб-розробник. У сьогоднішній статті ми обговоримо основи створення адаптивної веб-типографіки, а також ті фактори, які впливають на це.     Основи типографії Гарна типографія – це правильний...

Як домогтися багатоколірного фону тільки за допомогою CSS

Вже понад 5 років в веб-дизайні лідируючі позиції займає плаский дизайн (flat design). Після того, як в 2010 році корпорація Microsoft випустила ОС Windows 8, в якій користувацький інтерфейс витриманий в стилі плаского дизайну, цей дизайн почав стрімко набирати популярність. Flat design представлений у вигляді протилежності реалізму і, за задумом, повинен підкреслювати ефект «чарівної простоти» і витонченості. Крім цього плаский дизайн привніс барвистість в традиційний дизайн. Сьогодні яскраві кольори відіграють основну роль у всіх сучасних...

Як домогтися адаптивності картинок з допомогою CSS

У сьогоднішній статті ми на практиці розглянемо техніку, за допомогою якої зможемо досягти адаптивності для картинок на своєму сайті. Ми розглянемо 2 способи, які дозволять зробити картинки адаптивними з використанням невеликої кількості CSS.     Побудова адаптивного макета картинок Для початку припустимо, що у нас є така проста HTML розмітка: <div class="images-box"> <a href="image-URL"> <figure> <img src="image-URL" alt="альтернативний текст картинки"> </figure> </a> <!-- наступні картинки ... --> </div>     На великих екранах наша галерея...

Як створити прості кнопки за допомогою CSS3

У сьогоднішньому уроці ми на практиці зробимо кілька класних, але простих, кнопок за допомогою CSS3 стилів. Ви можете їх використовувати для красивого оформлення користувацького інтерфейсу своїх проектів. Отже, приступимо…   Крок №1 – HTML код (каркас) Каркасний HTML-код дуже простий, ми створимо 3 тега для посилання (<a>) з класом button, і, оскільки ми будемо використовувати три різних колірних стилів, дамо кожному посиланню свій клас для кольору. <html> <body> <div id="buttons"> <a href="#" class="button green">кнопка 1</a>...

9 онлайн платформ, на яких можна швидко поділитися кодом

Програмісти, в основному, використовують IDE (інтегроване середовище розробки) для своєї роботи і написання коду. Це досить потужні інструменти, в яких є інтуїтивно зрозумілий та зручний інтерфейс, включені передвстановлені бібліотеки, є підтримка безлічі мов, генератори коду, інструменти для спільної роботи та інші. Але, іноді, є потреба в тому, щоб можна було швидко поділитися з іншими сніпетами коду, який робочий і доступний онлайн. Наприклад, вам потрібно розмістити на своєму сайті шматок робочого коду і показати демо його...

Приклад використання функції calc() для зміни розміру шрифту в CSS

Раніше ми робили короткий огляд функції calc() в CSS. Сьогодні ми хочемо розглянути невеликий практичний приклад, який дасть рішення для плавного масштабування розміру шрифта в залежності від розміру екрана. Якщо раніше подібні завдання вирішувалися за допомогою jQuery, то з появою функції calc(), це можна зробити за допомогою чистого CSS. Функція calc() дозволяє робити прості математичні обчислення прямо в CSS. А це дозволяє легше створювати адаптивні макети сайтів. Давайте розглянемо один невеличкий реальний підхід, який дозволить...