Параллакс-эффекты скролла добавляют визуальный интерес, но они часто создают проблемы юзабилити, например, медленно загружаемый или трудно читаемый контент. Подумайте, стоит ли их использовать. Несколько лет назад мы с коллегой решились протестировать новый тренд дизайна, который завоевывал награды в области веб-дизайна и получал похвалу на форумах дизайнеров. Этим трендом был параллакс-эффект при скролле. Однако, мы не…Продолжить читать «Чего не хватает параллакс-эффекту, исследование»
Разметка: <nav class=»circle-menu»> <div class=»center»></div> <ul> <li><a href=»#»>1</a></li> <li><a href=»#»>2</a></li> <li><a href=»#»>3</a></li> <li><a href=»#»>4</a></li> <li><a href=»#»>4</a></li> <li><a href=»#»>6</a></li> </ul> </nav> Стили: .circle-menu { position: relative; width: 400px; height: 400px; margin: 50px auto; background-color: white; box-shadow: 0 0 3px #cccccc; } .circle-menu ul { position: absolute; width: 300px; height: 300px; margin: 50px; padding: 0; list-style: none;…Продолжить читать «Круговое меню из курса HTML-академии»
Перевод More Readable CSS with CSS Custom Properties – второй статьи Серджио Гомеса о пользовательских свойствах CSS Теперь, когда вы знаете как работают пользовательские свойства CSS, можно использовать их для улучшения читаемости и облегчения поддержки кода. Важно: в статье для краткости опущены фолбэки при использовании var(), но для надёжности кода про них нужно помнить. .foo { /* для браузеров, которые не…Продолжить читать «Пишем понятный код с пользовательскими свойствами CSS»
Это перевод “CSS Custom Properties — The Basics” — первой из серии статей Серджио Гомеса о пользовательских свойствах CSS. В ней рассказываются самые основы: что такое пользовательские свойства и как ими пользоваться. Вы уже слышали о пользовательских свойствах CSS (также известных как CSS переменные) или даже имеете о них некоторое представление? Возможно, вы знаете о них из поста на developers.google.com?…Продолжить читать «Пользовательские свойства CSS. Основы»
Трансформация блоков — край блока под углом = css. 0
Сказка ли? Нет, к тому же это очень удобно, быстро, масштабируемо и кроссбраузерно. Инструкция любезно предоставлена мне моим другом и коллегой Антоном Яценко. Создаем свой собственный иконочный шрифт используя svg-иконки. Ресурс: https://icomoon.io Идешь в приложение http://joxi.ru/EA417L1TLglxrb Импортишь свои иконки с компа http://joxi.ru/Vm6zqZzTOwNkmZ Они все должны быть выделены (об этом свидетельствует цвет фона, на котором они…Продолжить читать «Свой иконочный шрифт из svg иконок»
Вот тут очень удобная штука для чтения минимизированного css. Магия. Enter your messy, minified, or obfuscated CSS Style Sheets into the field above to have it cleaned up and made pretty. The editor above also contains helpful line numbers and syntax highlighting. There are many option to tailor the beautifier to your personal formatting tastes….Продолжить читать «Разминимизатор css-простыни и сразу минимизатор»
Плагин анимации с выбором свойств (animate.css). Использовать его в гордом одиночестве в современном мире бессмысленно. Поэтому я всегда ставлю его одновременно с расширением wow.js, чтобы можно было управлять анимацией более гибко (задержка, скорость анимации, запуск при загрузке страницы, повтор и пр.). В package.json пишем «wowjs»: «^1.1.3», чтобы эта полезная штука сразу устанавливалась в проект. Если…Продолжить читать «Анимация css и немного js»
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention. The list for July 2016 is packed with some of the hottest open-source libraries from…Продолжить читать «15интересных JavaScript and CSS библиотек в июле 2016»
Конвертор 0