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

Для начала приведем пример стандартной таблицы, которая выводит список характеристик товаров для сравнения:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Характеристка 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

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

Решение 1: Flexbox

Используя следующие CSS свойства, мы можем сделать нашу табличку адаптивной:

@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}

Однако, данное решение не является универсальным, т.к. поддержка flexbox составляет около 80% для современных браузеров и более 93%, если учитывать версии браузеров, которые требуют префиксы. Поддержка IE начинается с IE10 (синтаксис 2012 года), в то время как IE11 имеет полную поддержку.

Так как мы заинтересованы в поддержке маленьких экранов, то мы можем игнорировать отсутствие поддержки предыдущих версий IE. На мобильных устройствах, поддержка начинается с Android 4.4 и iOS 7.1. Предыдущие версии требуют префиксы или не поддерживают данную функцию.

Решение 2: доп. разметка + ARIA

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

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 1</td>
    </tr>
    <tr>
      <td>Характеристика 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 2</td>
    </tr>
    <tr>
      <td>Характеристика 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 3</td>
    </tr>
    <tr>
      <td>Характеристика 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 4</td>
    </tr>
    <tr>
      <td>Характеристика 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

CSS в таком случае будет еще проще:

.visible-xs {
  display: none;
}

@media screen and (max-width: 768px) {
  .visible-xs {
    display: table-row;
  }

  td:first-child,
  th:first-child {
    display: none;
  }
}

Выводы

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

А если вам действительно нужна поддержка более старых версий Android и iOS, вы можете использовать второй вариант. В любом случае, теперь, ваши таблицы сравнений будут выглядеть намного лучше, независимо от размера экрана.

Но в последние годы, все основные браузеры мигрировали на платформу WebKit, что упростило разработку кроссбраузерных сайтов, однако компания Microsoft старается выделиться и выпускает Internet Explorer на платформе Trident вплоть до последней, 11-ой версии всеми горячо любимого браузера. Но на этом MS решили не останавливаться, и сделать жизнь разработчиков еще разнообразнее и насыщенней, путем удаления фильтров из IE 10 и 11 версий, что повлекло сложности, в том числе и с обесцвечиванием картинок с помощью CSS, методом наложения Grayscale фильтра.

И поскольку, как уже было написано выше, в Internet Explorer начиная с версии 10 были отключены DX Filters, то необходимо искать другое альтернативное решение. Одним из таких решений является наложение SVG слоя (jsFiddle):

img.grayscale:hover {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
	background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

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

• оригинальное изображение;
• предварительно обесцвеченное изображение;

Таким образом достигается эффект 100% работоспособности в браузерах Internet Explorer без громоздкого кода и костылей. Обращаю внимание на то, что данный метод используется только в случае если пользователь использует IE, а для остальных браузеров будет применено просто CSS правило:

.directions .direction a.open-modal{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: grayscale(1); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
}

Принцип работы скрипта достаточно прост и элегантен (требует подключенную библиотеку jQuery):

1. размещаем несколько блок-ссылок с фоном;
2. загружаем оригиналы и обесцвеченные копии изображений в одну директорию, где у обесцвеченных копий имя файла формируется по принципу «название»-grey, например: original-name-grey.jpg;
3. прописываем соответствующий CSS-код для позиционирования изображения (а также его размеров).

Теперь, если вы откроете страницу с помощью Internet Explorer 10-11, то вы увидите, что добавляется элемент IMG в блок-ссылку, который перекрывает фон родительского элемента, и исчезает (fadeOut) при наведении на блок.

Посмотреть в живую | Скачать демо

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

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

Причина такой проблемы была выявлена на одном из зарубежных форумов, и заключалась в определении ширины видимой области. Интересно, что Bootstrap в своих стилях определяет для Internet Explorer ширину видимой области шириной экрана устройства, т.е. максимально возможной шириной. Таким образом контент располагается от левого до правого края окна, включая область под скроллбаром.

Для устранения данной особенности отображения в браузере Internet Explorer вы можете найти и удалить код из файла bootstrap, или переопределить стиль в своем файле стилей. CSS, отвечающий за видимую область в браузере MS IE выглядит следующим образом:

@-ms-viewport{width:device-width}

Для того чтобы переопределить стиль в своем файле CSS, вы можете использовать следующий код:

@-ms-viewport{width:auto !important}

Таким нехитрым способом мы определим видимую область для Internet Explorer с учетом места под scrollbar и все станет на свои места:

Надеюсь, вам помогла статья и вы уже поставили лайк хотя бы через одну из социальных сетей ;), а если знаете другие варианты решения данной проблемы, то уже пишите в комментарии свой вариант решения. Спасибо.

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

