css
(131)
Невелика колекція ефектів для діалогових вікон з використанням CSS-анімації
Стилі і тренди змінюються і це вимагає від нас ініціалізації різних ефектів, які підходять для сучасного інтерфейсу. Цей набір містить деякі основні анімації, а також більш незвичні, з використанням техніки SVG морфінга для діалогів зі Snap.svg. Звер...
Codeguida · 29 березня 2020 · 7
Спілкування в режимі реального часу
Socket.io \- це дійсно крута річ, вона дає вам можливість обмінюватися даними між клієнтами в режимі реального часу. Реалізуючи її разом з AngularJS, ви можете легко оновлювати вікно перегляду користувача. Перед тим, як заглибитись у код, давайте роз...
Codeguida · 25 березня 2020 · 17
Mobile-first CSS
Створення адаптивних веб-сайтів - обов'язкове вміння для кожного front-end розробника. Коли ми говоримо про такі веб-сторінки, на думку відразу ж спливає термін mobile. Всі ми знаємо про важливість проектування з перспективою мобільної підтримки. На...
Codeguida · 24 березня 2020 · 106
Створення CSS3 нотатки без використання зображень
В цій статті ми розглянемо, як створити CSS стікер для нотаток без жодного зображення! Ось як це буде виглядати: В даному випадку я використав його для відображення цитати А. Ейнштейна. Ви можете використати інший текст. HTML Давайте поглянемо, на...
Codeguida · 18 березня 2020 · 20
Інклюзивні компоненти: картки
Деякі з компонентів, які розглядаються в блозі Хейдона Пікерінґа, мають задокументовані рекомендації для коректної роботи. Наприклад, стандарт WAI-ARIA передбачає певну структуру і поведінку для вкладок. Наскільки точно слідувати цим рекомендаціям —...
Codeguida · 26 лютого 2020 · 45
Bootstrap Grid за 15 хвилин
Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ним легко працювати. Той хто знає HTML, CSS і трохи...
Codeguida · 20 лютого 2020 · 95
5 речей, які Ви не знали про CSS позиціонування
В наші дні фронт-енд розробники можуть створювати складні макети сторінок, користуючись різними методами компонування CSS. Деякі з цих методів мають довгі історії (наприклад float) в той час, як деякі завоювали свою популярність за декілька років (на...
Codeguida · 15 лютого 2020 · 149
CSS анімація в середині циклу
Скажімо, у вас анімація, яка анімує елемент по всій ширині екрану. Від лівого до правого краю. Ви можете застосувати її до кількох елементів. Але, Ви не хочете, щоб всі елементи починали з однієї позиції. Ви можете змінити animation-delay так, що ані...
Codeguida · 02 лютого 2020 · 5
Вступ до LESS
Ви можливо вже зустрічалися з цим CSS-препроцесором, але вирішили не починати його вивчення, тому що він виглядає складним, а ще вам знову буде потрібно запам'ятати величезну кількість нового синтаксису. Так, частково - це правда. Але базові знання L...
Codeguida · 30 січня 2020 · 7
Stylus за 20 хвилин
Нещодавно на Codeguida вийшов переклад статті про SASS, і я вирішив написати про свій улюблений препроцесор, адже він такий зручний і чомусь такий непопулярний. CSS потрібен герой Перш за все з'ясуємо, що таке Stylus. Stylus це один з трійки найвідом...
Codeguida · 22 січня 2020 · 4
Знайомимось з SASS
Хочете вивчити Sass, але ніяк не складається? Тоді читайте далі, тому що сьогодні ми збираємося розглянути особливості Sass і деякі цікаві речі, які ви можете робити з його допомогою. Що таке Sass? Sass (Syntactically Awesome Style Sheets) \- це CSS-...
Codeguida · 22 січня 2020 · 125
П'ять способів приховати елементи в CSS
Є кілька способів приховати елемент в CSS. Можна вказати opacity: 0, visability: hidden, display: none або встановити крайні значення для абсолютного позиціонування. Ви коли-небудь задавалися питанням, чому так багато методів приховування елементу, к...
Codeguida · 19 січня 2020 · 743