css
(131)
Починаємо розбиратися з Myth - препроцесором майбутнього
Чому Myth? За допомогою Myth ви можете повноцінно використовувати навіть ті CSS властивості, які все ще знаходяться на етапі розробки W3C і не підтримуються абсолютною більшістю браузерів. Але основною його перевагою перед іншими препроцесорами є, то...
Codeguida · 25 червня 2015 · 1
Як оформлювати спливаючі повідомлення
Сьогодні розмова піде про пару простих стилів і ефектів для спливаючих повідомлень. Є багато способів, щоб показати ненав'язливе сповіщення для користувача: від класичних "кричущих" повідомлень до панелі у верхній області перегляду. Насправді, не існ...
Codeguida · 11 січня 2021 · 1
Проблеми безпеки CSS
Пару тижнів тому з'явилось декілька новин про вбудований в CSS 'keylogger'. І деякі люди неодмінно стали просити розробників браузерів залатати діру, проте деякі поцікавились проблемою дещо глибше і дізнались, що вона торкнулась лише сайтів побудован...
Codeguida · 22 березня 2018 · 1
Використання viewport units для масштабування фіксованих макетів
Бувають випадки, коли потрібно, щоб макет був фіксованим, але реагував на ширину viewport. Приклад із життя Погляньмо на сайт Netflix через десктопний браузер. Персонаж та інші елементи масштабовані відносно ширини viewport. Це важливо для персонажа:...
Codeguida · 27 вересня 2017 · 1
Hex та RGB коди соціальних мереж
Соціальні ресурси Коди кольорів для 20 наступних медіа сайтів: Twitter Facebook Google Plus Pinterest Linkedin Youtube Vimeo Tumblr Instagram Flickr Dribbble Quora Foursquare Forrst В.К. WordPress StumbleUpon Yahoo Blogger SoundCloud SASS/LESS Hex...
Codeguida · 25 лютого 2021 · 1
Анімування кнопки "До обраного" в Twitter
Твіттер нещодавно оновив дизайн кнопки "До обраного", додавши нову анімацію. В її основі не лежать CSS переходи, а використовуються серії зображень. Сьогодні ми розглянемо як відтворити анімацію за допомогою CSS функції steps(). Ілюзія руху Ефект схо...
Codeguida · 11 липня 2020
Пришвидшуємо завантаження сторінки з допомогою завантажувача шрифтів
Коли в останній раз ви використовували Arial, Times New Roman, Helvetica або Comic Sans на веб-сторінках? Зараз використовуються веб-шрифти. Вони (в багатьох випадках) безкоштовні і прості в реалізації: @import url(http://fonts.googleapis.com/css...
Codeguida · 23 жовтня 2020
Як використовувати Device Orientation API
Сьогодні у нас є мобільні пристрої, які оснащені всім - від камер до геолокації. Ми маємо маленькі комп'ютери, що вміють робити майже все, що ми хочемо. Одним з ключових API для мобільних пристроїв є Device Orientation API. Device Orientation API доп...
Codeguida · 03 листопада 2020
nanobar.js - прогрес-бар без JQuery
Приклад: var options = { bg: '#acf', target: document.getElementById('myDivId'), id: 'mynano' }; var nanobar = new Nanobar( options ); nanobar.go( 30 ); // size bar 30% nanobar.go(100); Інст...
Codeguida · 26 листопада 2020
Переходимо до адаптивного вебу
Давайте почнемо з чуйного або реагуючого (responsive) веб-дизайну. Кожен веб-розробник сьогодні знайомий з концепцією чуйного веб-дизайну (RWD). В травні 2010, концепція була прийнята в якості передової практики, процес почав вдосконалюватися і з'яви...
Codeguida · 01 жовтня 2020
Прототип системи відслідковування дій користувачів на сайтах за допомогою CSS
Розробник Ян Бьохер (Jan Böhmer) представив прототип системи відстеження переміщення відвідувачів по сайтах за допомогою CSS. Система не вимагає виконання коду на JavaScript. Які дані можна отримати за допомогою цієї системи? При розміщенні коду на с...
Codeguida · 15 січня 2018