Адаптивное Retina-меню на CSS

В этом уроке мы создадим красочное Retina-меню, с использованием цветовой схемы от Maliwan, производителя игры Borderlands. Меню автоматически меняется на одну из трех различных раскладок, в зависимости от размера окна браузера. Для создания retina-меню, мы будем использовать иконочный шрифт.

Адаптивное меню для сайта на CSS3

В этом уроке мы создадим с вами адаптивное меню для сайта, используя только CSS3. Как вы знаете, многие люди заходят в интернет с мобильных устройств (таких как iPad, iPhone или Android) и важно чтобы эти пользователи, могли с комфортом посещать ваш сайт. Многие разработчики, создают адаптивного меню для сайта с использованием jQuery или JavaScript, но мы будем использовать только CSS.

Адаптивный дизайн E-mail рассылки: Увеличение мобильной аудитории

В последнее время мы довольно много говорили о концепции Адаптивного веб-дизайна. В ближайшее время мы также опубликуем статью об адаптивной типографии. Но до тех пор давайте сосредоточимся на рассылке электронных писем. Мы можем превратить её в адаптивный макет, чтобы она корректно выглядела как на экране монитора, так и на экране мобильного устройства.

Адаптивный макет для сайта на HTML и CSS

Вы наверняка замечали, что иногда бывает довольно трудно регулировать ширину сайта, чтобы он нормально отображался на всех устройствах (от небольшого разрешения мобильных устройств, до персональных компьютеров с высоким разрешением). Я думаю что многие сталкивались с этой проблемой. Для решения данной проблемы, поможет свойство - fluid (или liquid). Я подготовил несколько адаптивных макетов, все эти макеты имеют несколько столбцов с некоторым содержанием. И в качестве небольшого бонуса - вы сможете переключаться между раскладками на лету (без перезагрузки страницы) с использованием CSS3.

Как создать адаптивную форму на Flexbox

В этом уроке я покажу вам как создать адаптивную форму при помощи Flexbox. Что самое интересное, Flexbox позволяет разрабатывать нашу форму без использования каких-либо медиа-запросов.

Таблица сравнения товаров на jQuery

Если вы разрабатываете интернет-магазин с большим количеством товаров, скорее всего вас просили добавить такую функцию: сравнительную таблицу. Стандартный подход, который работает в большинстве случаев - использование простого HTML элемента table. Но когда вам необходимо сравнить от 6 товаров и больше, это становится проблематично, особенно если вы хотите сделать таблицу адаптивной.

Фотографии как в фотокабинке с интеграцией jQuery Lightbox 2

Сегодня я покажу создание симпатичных фото полосы как фото-кабинке и интегрировать их с jQuery Lightbox 2, один из самых популярных и широко используемых плагинов лайтбокса. Создадим несколько таких полосок с фотографиями и добавим к ним навигацию, прокручивая её колесом мыши. При щелчке по изображению мы покажем увеличенную версию фотографии, используя jQuery Lightbox 2. Мы также произведем оптимизацию под мобильные устройства.

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.