css
(131)
Якщо CSS такий простий, то чому всі лажають?
Підніміть руку , якщо ви front-end розробник і в якийсь момент у вашій кар'єрі виникло таке відчуття, що ви робите дуже прості речі, що внесок, який ви робите в команду, мінімальний і те, що робите ви, може зробити будь-хто. Якщо це так, то ви є час...
Codeguida · 14 лютого 2021 · 10
Різні способи створити стовпці однієї висоти в Bootstrap
Bootstrap 3 (тепер Bootstrap 4) - дивовижний CSS-фреймворк, який робить життя веб-розробників будь-якого рівня простіше. Коли я був новачком, і вперше знайомився з Bootstrap, то використовував всі його можливі властивості, і намагався хакнути, щоб от...
Codeguida · 07 лютого 2021 · 11
CSS фото-ефекти. Частина друга: 3D-окуляри
3D-картинки або анагліфи {full-post-img} Анагліф - це тип 3D-зображення, створений за допомогою двох однакових фото зсунених на 5 сантиметрів (приблизну відстань між очами в людини) у бік. Це створює ілюзію об'єму, якщо дивитися на картинку через ок...
Codeguida · 01 лютого 2021 · 15
Проста валідація форм з HTML5
Коли ви збираєте інформацію від людей, через форму, ви застосовуєте якісь перевірки. Недотримання цих вимог може призвести до втрати клієнтів, небажаних даних в вашій базі даних або навіть слабких місць в системі безпеки вашого сайту. Історично, ство...
Codeguida · 13 січня 2021 · 253
Використовуємо jQuery правильно
Завантаження з CDN Замість того, щоб зберігати jQuery на Вашому сервері, краще завантажувати бібліотеку з популярних CDN. Це дозволить зменшити час завантаження сторінки. <script src="/vendor/jquery/jquery.min.js"></script> <script src="//aj...
Codeguida · 13 січня 2021 · 11
Як оформлювати спливаючі повідомлення
Сьогодні розмова піде про пару простих стилів і ефектів для спливаючих повідомлень. Є багато способів, щоб показати ненав'язливе сповіщення для користувача: від класичних "кричущих" повідомлень до панелі у верхній області перегляду. Насправді, не існ...
Codeguida · 11 січня 2021 · 1
11 ресурсів для вивчення CSS
1) Розгортання Box-моделей Інтерактивні слайди для вивчення CSS 3D-Трансформацій. Навігація з допомогою клавіш "вліво" та "вправо". Дивитися на повний екран для отримання кращих результатів. 2) "CSS Закусочна" Гарно сконструйована маленька гра, щоб...
Codeguida · 09 січня 2021 · 9
А ви зможете зробити це за допомогою CSS?(Частина перша)
Простий приклад Тут ми маємо три текстових поля, які використовують місцезаповнювачі. Як ви можете бачити - нічого складного. Коли ви фокусуєтесь на якомусь з полів, то з'являється назва цього поля, певного роду нагадування користувачу, що саме він...
Codeguida · 06 січня 2021 · 2
Sass vs LESS vs Stylus: Вибір препроцесора
Напевно багато з вас чули про CSS препроцесор. Писати код, використовуючи його потужні можливості - справді чудово і захоплююче. Та що ж таке той препроцесор? Який препроцесор обрати? Сьогодні ми в цьому розберемося. В цій статті ми розглянемо деякі...
Codeguida · 06 січня 2021 · 42
Оформлення пагінації сторінок за допомогою CSS
Перемикачі сторінок - засіб, який допоможе вашим користувачам з легкістю подорожувати сайтом. Гідною альтернативою є нескінченна прокрутка, однак у неї теж є як свої плюси, так і мінуси. Фреймворки, на кшталт Bootstrap, мають потужні вбудовані засоби...
Codeguida · 06 січня 2021 · 55
Анімація DOM за допомогою Anime.js
{full-post-img} Якщо ви в пошуках швидкої та маленької бібліотеки для анімації, то Anime.js саме те, що вам потрібно. Оживляючи веб Як підмітила Sarah Drasher, анімація ділиться на UI/UX анімацію і самостійну. Дослідження доводять, що ми краще усвід...
Codeguida · 01 січня 2021 · 27
Прості способи поліпшити анімацію при наведенні на кнопку
Реакція на дію - дуже важливий елемент веб-сайту, теми або шаблону. Кнопки стали одними з значущих компонентів веб-дизайну. Тож чому б не прикрасити їх, додавши прості CSS ефекти. Налаштовуємо код Додайте наступний CSS код для вашого елементу button....
Codeguida · 16 грудня 2020 · 205