Верстка \ HTML&CSS

Анимация от display: block до display: none

От автора: Вы, возможно, уже знаете, что переходы и анимация CSS3 позволяют анимировать специальный набор свойств CSS. Одно из тех свойств, которые нельзя анимировать – display.

Отлично было бы это сделать, но на данный момент это невозможно и, думаю, никогда не станет реальностью (например, как анимировать до “display: table”?). Но есть возможность совершить обходной маневр, и один из них я здесь и опишу.

Продолжить чтение

Верстка \ HTML&CSS

Портфолио-временная шкала

От автора: Timeline – это плагин jQuery, специализирующийся на показе хронологического ряда событий. Вы можете вставлять любые виды средств, включая твиты, видео и карты, и связывать их с датой. После некоторой отладки дизайна он будет идеален для портфолио, в котором вы продемонстрируете свою работу и интересы.

Продолжить чтение

Верстка \ CSS 3

Уменьшаем количество вендорных префиксов

От автора: Для активации определенных свойств в некоторых браузерах большая часть веб-разработчиков сейчас применяют вендорные префиксы в CSS. Это отлично, но иногда я вижу примеры кода и инструменты добавления префиксов, где с излишним энтузиазмом добавляются все возможные из когда-либо употреблявшихся префиксов (а иногда даже те, которые никогда не применялись). Я считаю, что для многих свойств CSS можно безопасно прекратить использование вендорных префиксов или, по крайней мере, значительно сократить их количество.

Продолжить чтение

Верстка \ Адаптивная верстка

Выбор решения для адаптивных изображений

От автора: Если вы кодируете вебсайты, могу побиться об заклад, что по меньшей мере один из ваших клиентов интересовался или заказывал вебсайт с поддержкой сенсорного ввода. Если вы идете стезей адаптивного дизайна (в соответствии с чем ваш вебсайт достаточно гибок, чтобы визуально подстраиваться под ширину экрана от мобильного устройства до десктопа), то вам также понадобится стратегия создания гибких изображений — решение для адаптивных изображений.

Выучить основы довольно просто, но как только вы их усовершенствуете, то обнаружите, что масштабирование изображений – это только начало, вам также придется решать вопросы производительности и загадки художественной постановки. Вы столкнетесь с огромным выбором решений проблемы адаптивных изображений, каждое со своими сильными и слабыми сторонами — и ни одного идеального! Эта статья введет вас в основы, а затем вооружит информацией, нужной для того, чтобы выбрать самое лучшее решение для адаптивных изображений в вашей ситуации.

Продолжить чтение

Верстка \ HTML&CSS

Поиск от google для сайта

От автора: любой хороший сайт должен содержать механизм поиска по содержимому. Поэтому в данном уроке мы с Вами рассмотрим создание поиска на сайте, но мы не будем создавать поисковую систему с нуля, мы воспользуемся готовым решением от компании Google, которая предоставляет нам, разработчикам, пользовательский поиск. Данный поиск обладает высоким быстродействием и качественными результатами выдачи, а, главное, — это релевантный поиск.

Продолжить чтение

Верстка \ HTML&CSS

Установка и настройка плеера Flowplayer

От автора: очень часто на страницах сайта необходимо публиковать различный видео контент. А при этом не обойтись без видео плеера. Поэтому в данном уроке мы с Вами научимся работать с очень хорошим и функциональным плеером под названием Flowplayer. Данный плеер обладает огромным количеством различных параметров, и редактирование большинства из них сводится к обычному изменению правил CSS.

Продолжить чтение

Верстка \ Статьи по верстке

Введение в дизайн сенсорных клавиатур

От автора: Сенсорные устройства по праву хвалят за гораздо большую общую интуитивность, чем у насчитывающих десятки лет от роду компьютерной мыши и клавиатуры. Пользователи напрямую взаимодействуют с сенсорными интерфейсами, что уменьшает разрыв между действием человека и откликом программного обеспечения. Однако набор текста на мобильном устройстве – особенно на смартфоне – весьма неприятный ужастик. Он медленный, мучительный и подверженный ошибкам.

Продолжить чтение

Верстка \ Адаптивная верстка

Адаптивно модифицируем старые сайты

От автора: Можно применять адаптивные методики к старым сайтам в качестве первого этапа получения опыта работы с маленькими экранами. Сдерживайте свой идеализм.

Предупреждаю: этот учебник может оказаться немного спорным. Особенно если вы, как и я, твердо верите в веб-стандарты, семантику и то, что просто следует все делать правильно. Но если вы, кроме того, разделяете тягу к произведению отличного впечатления на пользователей создаваемых вами сайтов, то эти методы окажутся полезными тогда, когда нет возможности начать «с нуля».

Продолжить чтение

Верстка \ HTML&CSS

Абсолютное центрирование по горизонтали и вертикали в CSS

От автора: Все мы встречали margin: 0 auto; для выполнения горизонтального центрирования, но margin: auto; отказывался работать для вертикального… до сих пор! На самом деле абсолютное центрирование требует всего лишь объявленной высоты и этих стилей:

Продолжить чтение

Верстка \ Адаптивная верстка

Адаптивные изображения

От автора: В магазинах продаются пятидюймовые мобильные устройства с тем же разрешением экрана, что у 50-дюймовых телевизоров. У нас есть пользователи с неограниченной высокоскоростной широкополосной сетью, и есть пользователи, оплачивающие каждый переданный мегабайт. Адаптивный дизайн изображений означает оптимизацию процесса их доставки к пользователям. В настоящей статье мы поделимся своей методикой адаптивных изображений — “padding-bottom”, которую мы изучили и применили в мобильной версии шведского новостного вебсайта Aftonbladet.

Продолжить чтение