Prefetch html5

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

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

 

Подробнее

В современном веб-строительстве одна из основных возникающих проблем между верстальщиком и дизайнером –  это слои в Photoshop с разными режимами смешивания. Браузер умеет выводить в стандартном режиме смешивания “Normal” (применяется, по умолчанию, в CSS – blend-mode: normal). И это является основной проблемой, т.к. чтобы вырезать правильно изображение из макета с наложенными на нее слоями в разных режимах смешивания приходится применять невообразимые уловки, а в отдельных случаях это не представляется возможным. И это уже начинает уходить в прошлое! Режимы смешивания, которые встречаются в Photoshop теперь доступны в CSS через свойства blend-mode и background-blend-mode. Значения этих свойств точно такие же, как любимом графическом редакторе: lighten, multiply, hard-light и так далее.

 

Вы уже наверняка использовали какие-то свойства, которые изменяют состояния пикселей. К примеру, opacity, но сейчас мы будем говорить только о том, что касается режимов смешивания.

 

Пример смешивания слоев в CSS

Подробнее

Данная демонстрация контактной формы размещена поверх Google карты, которая является фоном для сайта. Тут не используется скриншот с карт Google и с картой можно работать в интерактивном режиме – можно увеличивать и уменьшать масштаб, перетаскивать ее и даже переключаться между режимами "Карта" и "Спутник".

 

Фоновая google карта

 

Вся html-структура представлена двумя слоями – картой и формой. Для обоих слоев используется css свойство z-index, причем форма имеет более высокий z-index, чем карта и таким образом карта располагается в фоне.

 

Подробнее

На этом сайте есть статья как сделать плавную прокрутку страницы вверх, когда положение полосы прокрутки браузера достигает конца страницы с появлением кнопки “Вверх”.

В этой статье рассмотрим как сделать плавную прокрутку страницы в указанное положение страницы по клику по ссылке, например пункта меню навигации.

 

Такая прокрутка реализуется в 3 шага:

1. Написание html-разметки кнопки.

2. Добавление css-стилей.

3. Написание javascript кода, который и отвечает за работу плавной прокрутки страницы.

 

Подробнее

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

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

 

adapt

 

Этот список приведен ниже, пользуйтесь на здоровье!

@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)  {}

 

Подробнее

Как скрыть email

Как скрыть emailУ вас есть свой сайт и вы хотите указать адрес электронной почты на сайте для того, чтобы посетители могли легко связаться с вами и вместе с тем вы хотите, чтобы спам-боты не смогли распознать ваш e-mail на странице и спамер не смогли присылать спам вам на электронную почту.

 

Спам-боты используют обычные регулярные выражения (regular expession) в своей работе, чтобы распознавать адрес электронной почты на вашем сайте, если адрес опубликован в виде обычного текста, но вы можете обмануть ботов, скрыв ваш адрес электронной почты с помощью простых CSS и JavaScript методов. В этой статье мы их и рассмотрим.

Подробнее

Данный код необходим в том случае, когда нужно зараннее загрузить картинку в браузер пользователя, чтобы в дальнейшем пользователь не ждал загрузки необходимого фона картинки при работе с сайтом.

 

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

Подробнее