Полупрозрачность и PNG 8

30 01/09
5

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

Теги:

Ссылки при печати

02 12/08
22

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

Однако кроме скрытия лишних элементов, можно добавить кое-что полезное. Например, Kilian Valkhof предложил интересное решение, касающееся ссылок. После печати ссылки теряют свою функциональность, однако возможно у пользователя возникнет необходимость, перейти по ссылке, опубликованной в тексте. Следующий CSS код обеспечивает вставку после каждой ссылки значения её атрибута href.

1
2
3
4
5

a:after {
  content:" (" attr(href) ") ";
  font-size:90%;
  font-weight:bold
}

Результат выглядит следующим образом:

Юзабилити стилей для печати

К сожалению это не сработает в Internet Explorer 6 и 7, т.к. эти браузеры не поддерживают псевдо-элемент :after. В 8-й версии поддержка присутствует.

Теги:

jQuery: слайдшоу с помощью Cycle Plugin

21 11/08
13

Сегодня поговорим о том, как, используя библиотеку jQuery и плагин Cycle Plugin, создать небольшое слайдшоу из обычного содержимого страницы. Это могут быть новости, изображения, различные виджеты и т.п. Это значительно экономит место на странице и может пригодится в определённых случаях. (далее…)

Теги: •

Выравнивание изображений с помощью vertical-align

13 10/08
17

Начинающие разработчики часто задаются вопросом: Как вертикально выравнивать изображения в тексте?
Давайте начнём с небольшого примера. Строка с текстом и небольшим изображением в виде квадрата.

Выравнивание изображение с помощью vertical-align

Теперь давайте взглянем на 6 основных линий относительно которых выполняется вертикальное выравнивание. На изображениях эти линии выделены красным цветом. (далее…)

Теги:

Делаем вертикальный «скроллбар»

03 10/08
118

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

Бывают ситуации когда необходимо иметь полный контроль на внешним видом скроллбара. Например если дизайнер сделал элемент со специфической полосой прокрутки.
Для решения этой проблемы нам на помощь приходит Javascript со своими возможностями. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.

HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.

1
2
3
4
5
6
7

<body>
    <div class="scroll-wrap">
        <div class="scroll-pane">
            ....
        </div>
    </div>
</body>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

.scroll-wrap{
    width: 300px;
    margin: 40px auto;
    background: #F7F1E5
}
.scroll-pane{
    width: 290px;
    height: 200px;
    padding: 0 0 0 10px;
    overflow: hidden
}
a.jScrollArrowUp{
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    background:url(images/but.gif) no-repeat center top;
    height:18px;
}
a.jScrollArrowDown {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    background:url(images/but.gif) no-repeat center top;
    height:18px;
}
.jScrollPaneDrag {
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    background:url(images/drag.gif) no-repeat left top;
    height:42px
}

Далее необходимо подключить следующие файлы в секцию head:

1
2
3
4

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" />

Файл jquery.mousewheel.min.js необходим в том случае, если необходимо прокручивание содержимого колесом мыши.

и небольшой javascript:

1
2
3
4

$(function()
{
$('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43});
});

Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.

Удобство и доступность

Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в новом дизайне, элемент, которым они привыкли пользоваться. Вы должны быть уверены, что новый вид ассоциируется именно с полосой прокрутки. Якоб Нильсен написал неплохую статью «Scrolling and Scrollbars», в которой описал, что можно, а что нельзя делать, когда дело касается настройки скроллбара. Учитывайте это когда будете применять данный способ.

Оригинал: Styling Scrollable Areas

UPD: Пример горизонтальной полосы прокрутки.

Теги: • • •