Линки есть на любых сайтах, но не всегда понятно, на что именно они ссылаются. Это может быть экселевский файл, ссылка на скайп, rss, pdf или еще что-то. Согласитесь, что было бы не плохо заранее знать, куда вы попадете или что скачаете (и чтобы при этом постоянно не смотреть в статусную строку, дабы распознать расширение, на которое оканчивается ссылка). Кстати, текстовая информация усваивается людьми только на 10%, в то время как графическая - на 65%. Из чего следует, что графика распознается легче. Делаем выводы

Идея по сути проста: добавлять соответствующие иконки к каждой ссылке (ну или только к необходимым, это вам решать). НО! Добавлять не вручную каждый раз, а прописать в CSS, и пусть оно само работает.
Как украсить ссылки с помощью иконок и css

Ошибка 404 означает, что браузер не может найти на сервере запрашиваемый файл или страницу.

Наиболее распространенные причины пребывания посетителей на странице 404:

• Неправильно набран адрес (URL)
• Ссылка в поисковиках устарела
• На вас ранее ссылались, но потом файл на сервере был переименован или перенесен в другое место, а ссылка осталась прежней
• После обновления вы не до конца проверили сайт на наличие “битых” ссылок

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

Очень часто на порталах техподдержки, бизнес-консультирования и прочего онлайн-саппорта, можно видеть ссылки на ICQ или Skype для живого общения с консультантом.

Недавно и мне понадобилось проставить такие ссылки в одном из проектов. Чтобы решить, казалось бы, такую простую задачу, пришлось поискать ответы в google и отсортировать кучу ненужной информации. Найти сразу все ответы в одном месте не получилось, поэтому восполню этот информационный пробел в своём блоге.
Как поставить ссылку на скайп и аську

Ну что? Уже успели оценить ссылочки в виде текста с градиентом?:) Еще нет? Видимо, вы читаете данную статью через ридер. Если так, то предлагаю сначала ознакомиться с примером.

Как видите, текст ссылки на демо тоже украшен градиентом. И самое важно, из того что уже было сказано - это “текст“. Так что закрываем фотошоп, если вы его уже запустили - ничего рисовать не будем. Знание flash и JavaScript тоже не понадобится.

Потребуется только пустой тэг <span> и фоновая картинка (в нашем случае - прозрачный png).

Что нам это дает:

• Чистый код и использование ТОЛЬКО CSS. Повторюсь - никаких JavaScript или flash
• Красивое оформление заголовков СТАНДАРТНЫМИ шрифтами. Никаких рисунков (не забываем про семантическую верстку и seo-оптимизацию), никаких работ в фотошопе или других графических редакторах. Один раз прописали стиль и забыли.

Демо | Скачать

А теперь о том, как сделать градиентный текст на css

1.1 Кодинг: Начинаем

• Когда дизайн готов, начните с пустой страницы. Добавьте заголовки, навигацию, пример содержимого, и футер, потом добавьте html разметку и только после этого CSS.
• Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и поля всех элементов в самом начале файла стилей.
• Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию.

master.css


@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");


<style type="text/css" media="Screen">
/*\*/ @import url("css/master.css"); /**/
</style>


• Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (<p class="floatLeft alignLeft width75">...</p>)


.width100 {width: 100%;}
.width75 {width: 75%;}
.width50 {width: 50%;}
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}

остальные советы по улучшению CSS кода »

Вчера мы изучали, как с помощью CSS и JQuery из простых форм сделать что-то красивое. Если пока не нашли применения, держите пример реализации меню в виде списка (но не методами CSS и тэгов <li>…</li> - как было бы желательно для seo-оптимизации, а с помощью form).

Демо | Скачать

Такая реализация удобна в том случае, если у вас на сайте мало места. Подобные списки можно увидеть в “подвалах”, когда хотят продублировать слишком большое меню. Голь на выдумки хитра, как говорится:)
Как реализовать меню с помощью списка

Сегодня урок будет коротким, но полезным:) Почему полезным? Ну хотя бы потому, что мало кто уделяет достаточно внимания оформлению форм. И, кстати, зря.

Все большое состоит из маленького, и, дорабатывая именно это маленькое, мы в итоге получаем “конфетку”. Так что рекомендую не брезговать оформление чекбоксов, полей, выпадающих списков и прочих элементов. Времени потратите не много, а результат будет ощутимым.

Как изменить дизайн форм, используя css и jQuery

Сейчас RSS не транслируется разве только у ленивых или тех, кто не знает про это чудо-технологию ничего (в таком случае рекомендую ознакомиться). Регистрация ленты в rss-агрегаторах (каталогах) не только позволяет увеличить число ваших rss-подписчиков, но и помогает ускорить индексацию сайта » улучшает видимость в поисковиках. К тому же каталоги ставят ссылки на ваш сайтик, а ссылки-то порой увесистые

Ну что? Осознали всю пользу?:) Тогда держите мою подборку rss-агрегаторов (53 русских rss каталога и 134 буржуйских).

Редакция от 31 марта 2009: добавлено еще 14 сайтов, итого: 124 RSS каталога
Редакция от 11 апреля 2009: добавлено еще 63 сайта, итого: 187 RSS каталогов
Редакция от 10 июня 2009: добавлено еще 15 сайтов и удалено 73, итого: 129 RSS каталога
Редакция от 14 июня 2009: добавлен еще 1 сайт, итого: 130 RSS каталогов
Редакция от 9 июля 2009: добавлено еще 3 сайта, итого: 133 RSS каталога

Список сайтов, куда можно добавить RSS

Для того, чтобы поменять фоновый цвет при выделении текста со стандартного на желаемый, будем использовать псевдо-элемент ::selection (с псевдо-классом :last-child мы уже сталкивались ранее, когда создавали древовидный список).

К сожалению, ::selection используется только в CSS3 и поддерживается далеко не всеми браузерами, на данный момент - FireFox, Safari и Opera 9.5

Плюс этого приема в том, что можно логически выделять на страницах нужные блоки. Вот есть у вас сайт с автомобильной тематикой, продвигаете вы внутреннюю страницу (или даже рекламируете ее с помощью контекста), чтобы компенсировать потраченные деньги, нужно, чтобы посетители конвертировались в покупателей. Для этого мы берем какой-то логически законченный блок текста, пусть он будет о плюсах покупки автомобилей в Мурманске. Чтобы привлечь к нему внимание, надо его аккуратно выделить и стилизовать. Вот в этом случае на и поможет фоновая заливка. дело в том, что люди при чтении текста имеют привычку выделять текст по мере чтения. Просто так удобней воспринимать. А вот теперь представьте, что помимо просто фоновой заливки, клиенты заметят при выделении не стандартный синий с белым, а фон, стилизованное под общую цветовую гамму сайта.

Собственно как можно изменить фон выделенного текста

1. Как сделать, чтобы текст ссылки был одного цвета, а подчеркивание другого?


<html>
<head>
<style type="text/css">
a {color:red;}
a span {color: blue;}
</style>
</head>
<body>
<a href="#"><span>Текст ссылки</span></a>
</body>
</html>


Еще 9 примеров по CSS