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

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

Вы находитесь на блоге "ArtShok. Красивое сайтостроение".
Блог в большей степени посвящен примерам и урокам по CSS, jQuery, AJAX и немного внимания будет уделено продвижению (SEO). Иначе говоря, всему тому, что поможет сделать Ваш сайт более красивым и совершенным.

Машина твоей мечты вместе с Sape!


07.08

2009

9 полезных FireFox дополнений для вебмастеров

Большинство вебмастеров давно уже отказались от IE в пользу Mozilla FireFox. И дело даже не в том, что продукция мелко-мягких постоянно глючит, сколько в том, что Лиса очень хорошо настраивается и помогает оптимизировать работу. Но суть этого поста не хаять InternetExplorer (хотя 6 версия, думаю, уже порядком всех достала), а предоставить список из 9 FireFox плаггинов, которые ощутимо облегчат вам работу с ежедневными и местами рутинными процессами, благо скачать и установить их можно бесплатно :)

1. Firebug. Самое популярное дополнение. Легко интегрируется в браузер, позволяет вживую редактировать, отлаживать и изучать CSS, HTML и Javascript на любой странице.

Firebug. 9 полезных FireFox дополнений для вебмастеров

Остальные 8 плаггинов для FireFox…

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

05.28

2009

Unicode символы

Неделю назад был опубликован урок о том, как красиво оформить посещенные ссылки с помощью CSS. И на пятом шаге мы использовали символы unicode в качестве элемента ссылки. Собственно как дополнение к этому уроку выкладываю список unicode символов, но не всех подрях, а наиболее интересных и которые могут пригодиться в дальнейшем. Unicode символы, таблица…

5 способов красивого оформления посещенных ссылок с помощью CSS

Как правило, вы не найдете на большинстве сайтов отдельных стилей для оформления посещенных ссылок, так называемого :visited псевдокласса. По правде сказать, это и не всегда надо. Но если структура сайта достаточно грамоздка, или вы часто используете списки (например, перечень статей), то будет не лишним предусмотреть вывод отдельного стиля для уже посещенных ссылок.

Demo и Скачать

5 способов оформления ссылок…

jQuery пример: красивая смена текста за 10 минут

jQuery определенно набирает обороты и думаю, что уже скоро мы сможем в большей степени отказаться от столь некогда популярного флэша (ну хотя бы в таких примитивных вещах, как динамическое меню, смена картинок или текста).

Ничего сложного в данном уроке нет и займет он в среднем минут 10 (при чем у меня большая часть времени ушла на подготовку фона для примера - пришлось выверять с картой где какие города находят). Чтобы понять о чем речь - смотрим пример.

Демо | Скачать
3 шага для анимации текста »

10.30

2008

Меню в виде книжного оглавления на CSS

Думаю все уже выучили, что семантически правильно представлять меню на сайте в виде списка. Собственно поэтому мы и продолжаем дальше практиковаться в его оформления (первая статья на эту тему была про древовидный список).

Меню на подобие книжного оглавления удобно, если вам требуется разнести по разным сторонам название раздела и, например, количество подразделов (на сайтах недвижимости эту может быть тип недвижимости и число объектов, в блогах - название раздела и количество тем в нем).

Меню на CSS, реализация меню в виже списка на css

Как сделать красивое меню на CSS

10.22

2008

Меню на CSS+jQuery (гаражные двери)

Меню на css и jQuery

Не скажу что самый интересный и полезный пример, но при умелом обращении и тематичном дизайне будет как раз “в тему”. Каждый из пунктов меню как бы закрыт гаражной дверью, а при наведении курсора открывается.

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

Как создать красивое меню на jQuery и CSS

10.09

2008

Как установить вид курсора?

Не скажу, что мне каждый раз приходиться устанавливать вид курсора. Нет, за последние полгода данная техника пригодилась только два раза. Один раз - при работе с 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