ArtShok. Сайтостроение и немного SEO

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

Как видите, текст ссылки на демо тоже украшен градиентом. И самое важно, из того что уже было сказано - это “текст“. Так что закрываем фотошоп, если вы его уже запустили - ничего рисовать не будем. Знание 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