Для абсолютного горизонтального и вертикального центрирования элементов на странице предлагаются различные методы, например, на Хабре, ещё в 2013г был представлен перевод отличной статьи с решением от Стефана Шоу, написанной в своё время для Smashing Magazine. Так что, в этом плане, ничего нового не открою, с центрированием элементов всё предельно ясно. Однажды, при разработке очередного лайтбокса,…
Как сделать стопроцентно адаптивное модальное окно на чистом CSS, которое к тому же выводилось строго по центру, и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств? Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных…
В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS. Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.…
Очень часто переходя из мобильной выдачи Google мы попадаем на сайты, которые просто нереально смотреть на маленьких экранах, перекошенный макет, едва читаемый текст, расползающиеся картинки и т.д. Конечно такой расклад не располагает к продолжительному нахождению пользователей на веб-сайте и чаще всего, посетители спешат покинуть такой ресурс. Чтобы хоть как-то упорядочить хаос поисковой выдачи и дать…
Адаптивное модальное окно c функциями форм входа и регистрации, с возможностью динамичного переключения, без перезагрузки страницы. После появления окна, пользователь может легко переключаться из одной формы в другую, и при необходимости, выбрать опцию изменения пароля. Сегодня мы рассмотрим как всё это можно реализовать с помощью связки небольшого, но очень функционального плагина jQuery и новых стандартов…
Небольшой фрагмент кода (сниппет) css, с помощью которого, можно очень просто и надёжно «прибить», прижать (приклеить, sticky) футер страницы к низу окна браузера. Один из многочисленных способов, плох он или хорош, можно узнать только в сравнении и при реальном использовании на действующих или тестовых проектах. Посмотрите на реализацию данного вида приклеенного футера, протестируйте…
Наверняка все уже успели привыкнуть к такому тренду в веб-дизайне как Masonry (в переводе с анг. это кирпичная кладка), по другому его ещё называют плиточный дизайн, интересный способ вывода контента, позволяющий рационально использовать всё имеющееся пространство сайта. Самым известным примером использования плиточного дизайна, является, наверное, Googl+. Ну, а законодателями и зачинателями сего действа стали «мягкотелые»,…
Как часто при использовании встроенного видео из различных источников у себя на сайте или блоге, вам приходилось подгонять размер того или иного видеоролика, предварительно изменяя заданные значения ширины и высоты плеера? Думаю, что большинство блогеров именно так и поступают, раз за разом, в ручную прописывают необходимые параметры, для того чтобы встроенное виде не выходило за…
Продолжаем знакомится с новинками тем оформления WordPress. Сегодня предлагаю на рассмотрение большую подборку качественных тем премиум-класса, выполненных в популярном стиле Grid (сетка, плитка). Темы WordPress с плиточным дизайном являются идеальным выбором для фото-сайтов или портфолио. Вы сможете во всей красе, в очень привлекательной форме продемонстрировать пользователям свои достижения и проектные работы, сделать свои блоги еще…
Представляю вашему вниманию, легкий jQuery плагин для вставки видео на страницы сайтов с адаптивным дизайном. В последнее время все острее встает вопрос поиска решений для адаптивной верстки различных элементов управления веб-сайтов. Очень часто вставленное в запись видео с какого-нибудь стороннего ресурса (Yotube, Vimeo и т.д.), при просмотре на экранах разных размеров, а у пользователей сейчас…
Приобретая данный курс, вы получаете целостный продукт, в котором есть всё необходимое для изучения и работы с WordPress
