css
(131)
Основи Webpack: Частина 1
При створенні сайту досить стандартною практикою є мати якийсь процес збірки на місці, щоб полегшити розробку і підготовку файлів до роботи. Ви можете використовувати Grunt або Gulp, побудувавши ланцюжки перетворень, які дадуть можливість вам закинут...
Codeguida · 13 липня 2021 · 162
5 речей, які Ви не знали про CSS позиціонування
В наші дні фронт-енд розробники можуть створювати складні макети сторінок, користуючись різними методами компонування CSS. Деякі з цих методів мають довгі історії (наприклад float) в той час, як деякі завоювали свою популярність за декілька років (на...
Codeguida · 15 лютого 2020 · 149
CSS фото-ефекти. Частина третя: Три методи зробити ефект віньєтки
Метод перший: box-shadow Найпопулярніший спосіб - це накласти box-shadow на елемент. Це, до речі, є дуже цікавою і гнучкою властивістю. Я навіть написала цілий пост про те, як можна зробити піксель-арт за допомогою box-shadow списків з функціями у Sa...
Codeguida · 31 липня 2020 · 133
Як зробити ефект матового скла на чистому CSS?
Сьогодні розглянемо метод створення ефекту матового скла на чистому CSS. Як на цьому демо: 1. Створимо базову розмітку HTML Щоб не ускладнювати, я збираюся показати вам як робити ефект матового скла із пустим div. Усе, що вам буде потрібно у HTML –...
Codeguida · 07 серпня 2017 · 130
Тригонометрія у CSS та JavaScript: творчість і тригонометричні функції
У другій частині цієї серії, присвяченій тригонометрії, ми дослідимо тригонометричні функції JavaScript і дізнаємося, як ми можемо застосовувати їх до нашого коду CSS. У першій частині ми розглянули основи тригонометрії та дізналися, як можна застосо...
Codeguida · 29 червня 2021 · 126
Різні способи написання CSS у React
Ми всі знайомі зі стандартним способом приєднання таблиці стилів у <head> HTML-документа, чи не так? Це лише один з декількох способів написання CSS. Але як це виглядає, якщо ми хочемо створити стиль в односторінковому додатку (SPA), скажімо, в проєк...
Alex · 04 серпня 2023 · 125
Знайомимось з SASS
Хочете вивчити Sass, але ніяк не складається? Тоді читайте далі, тому що сьогодні ми збираємося розглянути особливості Sass і деякі цікаві речі, які ви можете робити з його допомогою. Що таке Sass? Sass (Syntactically Awesome Style Sheets) \- це CSS-...
Codeguida · 22 січня 2020 · 125
CSS магія - створюємо пошукову форму
У цьому уроці я хотів би обговорити, як можна прикрасити просту форму пошуку. Ми не будемо робити нічого занадто складного. Просто дослідимо чотири різних варіанти форми пошуку за допомогою CSS. У вас вже є Basic Search Box У вашому HTML файлі ви пов...
Codeguida · 05 березня 2021 · 119
Як не гаяти час на завантаження невидимого контенту
Браузер не розрізняє невидимий вміст від видимого Зазвичай не весь вміст вебсторінки поміщається на одному екрані. Коли сторінка відкривається, браузер обчислює розміри та позиції всіх DOM-елементів на ній. Елементи завантажуються, навіть якщо більші...
Codeguida · 17 жовтня 2021 · 119
Sass за 15 хвилин
Якщо ви пишете велику кількість коду на CSS, препроцесори можуть заощадити вам багато нервів і часу. Використовуючи Sass, Less, Stylus або PostCSS (пост-процесор) робити великі і складні таблиці стилів стане значно простіше та зрозуміліше. Дякуючи та...
Codeguida · 23 вересня 2021 · 110
Mobile-first CSS
Створення адаптивних веб-сайтів - обов'язкове вміння для кожного front-end розробника. Коли ми говоримо про такі веб-сторінки, на думку відразу ж спливає термін mobile. Всі ми знаємо про важливість проектування з перспективою мобільної підтримки. На...
Codeguida · 24 березня 2020 · 106
Стилізація повзунка браузера на CSS
Є декілька шляхів зробити власний повзунок. Ми будемо використовувати CSS3, він найпростіший. Є jQuery плагіни, що допомагають в стилізації, проте я не люблю додавати багато JavaScript коду до свого веб-сайту. Примітка: пам'ятайте, що кастомні повзун...
Codeguida · 03 червня 2017 · 102