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

Уроки и примеры по CSS, jQuery. Советы по монетизации и продвижению сайтов

Rotaban.ru - биржа банерной рекламы

← Предыдущие записи
Следующие записи →

10.08

2008

Автор: ArtShok Tags: , , ,
Комментариев нет

Иконизируем ссылки

Линки есть на любых сайтах, но не всегда понятно, на что именно они ссылаются. Это может быть экселевский файл, ссылка на скайп, rss, pdf или еще что-то. Согласитесь, что было бы не плохо заранее знать, куда вы попадете или что скачаете.

Как украсить ссылки с помощью иконок

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

09.30

2008

Автор: ArtShok Tags: , ,
2 комментария

Градиентный текст с помощью CSS (без флэш и javascript)

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

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

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

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

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

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

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

09.26

2008

Автор: ArtShok Tags: ,
6 комментариев

70 советов по улучшения 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 кода »

09.25

2008

Автор: ArtShok Tags: , , ,
6 комментариев

Украшаем формы с помощью CSS и jQuery - часть 1

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

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

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

09.21

2008

Автор: ArtShok Tags: , ,
Комментариев нет

Как изменить цвет фона выделенного текста?

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

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

Как изменить цвет фона выделенного текста с помощью CSS

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

09.17

2008

Автор: ArtShok Tags: , ,
4 комментария

10 интересных примеров по CSS

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

09.09

2008

Автор: ArtShok Tags: , ,
Один комментарий

Как оптимизировать CSS

Одна из самых полезных особенностей CSS2 - способность использовать стенографию («скоропись»). В результате чего мы получаем красивый, не перегруженный код, который пишется легко и быстро.

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

Давайте еще раз пробежимся по списку, может быть, откроете для себя еще что-то интересное:

  1. Отбивка (Margin & Padding)
  2. Шрифты (Font)
  3. Фон (Background)
  4. Границы (Border)
  5. Списки (List)
  6. Контуры (Outline)

Подробно о каждом способе оптимизации CSS

← Предыдущие записи
Следующие записи →