Неделю назад был опубликован урок о том, как красиво оформить посещенные ссылки с помощью CSS. И на пятом шаге мы использовали символы unicode в качестве элемента ссылки. Собственно как дополнение к этому уроку выкладываю список unicode символов, но не всех подрях, а наиболее интересных и которые могут пригодиться в дальнейшем. Unicode символы, таблица…
Как правило, вы не найдете на большинстве сайтов отдельных стилей для оформления посещенных ссылок, так называемого :visited псевдокласса. По правде сказать, это и не всегда надо. Но если структура сайта достаточно грамоздка, или вы часто используете списки (например, перечень статей), то будет не лишним предусмотреть вывод отдельного стиля для уже посещенных ссылок.
Сегодняшний пост является гостевым, автор статьи - компания Optimism.ru:
Email для связи: info@optimism.ru
———————-
Новейшие исследования интернет-аудитории показывают: более 90% разработчиков популярных интернет-браузеров, а также веб-дизайнеров и рядовых пользователей, часто используют устаревшие версии браузеров и операционных систем, которые не в состоянии предоставить пользователю возможность в полной мере использовать достижения новых технологий.
Например, в Internet Explorer не поддерживается «официальный» XHTML: даже если код написан на этом языке, IE всё равно обрабатывает его тем же синтаксическим анализатором, что и устаревший HTML, лишая самого себя шанса продемонстрировать все преимущества XHTML.
Невероятно, но факт: сегодня Интернет прекрасно обходится и без новых технологий. Сайты исправно обрабатывают информацию, работают поисковые системы и сотни самых разных сервисов.
Что нам даст появление HTML 5 и кода это будет
Проблема не то, чтобы достаточно распространенная. Но когда на нее натыкаешься, сначала приходится поломать голову, поискать в сети.. и можно не найти решения проблемы.
Суть в том, что если у Вас на сайте есть флэш, а рядом/над ним есть выпадающее меню или, например, какой-либо эффект на JavaScript, то flash будете перекрывать его, находиться поверх.
Чтобы сразу не кидаться в крайности и отказываться от флэш, идеи с меню или скрипта, предлагаю решению проблемы. Для flash добавляем следующие параметры
<param name="wmode" value="transparent">
А в embed добавляем
wmode="transparent"
Пример.
1 .Код до решения проблемы
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125"> <param name="movie" value="images/filename.swf" /> <param name="quality" value="high" /> <embed src="images/filename.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"> </embed> </object>
2. Код после решения проблемы
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125"> <param name="movie" value="images/filename.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent"> <embed src="images/filename.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"> </embed> </object>
Больше ничего не потребуется.
Тема поста на сегодня “Все через Alt…”, которой я начинаю серию шпаргалок для повседневнего использования. Конечно, вряд ли вы каждый день ломаете голову как поставить ♪ или ™ и уж тем более ╞. Но по закону подлости, именно когда нам нужно вставить что-то этакое, оно не находится.
Таблица комбинаций значков и символов с Alt
Не скажу, что мне каждый раз приходиться устанавливать вид курсора. Нет, за последние полгода данная техника пригодилась только два раза. Один раз - при работе с jQuery галереей, вторая раз - при работе уже со второй галереей (опять на jQuery), но это было больше для красоты.
Привожу подборку стилей по определению вида курсора. Вдруг кому понадобится.
В первой колонке дан код для css, во второй - вид курсора при данном стиле, в остальных трех - каким браузером поддерживается.
| CSS | Пример | IE6 | Moz | Firefox |
|---|---|---|---|---|
| cursor: auto | · | X | X | X |
| cursor: default | · | X | X | X |
| cursor: hand | · | X | ||
| cursor: pointer | · | X | X | X |
| cursor: crosshair | · | X | X | X |
| cursor: move | · | X | X | X |
| cursor: text | · | X | X | X |
| cursor: vertical-text | · | X | X | |
| cursor: wait | · | X | X | X |
| cursor: progress | · | X | X | |
| cursor: help | · | X | X | X |
| cursor: n-resize | · | X | X | X |
| cursor: s-resize | · | X | X | X |
| cursor: e-resize | · | X | X | X |
| cursor: w-resize | · | X | X | X |
| cursor: ne-resize | · | X | X | X |
| cursor: sw-resize | · | X | X | X |
| cursor: se-resize | · | X | X | X |
| cursor: nw-resize | · | X | X | X |
| cursor: all-scroll | · | X | ||
| cursor: col-resize | · | X | X | |
| cursor: row-resize | · | X | X | |
| cursor: no-drop | · | X | ||
| cursor: not-allowed | · | X | X | |
| cursor: url() | X |
Линки есть на любых сайтах, но не всегда понятно, на что именно они ссылаются. Это может быть экселевский файл, ссылка на скайп, rss, pdf или еще что-то. Согласитесь, что было бы не плохо заранее знать, куда вы попадете или что скачаете.
Идея по сути проста: добавлять соответствующие иконки к каждой ссылке (ну или только к необходимым, это вам решать). НО! Добавлять не вручную каждый раз, а прописать в CSS, и пусть оно само работает.
Как украсить ссылки с помощью иконок и css