css

Box-Sizing: секрет простых лейаутов

Box-sizing – это свойство CSS, которое делает верстку макетов сайта более понятным. Если вы работали с CSS, то вы знаете, что использование свойств width, padding и border ведет к путанице. Иногда, когда используется свойство width, оно не может быть всегда применено к тому, что вы ожидаете – например ширина width задается в процентах, а граница border указывается в пикселях. Тем не менее, используя свойство box-sizing, ширина блока в 200px будет действительно отображать блок шириной 200px.

 

Это никак не связано с JavaScript и это также работает в Internet Explorer, начиная с 8й версии.

 

 

Подробнее

Новые единицы измерения для отзывчивого дизайна

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

 

css3 viewport units

 

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

 

Подробнее

Режимы наложения слоев в Web с помощью CSS

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

 

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

 

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

Подробнее

Список популярных медиазапросов

Очень часто при создании сайтов при верстке адаптивных макетов приходится под рукой всегда иметь список быстродоступных правил (т.н. медиа-запросов) для стандартного набора расширений экранов мониторов. Для каждой контрольной точки (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)  {}

 

Подробнее

Как скрыть E-mail на сайте

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

 

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

Подробнее

Предварительная загрузка картинок из CSS

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

 

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

Подробнее

Иконка загрузки к большим изображениям на CSS

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

Подробнее

vertical-align:middle в IE7

Для нормальных браузеров помещаем текст/картинку в контейнер, для контейнера задаём:

display:table-cell;
vertical-align:middle;

для ie7 контейнеру задаем display:block
 

А для самого элемента, который нужно выровнять:

display:block;
margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) + 'px');

Подробнее