Автор блога CSSTricks, Chris Coyier, представил на своём блоге, созданный им слайдер контента, который сочетает в себе лучшие свойства подобных аналогов, а так же имеет некоторые новые возможности.

Возможности плагина следующие:

  • В слайде может быть любой контент.
  • Кнопки предыдущего и следующего слайдов.
  • Автоматически создаётся меню со ссылками на каждый слайд.
  • Возможность изменения текста ссылок на предыдущий и следующий слайды.
  • Автоматическая прокрутка слайдов.
  • Каждый слайд имеет якорь, что позволяет ссылаться на него.
  • Возможность использования нескольких экземпляров на одной странице (якоря будут работать на первом).
  • Пауза при наведении курсора мыши.

Демо

Параметры по умолчанию:

easing: "easeInOutExpo",        // Вид анимации. Все виды анимации кроме "linear" и "swing" требуют дополнительный плагин
autoPlay: true,                 // Добавляет функционал автоматической прокрутки
startStopped: false,            // Блокирует автоматическую прокрутку при первой загрузке
delay: 3000,                    // Временной интервал между переходами
animationTime: 600,             // Время анимации
hashTags: true,                 // Добавляет якоря к слайдам
buildNavigation: true,          // Генерация ссылок на каждый слайд
pauseOnHover: true,             // Пауза при наведении
startText: "Старт",             // Текст кнопки «Старт»
stopText: "Стоп",               // Текст кнопки «Стоп»

Подключается плагин также как и большинство других плагинов, поэтому описывать в сотый раз думаю не нужно, достаточно посмотреть приведённый пример. Оформление слайдера находится в файле slider.css. Для увеличения количества слайдов, нужно добавить нужное количество элементов li, в списке, находящемся внутри блока с классом wrapper.

Метки: ,

Еще один способ решения проблем полупрозрачных PNG в IE6 — DD_belatedPNG.

DD_belatedPNG использует VML вместо AlphaImageLoader. Соответственно способ не обладает минусами присущими применению фильтра. Инструмент позволяет использовать свойства background-position и background-repeat, а также псевдо-класс :hover. Ссылки и элементы форм в блоке с полупрозрачным фоном остаются кликабельны.

Демо

Использовать скрипт очень просто:

  • Скачайте javascript файл (сжатая версия — 7Kb).
  • Подключите его к странице.
  • Укажите какие элементы необходимо исправить.
<!--[if IE 6]>
  <script src="DD_belatedPNG.js" type="text/javascript"></script>
  <script type="text/javascript">
    DD_belatedPNG.fix('.png-elem');
  </script>
<![endif]-->

Для fix() требуется указать CSS селектор исправляемого элемента. Если необходимо исправить несколько элементов, нужно указать их через запятую.

На первый взгляд хорошая альтернатива IE PNG Fix, который я использовал раньше.

P.S. На днях ко мне обратился Руслан и предложил взять интервью для своего блога о блогах. Собственно читайте кому интересно. До меня кстати интервью давал Dimox.

Метки: ,

Так как IE6 не поддерживает значение fixed свойства position, обычно для эмуляции данного эффекта используют position:absolute и CSS expression. Однако в результате при скроллинге или изменении размеров окна браузера возникали небольшие подёргивания фиксированного блока.

#fixed{
  position:fixed;
  left:0;
  top:0
}
#fixed{ /* Стили для IE6 */
  position:absolute;
  top:expression(eval(document.documentElement.scrollTop))
}

Видимо IE имеет несколько этапов рендеринга страницы. Сначала браузер заново перестраивает содержимое и уже после обрабатывает CSS выражения, что и приводит к подёргиваниям.

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

В качестве значения background можно использовать about:blank.

html{
  background:url(about:blank)
}

Метки:

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

When can I use…

When can I use…

When can I use… даёт возможность сравнить поддержку браузерами различных технологий (HTML 5, CSS 3, CSS 2, SVG, Canvas, PNG и т.д.). Можно выбрать как определённые браузеры, так и определённые технологии. В целом достаточно информативно и удобно.

Метки: ,

HTML 5

HTML 5 cheat sheet

Шпаргалка содержит перечень всех поддерживаемых в настоящее время HTML 5 тегов, их описания, атрибуты, и поддержка в HTML 4.

Скачать

CSS 3

CSS 3

Полный список всех свойств, селекторов и допустимых значений в текущей спецификации CSS 3.

Скачать

Метки: , ,