Если раньше для поддержки мобильных устройств владельцам сайтов предлагалось разработать отдельный проект для мобильных устройств, например на поддомене m.example.com, то сегодня все решается благодаря адаптивной верстке, использование которой стало возможно, с внедрением media query (rules) в CSS3.

Данные медиа запросы/правила — это определенный набор стилей, которые написаны специально под мобильное устройство, имеющее определенный размер (разрешение) экрана. Принцип правил следующий: если устройство имеет размер экрана, подходящее под описанные верстальщиком условия, то применяются соответствующие символы.

Казалось бы все предельно просто, и многие верстальщики могли бы справится с задачей, однако, исходя из моего опыта посещения разного типа и вида сайтов, не все понимают до конца суть адаптивной верстки.

Как же все таки проверить сайт на наличие адаптивной верстки? Все проще чем кажется: достаточно просто изменить размер окна бразуера и проверить как сайт себя поведет. Пример адаптивной верстки вы изображен на анимированном рисунке ниже (для просмотра кликните по изображению).

Как вы можете заметить, сайт подстраивается под любой размер экрана, и минимальной шириной, которую обычно поддерживают устройства — 320 пикселей. Однако, как показывает мой опыт, нередко можно встретить сайт, который подстроен под мобильные устройства, однако при изменении размера окна он не адаптируется до тех пор, пока размер окна не станет размером менее чем размер окна мобильного устройства.

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

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

В следующем примере вообще решили избавится от прокрутки (скроллов), в связи с чем абсолютно невозможно будет пользоваться сайтом на устройствах с маленьким разрешением экрана (для просмотра кликните по изображению):

Следующий пример «адаптивности» — сайт вроде адаптивный, но скрол есть, текст вылазит, элементы залазят друг на друга, образуя такую себе кашу (для просмотра кликните по изображению).

Почему нельзя проработать адаптивность для всех размеров? Почему только мобильные, совсем маленькие устройства? (для просмотра кликните по изображению)

Таким образом, можно сказать что понимание адаптивности в наше время все еще разница. Так что проверяйте ваши сайты на адаптивность очень тщательно, ведь поддержка максимального количества устройств — основная задача адаптивного дизайна.

При создании современного сайта каждый разработчик должен это учитывать! Что такое адаптивный дизайн, резиновая верстка, статика и в чем отличие, в чем преимущества адаптивной верстки, и зачем ее делать? Давайте разбираться!

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

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

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

Статический дизайн сайта — это самая простая, с точки зрения разработки версия верстки. Все элементы вне зависимости от разрешения экрана устройства, размера окна браузера будут расположены в одном и том же месте без сдвигов или изменений.

Такой сайт безболезненно откроется на любом устройстве, будет работать корректно, но не все элементы управления (ссылки, кнопки) будут удобны для взаимодействия пользователем. Такой сайт необходимо «зумить» (увеличивать/уменьшать масштаб), скроллить и ловить искомый элемент.

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

Также для более корректного отображения при создании такого сайта разработчик может использовать JavaScript для более точного позиционирования элементов. Данный вид сайтов достаточно интересный, однако сегодня его вытесняет адаптивный дизайн сайтов.

Адаптивный дизайн сайтов — это дизайн, который рассчитан на корректное отображение на всевозможных устройствах, начиная от персональных компьютеров с FullHD разрешением мониторов, заканчивая мобильными устройствами с минимальным разрешением.

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

Некоторые владельцы интернет магазинов создают отдельную мобильную версию сайта, которую размещают на поддомене «m» и создают редирект (переадресацию) для мобильных устройств с основного домена example.com на m.example.com. К сожалению, на данный момент я затрудняюсь ответить в чем преимущество такого решения, но если вы знаете — пишите в комментариях — найдем истину вместе!

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

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

Сегодня, создавая сайт его можно украсить очень красивой анимацией элементов, которые не только будут радовать глаз, но и будут удобными для пользователя — никаких резких движений, появлений, сдвигов. Работая над одним проектом я заметил одну особенность в браузере Сафари: -webkit-transition: all 0.5s ease — не работает!

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

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

Я проверяю все свои проекты на всех текущих версиях браузеров, благо сегодня даже Internet Explorer вроде как собрался и многое поддерживает, хотя качество его работы оставляет желать лучшего, и каково было мое удивление что Safari вообще отказался показывать анимацию.

В поисках нужно информации я перерыл достаточно сайтов, перепробовал несколько костылей, однако обхитрить браузер Apple мне помогло лишь установка параметра -webkit-transition-property, в котором назначил те параметры стилей которые менялись, а именно opacity и margin-top.

Тем не менее, отработка анимации в Safari все-равно оставляет желать лучшего: присутствуют рывки, странно работает исчезновение элемента (каллбек, callback). Возможно вы, уважаемые подписчики что-то еще подскажете, чтобы улучшить отработку анимации на CSS-transition в Safari?

Но в некоторых случаях мы можем исхитриться и все таки добиться эффекта rowspan и colspan. Для этого необходимо добавить несколько дополнительных элементов, или «перевернуть» таблицу, чтобы столбцы стали строками, а строки ячейками столбцов — в таком случае мы реализуем rowspan.

При разработке данной странички я использовал Bootstrap 3 (HTML, CSS и Javascript фреймворк). До сих пор, к сожалению, не понимаю преимуществ данного фреймворка, кроме, пожалуй, симпатичного оформления формочек, сброса стилей и установки общего вида для всех браузеров и платформ. Еще пожалуй можно выделить адаптивность дизайна.

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

Итак, как же создать rowspan в таблице Bootstrap? Разделите вашу таблицу не по строкам, как вы привычно это делаете а по столбцам. Пример, как бы выглядела таблица если бы мы использовали <table>:

<table>
	<tr>
		<td>11</td>
		<td rowspan="6">2x</td>
		<td>31</td>
	</tr>
	<tr>
		<td>21</td>
		<td>32</td>
	</tr>
	<tr>
		<td>31</td>
		<td>33</td>
	</tr>
	<tr>
		<td>41</td>
		<td>34</td>
	</tr>
	<tr>
		<td>51</td>
		<td>35</td>
	</tr>
	<tr>
		<td>61</td>
		<td>36</td>
	</tr>
</table>

Как мы видим таблица разделена по строкам и в каждой строке имеет по 2 эелемента, т.к. в первой строке у нас определен элемент с rowspan=6. Теперь мы, используя блочную верстку и стандартные классы Bootstrap «перевернем» таблицу и будем плясать от столбцов:

<div class="row">
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	11
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	21
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	31
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	41
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		51
  			</div>
  		</div>
   	</div>
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				2x
  			</div>
  		</div>
   	</div>
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				13
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		23
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		33
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				43
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		53
  			</div>
  		</div>
   	</div>
</div>

Как видите, теперь у нас одна строка, и в этой строке три столбца, а в них уже 5 элементов. Элементы остались на своих местах, и появился один высокий блок, который и реализует наш rowspan.

