По данным сайта DomainTools.com около 200000 доменов регистрируется каждый день. С появлением огромного числа новых доменов связано появление новых невероятных дизайнов. Так, после обыска сети и галерей CrazyLeafDesign’s CSS, я собрал вместе лучшие дизайны 2008 года.
Очень интересно наблюдать за новыми стилями, которые только-только появились. Похоже web 2.0 сам по себе умирает, в то время как винтажный и художественный стили становятся все более мэйнстримовыми. Если ты хочешь сделать свой сайт, какой стиль выберешь Ты? Надеюсь этот список поможет тебе.

На работе заблокированы любимые сайты? Офисный firewall прикрыл Twitter? Вот пятерка сайтов, которые помогут решить эту проблему и при этом сделать вид, что вы работаете ;)

1) Vanishd – прячем одну веб-страницу за другую

Сделаем так, чтобы сотрудники, босс и друзья думали, что вы работаете. Что если бы мы могли, например, прикрыть любую веб-страницу ложным Word-документом или даже страницей google.com и смотреть через небольшое окно на YouTube или что-нибудь другое? Для этих целей придуман сайт Vanishd.com

Данное руководство создано для тех, кто уже умеет пользоваться Adobe Illustrator, но пока не знает всех тонкостей работы с ним и хочет познакомиться поближе.

Товарищ CurlyBrace уже сверстал представленный здесь макет, спасибо ему!

Для начала посмотрите на то, что мы будем стараться сделать:

Данная статья навеяна недавним топиком frujo о библиотеке typeface.js, позволяющей отображать текст на web-страницах, используя произвольный шрифт, не присутствующий в системе у конечного пользователя.
Естественно, возникло желание сравнить новый метод с уже давно известным — sIFR &hellip

В продолжении поста "Ресурсы по поиску качественных иконок" представляю свою коллекцию сайтов, на которых вы найдёте очень(!) много качественных наборов иконок. Все сайты проверены руками, следовательно открываются и скачиваются легко.

В контексте одного из моих текущих проектов была поставлена задача сделать «мокрый пол». Картинок на пол планировалось класть огромное количество (но всего по паре на страницу, с заменой). В перспективе. В перспективе, кстати, временной и пространственной.

Не найдя ничего стоящего, я взялся написать свой велосипед. И, по-сидев два с лишним вечера, сочинилась небольшая js-библиотека с generic-названием iWet.

UPD: Версия 0.2

• Добавил белую маску. См. Демо.
• Выложил исходик маски в .psd
• Вылечил баг с мельканием картинки при загрузке страницы
• Добавил readme.txt и licence.txt
• Минимальные косметические изменения кода

Будучи пользователем этого антивируса-сканера и регулярно его обновляя обратил внимание, что привычная кнопка «скачать» исчезла и получить антивирус стало несколько сложнее. Закачка началась после прочтения соглашения. Присмотревшись обнаружил, что курилка-то стал бесплатным только для лечения домашнего компьютера! А если Вы хотите полечить
* Ваш офисный компьютер
* Компьютеры Ваших сослуживцев
* Корпоративный сервер
* Если Вы оказываете услуги по лечению компьютеров другим лицам.
то следует его прикупить.
В противном случае

И адрес сайта как-то уже не звучит www.freedrweb.com/cureit

Представьте ситуацию: в макете страницы, которую вам надо сверстать, есть упорядоченный список. Всё бы ничего, да в дизайне стиль текста в списке отличается от стиля цифр, выступающих в роли маркера каждого пункта.

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

Но что, если отличия не только в шрифте? В таком случае, чаще всего, верстальщики забивают на семантику и добавляют в каждый пункт списка элемент с соответствующей цифрой, и уже ему задают необходимые стили. У такого решения есть масса недостатков — это и плевок на семантику, и необходимость реализации со стороны сервера.

Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:

1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.

Помните мою выпадающую панель для входа/регистрации, реализованную с помощью Mootools 1.2? Я подумал, что её можно было бы улучшить как с точки зрения дизайна, так и с точки зрения функциональности, и я это сделал! Но с этого времени уже на jQuery.

Продолжается развитие темы о многоуровневом дереве с маркерами.
Теперь дерево выросло и окрепло, стало взрослее и помнит выбранный узел и состояние кажого узла в отдельности.
Страницу можно перезагружать, а дерево все равно будет помнить все что вы открыли и выбрали!

Свойство clear со значениями left, right, both действительно очищает поток в отличие от overflow со значеним hidden, которое создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён.

Читал про недавно вышедшею библиотеку для работы с SVG — Raphaël (хабратопики habrahabr.ru/blogs/webdev/41647 и habrahabr.ru/blogs/svg/42949). Где было указано, цитирую: «Так что связка Raphaël + jQuery будет давать огромные возможности для разработки».

Однако в библиотеке плагинов на Jquery я недавно нашел готовую разработку для работы с SVG (страница плагина).

Данный плагин не только позволяет строить графику, но и анимировать ее средствами самого плагина.
Примеров работы очень много, так что советую посетить сам сайт плагина.

Автор плагина Keith Wood. На его сайте, есть еще много чего интересного.

Многие программисты оптимизируют JavaScript и CSS-код, чтобы страница грузилась быстрее.
Но не все они делают прелоадеры, которые дают пользователю эффект субъективно более быстрой загрузки.

Существуют моменты когда необходимо предоставить пользователям выбор цвета какой либо вещи. Есть несколько способов выхода из этой ситуации.

Здесь я покажу очень простой и незамысловатый способ быстрой перекраски, на примере iPod Shuffle.

Решился потренироваться в написании jQuery плагинов, и вот предлагаю на суд общественности мой первый плагин…

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

В этой статье приводится пара полезных на взгляд автора рецептов. Возможны вы уже с ними знакомы, а возможно вынесите для себя что-то новое, решать вам.

Когда уже горе-верстальщики научаться использовать этот тег? Повсюду в проекте такие ляпы:

<form ...>
 <input type="checkbox" ..> Поставьте галочку, чтобы стало зае...сь <br>
 ...
</form>


Видя такое, пользователь сначала кликает на надпись, обламывается, кликает на сам чекбокс.
Разве нелья было сразу сделать так?

<form ...>
 <label><input type="checkbox" ..> Поставьте галочку, чтобы стало зае...сь</label><br>
 ...
</form>


Некоторые даже вешают обработчик события OnClick на кусок текста, лишь бы не использовать label… :(

Отменнейшая JS библиотека, базированная на jQuery. Позволяет простым наведением мыши на объект увидеть все event'ы, которые на него повешены. Запускается через букмарклет.

Подробности на странице автора.

http://www.sprymedia.co.uk/article/Visual+Event

P.S. Я хотел разместить пост-ссылку, но хабру, видимо, не нравится плюс в URL…

Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset.

Зачем это нужно?

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом. Именно исходя из этого, если вы установите базовое значение стилей для элемента a, то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.