От автора: Недавно я обнаружил этот плагин jQuery, дающий возможность легко создавать на своем сайте эффект ввода текста. Этот плагин с открытым исходным кодом есть на Github под названием typed.js. В этом посте я покажу вам его, а также продемонстрирую, как создать эффект ввода текста с помощью одной лишь анимации CSS.
От автора: Когда дело доходит до адаптивного текста в Сети, помимо простого изменения размера контейнера и перезаливки текста внутри него можно сделать еще многое. Эта подробная статья раскрывает различные методы адаптации текстов.
Один из важнейших аспектов адаптивного веб-дизайна – адаптивная типографская разметка текста. Когда встает вопрос адаптивного текста в Сети, помимо простого изменения размера контейнера и перезаливки текста внутри него можно сделать еще многое. От выбора типа шрифта и его цвета до получения разборчивого размера, высоты и длины строки на разных экранах – существует несколько способов добиться гибкого и действительно адаптивного веб-текста.
От автора: Вы, возможно, знакомы со сворачиванием элементов по вертикали. Если в нем содержатся только «плавающие» элементы, то родительский элемент свернется до нулевой высоты. Для этого мы часто применяем clear fix. Но если в элементе ничего не содержится, он также может свернуться по горизонтали, что окажется для разметки весьма затруднительно.
От автора: Учебник о том, как воссоздать выскальзывающее боковое меню-колонку, которое можно увидеть на вебсайте GoogleNexus 7.
Сегодня я хочу показать вам, как реконструировать боковое меню-колонку страницы Google Nexus 7. Оно выскальзывает с красивым эффектом, и еще при этом раскрываются подпункты. При проведении мышью над специальной иконкой меню показываются иконки боковой колонки. При щелчке по иконке боковое меню будет показываться полностью. Первый элемент бокового меню-колонки – это поле ввода для поиска, стили которого такие же, как у остальных пунктов.
От автора: Есть несколько методов создания наложения: от использования абсолютно позиционированного элемента до контуров и псевдоэлементов. В этой статье мы собираемся исследовать стили каждой из методик со всеми их «за» и «против».
Дизайнерские шаблоны, набор лучших практик и методов, нацеленных на решение одной из самых распространенных «проблем» дизайна, обычно представлены в контексте дизайнерских принципов. Один из них – принцип «остаться на странице» (Stay On Page). Он базируется на том факте, что обновления страницы плохо действуют на мыслительные процессы пользователя, вызывая явление, известное как ослепление при смене, и нам нужно избегать визуальной перегрузки пользователя там, где и когда это возможно.
От автора: Вы, возможно, уже знаете, что переходы и анимация CSS3 позволяют анимировать специальный набор свойств CSS. Одно из тех свойств, которые нельзя анимировать – display.
Отлично было бы это сделать, но на данный момент это невозможно и, думаю, никогда не станет реальностью (например, как анимировать до “display: table”?). Но есть возможность совершить обходной маневр, и один из них я здесь и опишу.
От автора: Timeline – это плагин jQuery, специализирующийся на показе хронологического ряда событий. Вы можете вставлять любые виды средств, включая твиты, видео и карты, и связывать их с датой. После некоторой отладки дизайна он будет идеален для портфолио, в котором вы продемонстрируете свою работу и интересы.
От автора: любой хороший сайт должен содержать механизм поиска по содержимому. Поэтому в данном уроке мы с Вами рассмотрим создание поиска на сайте, но мы не будем создавать поисковую систему с нуля, мы воспользуемся готовым решением от компании Google, которая предоставляет нам, разработчикам, пользовательский поиск. Данный поиск обладает высоким быстродействием и качественными результатами выдачи, а, главное, — это релевантный поиск.
От автора: очень часто на страницах сайта необходимо публиковать различный видео контент. А при этом не обойтись без видео плеера. Поэтому в данном уроке мы с Вами научимся работать с очень хорошим и функциональным плеером под названием Flowplayer. Данный плеер обладает огромным количеством различных параметров, и редактирование большинства из них сводится к обычному изменению правил CSS.
От автора: Все мы встречали margin: 0 auto; для выполнения горизонтального центрирования, но margin: auto; отказывался работать для вертикального… до сих пор! На самом деле абсолютное центрирование требует всего лишь объявленной высоты и этих стилей: