Автор блога 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.
Метки: jQuery, Слайдер
24 августа 2009, Написано в Разное
Еще один способ решения проблем полупрозрачных 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, PNG
3 августа 2009, Написано в CSS
Так как 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)
}
Метки: IE6
Тем, кто уже начал экспериментировать с HTML 5 и CSS 3, будет интересно знать, как обстоят дела с поддержкой будущих технологий в современных (и не очень) браузерах. В этом вам может помочь следующий ресурс.
When can I use…
When can I use… даёт возможность сравнить поддержку браузерами различных технологий (HTML 5, CSS 3, CSS 2, SVG, Canvas, PNG и т.д.). Можно выбрать как определённые браузеры, так и определённые технологии. В целом достаточно информативно и удобно.
Метки: Браузеры, Веб технологии
HTML 5
Шпаргалка содержит перечень всех поддерживаемых в настоящее время HTML 5 тегов, их описания, атрибуты, и поддержка в HTML 4.
Скачать
CSS 3
Полный список всех свойств, селекторов и допустимых значений в текущей спецификации CSS 3.
Скачать
Метки: CSS3, HTML5, Шпаргалки
Loading ...
