- Понятие потока
В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком»… - Кросс-браузерный @font-face
Статья о свойстве CSS @font-face, с помощью которого легче и удобнее всего использовать произвольный шрифт на сайте. - Веб в кривых. Второе рождение SVG
Видео-запись доклада «Веб в кривых. Второе рождение SVG», прозвучавшего в Самаре на 404 фестивале - Какой расклад?
Статья о самых распространенных вопросах, сомнениях и критике по поводу необходимости создания и внедрения новых механизмов раскладки.
CSS табы
Обнаружил в интернете очень простой способ создания табов без использования JS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="tabs"> <li><a href="#one">1</a></li> <li><a href="#two">2</a></li> <li><a href="#three">3</a></li> <li><a href="#four">4</a></li> <li><a href="#five">5</a></li> </ul> <div class="tabs-content"> <ul> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> <li id="four">4</li> <li id="five">5</li> </ul> </div> |
Разметка простая. Список .tabs используется для навигации. Далее идет контейнер .tabs-content со списком, в котором каждый элемент li это отдельный слайд.
1 2 3 4 5 6 7 8 9 | .tabs-content { width:960px; height:300px; overflow:hidden; } .tabs-content li { width:960px; height:300px; } |
Ссылки в навигации указывают на соответствующие id слайдов. Слайдам установлена ширина и высота равные внешнему контейнеру.
Работает в Firefox, Opera (для старых версий нужно немного дополнить CSS), Safari, IE6+.
Делаем горизонтальный скроллбар
После публикации статьи «Делаем вертикальный скроллбар» многие спрашивали по поводу аналогичного, но горизонтального варианта. В этой статье рассмотрим пример создания простой горизонтальной полосы прокрутки.
Для создания будет использоваться jQuery плагин jScrollHorizontalPane.
Контент, который будет скроллиться, нужно обернуть в блок. В данном случае #scroll-box.
1 2 3 | <div id="scroll-box"> <!-- Контент --> </div> |
Подключаем CSS файл плагина jScrollHorizontalPane.css, и пишем следующие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #scroll-box{ width:300px; height:150px; overflow:hidden; float:left; } #scroll-box p{ width:1000px; } a.jScrollArrowLeft{ height:20px; } a.jScrollArrowRight{ height:20px; } |
У контента ширина должна быть больше, чем у внешнего блока.
Подключаем скрипты:
1 2 3 | <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="js/jScrollHorizontalPane.min.js"></script> |
1 2 3 4 5 6 7 8 | $(function(){ $('#scroll-box').jScrollHorizontalPane({ showArrows:true, arrowSize:20, scrollbarHeight:20, scrollbarMargin:0 }); }); |
Здесь используются следующие параметры:
showArrows— отвечает за отображение кнопок «Назад» «Вперёд» на полосе прокруткиarrowSize— ширина этих кнопок вpx(если не указана здесь, должна быть установлена в CSS)scrollbarHeight— высота полосы прокрутки вpxscrollbarMargin— отступ справа от полосы прокрутки