Если у вас есть еще идеи, как можно реализовать такой «костыль» — пишите в комментариях.
Всем удачной верстки.

В последнее время я не часто вас баловал новыми записями, и вот наконец-то интересный пост в моей блоге!
Сегодня я бы хотел ознакомить вас с тестом браузеров. Таких как:

• Google Chrome 24.0.131
• FireFox 12.0
• Internet Explorer 9
• Opera 12.12

Недавно я наткнулся на ресурс проверки браузера на работу с HTML5. Сайт оценивает браузер, и после чего выдает оценку в очках, где максимум — 500 очков. И вот какие результаты мне выдал ресурс.

Первое место занимает естественно Google Chrome с 448 очками:

На второе место номинируется… как вы думаете кто? FF? Opera?

Скажу сразу, что я был слегка удиивлен выдачей, но это была Opera! (Посмотрев на результат я сперва испугался, ну вы понимаете о чем я )

Замыкать тройку лидеров будет естественно FireFox. Он, с количеством в 340 баллов занимает 3 место:

UPD: не учел последних обновлений FF, но места остаются за своими владельцами! Вот выкладываю обновленный скрин

Четвертым к финишу естественно пришел Internet Explorer 9 (8,7) набрав лишь 138 и по 42 очка соответственно.

Собственно все, кто имеет дело с разработкой WEB приложений знают приблизительную оценку браузеров, так что их  моим постом вряд ли удивишь, собственно как и меня результатами ресурса. Я это пишу к тому, что есть еще клиенты, заказывающие разработку сайта и требующие чтобы поддерживался Internet Explorer.

На эту тему можно много спорить и распинаться, но я скажу, что:

• IE пользуются считанные проценты пользователей интернета
• если наблюдается острая необходимость у заказчика совокупить мозг верстальщика, то N$ решат вопрос

Надеюсь что пост пригодится и будет кому-то еще интересен, линк на ресурс прикрепляю.

Удачной верстки!

Сегодня я расскажу как добиться в jQuery-плагине слайдшоу jqFancyTransitions полного эффекта смены жалюзи. Пример

Итак, для этого нам потребуется сама библиотека jQuery, и сам плагин jqFancyTransitions. Все это можно получить по ссылкам:

• jQuery
• jqFancyTransitions

1) Установка плагина:
Установка данного плагина проста:
Подключаем между <head> и </head> наши скрипты:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqFancyTransitions.js"></script>

И указываем наши изображения:

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
</div>

Инициализируем наш плагин следующим кодом, в head после подключения скриптов:

<script>
$(document).ready( function(){
$('#slideshowHolder').jqFancyTransitions({
width: 400, height: 300
});
});
</script>

Подробнее о подключении и настройке

2) Настройка вида анимации «жалюзи»
После того, как мы поставим себе на страничку обычную галерейку, нам нужно теперь сделать вид жалюзи. Как тут.

Для этого мы открываем файл jqFancyTransitions.x.x.js, (где x.x — версия), и ищем строку

<div class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px; border-right:5px solid #fff; height:"+params.height+"px; float: left; position: absolute;'></div>

она у меня под номером 22. И заменяем style на слудующий:

style='width:"+tstripWidth+"px; border-right:5px solid #fff; height:"+params.height+"px; float: left; position: absolute;'

Грубо говоря мы просто добавляем border для наших «кусочков» анимации. Но в целом создает впечатление перелистывания жалюзи.
Надеюсь что я вам помог, удачного кодинга!

Скачать исходники

До этого, в 9 версии ИЕ не поддерживал градиенты каскадных таблиц стилей, что очень разочаровало разработчиков веба.

Вы можете скачать preview платформы здесь и узнать больше о IEBlog здесь .

Несколько новых демо, показывают некоторые из новых функций, включенных в IE10, которые были добавлены к IE Test Drive.