Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Записи по метке: адаптивный дизайн

Абсолютное центрирование отзывчивого изображения на CSS

Для абсолютного горизонтального и вертикального центрирования элементов на странице предлагаются различные методы, например, на Хабре, ещё в 2013г был представлен перевод отличной статьи с решением от Стефана Шоу, написанной в своё время для Smashing Magazine. Так что, в этом плане, ничего нового не открою, с центрированием элементов всё предельно ясно.Однажды, при разработке очередного лайтбокса, мне понадобилось сделать так чтобы ...

Адаптивное модальное окно строго по центру

Как сделать стопроцентно адаптивное модальное окно на чистом CSS, которое к тому же выводилось строго по центру, и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств? Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, ...

Адаптивные изображения с помощью CSS

В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS. Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами. ...

Google пометит мобильные сайты в поисковой выдаче

Очень часто переходя из мобильной выдачи Google мы попадаем на сайты, которые просто нереально смотреть на маленьких экранах, перекошенный макет, едва читаемый текст, расползающиеся картинки и т.д. Конечно такой расклад не располагает к продолжительному нахождению пользователей на веб-сайте и чаще всего, посетители спешат покинуть такой ресурс. Чтобы хоть как-то упорядочить хаос поисковой выдачи и дать пользователям мобильных устройств какую-то ...

Адаптивные модальные формы входа и регистрации

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

Адаптивный футер страницы приклеенный к низу окна браузера

Небольшой фрагмент кода (сниппет) css, с помощью которого, можно очень просто и надёжно «прибить», прижать (приклеить, sticky) футер страницы к низу окна браузера. Один из многочисленных способов, плох он или хорош, можно узнать только в сравнении и при реальном использовании на действующих или тестовых проектах.    Посмотрите на реализацию данного вида приклеенного футера, протестируйте его работу в различных браузерах на своих ...

Адаптивные html-блоки в виде кирпичной кладки с помощью CSS3

Наверняка все уже успели привыкнуть к такому тренду в веб-дизайне как Masonry (в переводе с анг. это кирпичная кладка), по другому его ещё называют плиточный дизайн, интересный способ вывода контента, позволяющий рационально использовать всё имеющееся пространство сайта. Самым известным примером использования плиточного дизайна, является, наверное, Googl+. Ну, а законодателями и зачинателями сего действа стали "мягкотелые", когда выпустили в ...

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

Адаптивное видео для сайта с помощью CSS Как часто при использовании встроенного видео из различных источников у себя на сайте или блоге, вам приходилось подгонять размер того или иного видеоролика, предварительно изменяя заданные значения ширины и высоты плеера? Думаю, что большинство блогеров именно так и поступают, раз за разом, в ручную прописывают необходимые параметры, для того чтобы встроенное виде не выходило за границы блока, в котором оно расположено. А ведь существует ...

Коллекция качественных премиум-тем WordPress в стиле Grid

Продолжаем знакомится с новинками тем оформления Wordpress. Сегодня предлагаю на рассмотрение большую подборку качественных тем премиум-класса, выполненных в популярном стиле Grid (сетка, плитка). Темы Wordpress с плиточным дизайном являются идеальным выбором для фото-сайтов или портфолио. Вы сможете во всей красе, в очень привлекательной форме продемонстрировать пользователям свои достижения и проектные работы, сделать свои блоги еще более ...

Адаптивный видеоплеер для сайта

Представляю вашему вниманию, легкий jQuery плагин для вставки видео на страницы сайтов с адаптивным дизайном. В последнее время все острее встает вопрос поиска решений для адаптивной верстки различных элементов управления веб-сайтов. Очень часто вставленное в запись видео с какого-нибудь стороннего ресурса (Yotube, Vimeo и т.д.), при просмотре на экранах разных размеров, а у пользователей сейчас этого добра - завались, ломает весь макет ...

15 Адаптивных тем оформления WordPress в стиле Metro

15 Адаптивных тем оформления WordPress в стиле Metro Дизайн сайтов в стиле Metro или, как его еще называют дизайн от Windows 8, стал очень популярным в среде разработчиков и веб-дизайнеров, в первую очередь благодаря простоте и удобству использования. Тот факт, что новая концепция дизайна в стиле «Metro» используется Microsoft практически во всех своих продуктах, включая мобильную ОС Windows Phone 8, панель обновлений Xbox 360 и флагманскую Windows 8, интерфейс сайтов в стиле Metro будет ...
Рейтинг@Mail.ru