В современном веб-строительстве одна из основных возникающих проблем между верстальщиком и дизайнером –  это слои в 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) и в него загружаются все необходимые картинки. Пользователь блока не видит, а браузер уже получает все необходимые картинки для дальнейшего использования их на сайте

Подробнее

Свойства

attributes Содержит список атрибутов данного узла.
baseName* Возвращает базовое имя элемента, входящее в квалифицированное имя. Квалифицированное имя – <xxx:yyy>, где xxx-имя, задающее область имен, yyy-базовое имя элемента.
childNodes Для узлов, которые могут иметь дочерние элементы, возвращает объект IXMLDOMNodeList, содержащий список дочерних узлов. Если объект не имеет дочерних узлов, то все равно объект IXMLDOMNodeList возвращается, однако его длина равна 0.
dataType* Определяет тип данных для данного узла.
definition* Возвращает описание узла в DTD или схеме.
firstChild Возвращает первый дочерний узел данного узла.
lastChild Возвращает последний дочерний узел от данного узла. Если дочерних узлов нет, возвращает EN-US
namespaceURI* Возвращает строку с URI для области имен. Если область имен задана как xmlns:nnn="uuu", то будет возвращаться "uuu".
nextSibling Содержит следующий узел-брат данного узла в списке дочерних узлов родителя
nodeName Содержит квалифицированное имя элемента, атрибута, ссылки компонента или фиксированной строки для других типов узлов (см. табл.1, колонка Имя узла).
nodeType Определяет числовое значение типа узла XML DOM (см. табл.1, колонка ID узла).
nodeTypedValue* Определяет значение данного узла, выраженное в заданном для него типе данных.
nodeTypeString* Возвращает тип узла в строковой форме.
nodeValue Содержит текст, ассоциируемый с узлом.
ownerDocument Возвращает корень документа, в котором содержится данный узел.
parentNode Содержит родительский узел (для узлов, которые имеют родителей).
parsed* Содержит True, если данный узел и все потомки успешно обработаны анализатором; False в противном случае.
prefix* Возвращает префикс области имен.
previousSibling Содержит первый (левый) элемент брат для данного узла.
specified* Показывает независимые узлы (обычно атрибуты) точно заданные или произведенные из значений по умолчанию в DTD или схеме.
text* Содержит текстовое содержание узла и его поддеревьев.
xml* Содержит XML представление узла и всех его потомков.

 

Подробнее