Текст виджета вкладки CSS

Question

Я видел «вкладку обратной связи» на this page и многие другие (например, UserVoice). Я хотел бы использовать что-то подобное на своем веб-сайте, но в моем случае вкладка не будет доступна. Единственная цель вкладки - постоянно сохранять название веб-сайта на экране ненавязчиво.

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

Update

Я знаю, что нужно использовать фиксированное позиционирование, но часть я борюсь с, как изменить ориентацию текста. В идеале я хотел бы указать текст в HTML, а не использовать изображение.

Я попытался перепроектировать, как виджет был создан на странице выше, я обнаружил, что если вы выключите свойство

background-image:url(http://getsatisfaction.com/images/feedback_trans_tab.png); 

текст исчезает. Я предположил, что текст «Обратная связь» является частью изображения feedback_trans_tab.png, но это не так! Может ли кто-нибудь объяснить, как генерируется и ориентируется текст «Обратная связь»?

Спасибо, Дон

Answer 1

Это очень просто. Во-первых, просто создайте <div> с вашим изображением, текстом и т. Д. Убедитесь, что вы определяете идентификатор атрибута для DIV:

<div id="my_div">The Text</div> 

Затем, чтобы держать его на месте, вот CSS вы можете использовать:

#my_div { 
    position: fixed; 
    top: 50px; 
    right: 0px; 
} 

Это поставило бы ваш DIV на правшей размер страницы на странице около 50 пикселей вниз.

Answer 2

CSS3 поддерживает вращающийся текст, используя writing-mode свойство:

writing-mode:tb-rl; 

More here

IE также предлагает несколько фильтров, чтобы сделать то же предварительно CSS3.