При создании сайтов на этапе верстки всегда стоит задача выбора того или иного формата для хранения изображений. Изображения можно сохранять в любом формате PNG, JPEG, GIF и десятке других, но какой формат выбрать, чтобы передать лучше качество с минимальным размером получаемого файла изображения?
В HTML5 появилось много новых возможностей и одна из них – это предзагрузка prefetch, которая указывает браузеру, какие страницы, файл стилей или картинку загружать к себе в кэш до того, как их запросит пользователь, чтобы предугадать его действия. Если предугаданные страницы и изображения будут открыты пользователем, то они мгновенно загрузятся из кэша браузера, что для пользователя не будет даже заметно и у пользователя создастся впечатление мгновенной загрузки всех ресурсов.
Поскольку время загрузки страницы является важным фактором работы сайта, указывающем на качество созданного сайта, то в конечном итоге это повлияет и на мнение пользователя о вашем сайте. Если на сайте страницы будут открываться быстро, то это создаст хорошее впечатление о сайте. Но надо проявлять и осторожность, т.к. размещать в кэше браузера все страницы сайта это не правильное решение. Правильно суметь воспользоваться предзагрузкой страниц – это очень мощный инструмент в умелых руках.
В современном веб-строительстве одна из основных возникающих проблем между верстальщиком и дизайнером – это слои в Photoshop с разными режимами смешивания. Браузер умеет выводить в стандартном режиме смешивания “Normal” (применяется, по умолчанию, в CSS – blend-mode: normal). И это является основной проблемой, т.к. чтобы вырезать правильно изображение из макета с наложенными на нее слоями в разных режимах смешивания приходится применять невообразимые уловки, а в отдельных случаях это не представляется возможным. И это уже начинает уходить в прошлое! Режимы смешивания, которые встречаются в Photoshop теперь доступны в CSS через свойства blend-mode и background-blend-mode. Значения этих свойств точно такие же, как любимом графическом редакторе: lighten, multiply, hard-light и так далее.
Вы уже наверняка использовали какие-то свойства, которые изменяют состояния пикселей. К примеру, opacity, но сейчас мы будем говорить только о том, что касается режимов смешивания.
Данная демонстрация контактной формы размещена поверх Google карты, которая является фоном для сайта. Тут не используется скриншот с карт Google и с картой можно работать в интерактивном режиме – можно увеличивать и уменьшать масштаб, перетаскивать ее и даже переключаться между режимами "Карта" и "Спутник".
Вся html-структура представлена двумя слоями – картой и формой. Для обоих слоев используется css свойство z-index, причем форма имеет более высокий z-index, чем карта и таким образом карта располагается в фоне.
На этом сайте есть статья как сделать плавную прокрутку страницы вверх, когда положение полосы прокрутки браузера достигает конца страницы с появлением кнопки “Вверх”.
В этой статье рассмотрим как сделать плавную прокрутку страницы в указанное положение страницы по клику по ссылке, например пункта меню навигации.
Такая прокрутка реализуется в 3 шага:
1. Написание html-разметки кнопки.
2. Добавление css-стилей.
3. Написание javascript кода, который и отвечает за работу плавной прокрутки страницы.
Очень часто при создании сайтов при верстке адаптивных макетов приходится под рукой всегда иметь список быстродоступных правил (т.н. медиа-запросов) для стандартного набора расширений экранов мониторов. Для каждой контрольной точки (breakpoint) можно задать свои css-правила, на основании которых для того или иного разрешения будут применяться индивидуальные стили.
Этот список приведен ниже, пользуйтесь на здоровье!
@media only screen and (max-width : 1920px) { /* CSS правила */ }
@media only screen and (max-width : 1680px) {}
@media only screen and (max-width : 1366px) {}
@media only screen and (max-width : 1280px) {}
@media only screen and (max-width : 1024px) {}
@media only screen and (max-width : 800px) {}
@media only screen and (max-width : 768px) {}
@media only screen and (max-width : 600px) {}
@media only screen and (max-width : 533px) {}
@media only screen and (max-width : 360px) {}
@media only screen and (max-width : 320px) {}
@media only screen and (max-width : 240px) {}
@media only screen and (max-width : 176px) {}
У вас есть свой сайт и вы хотите указать адрес электронной почты на сайте для того, чтобы посетители могли легко связаться с вами и вместе с тем вы хотите, чтобы спам-боты не смогли распознать ваш e-mail на странице и спамер не смогли присылать спам вам на электронную почту.
Спам-боты используют обычные регулярные выражения (regular expession) в своей работе, чтобы распознавать адрес электронной почты на вашем сайте, если адрес опубликован в виде обычного текста, но вы можете обмануть ботов, скрыв ваш адрес электронной почты с помощью простых CSS и JavaScript методов. В этой статье мы их и рассмотрим.
Данный код необходим в том случае, когда нужно зараннее загрузить картинку в браузер пользователя, чтобы в дальнейшем пользователь не ждал загрузки необходимого фона картинки при работе с сайтом.
При вызове скрипта, картинка заранее будет загружена в кеш браузера, следовательно пользователю не придётся ждать. Смысл заключается в том, что на странице размещается отдельный "невидимый" блок-буфер (в нашем случае блок с id preloadedImages) и в него загружаются все необходимые картинки. Пользователь блока не видит, а браузер уже получает все необходимые картинки для дальнейшего использования их на сайте