Скоро третье декабря. Всемирный день компьютерной графики. К сожалению, пока еще не официальный.

3December уже несколько лет справляют во многих странах мира. Надеюсь и в Ташкенте что-нибудь придумаем. В Москве, в этом году устраивают крупный эвент, с такими спонсорами как Adobe и nVidia. Компания Autodesk каждый год во всем мире устраивает незабываемые эвенты с презентациями и мастер-классами.

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

На моем любимом, прекрасном, красивом, удобном, лучшем сервисе Preloaders.net сегодня было зафиксировано (внимание) один миллион (1.000.000) скачиваний прелоадеров. Поздравляю себя и Тимура Гаффорова со столь знаминательным событием. Шампанское, салют, гуляния.

P.S. Google PR уже 5, а вот Яндекс тормозит — ТИц 20.

Я всегда мечтал, чтобы при помощи CSS можно было применить несколько фоновых рисунков к одному элементу, чтобы можно было обрезать фоновые рисунки. Мне надоело высчитывать у элементов padding, border, margin, чтобы потом присвоить width и height.

В CSS3 наступит почти рай для верстальщиков. Можно будет наконец сделать идеальную верстку.

Самое полезное в CSS3

Начну с нескольких фоновых рисунков в одном элементе, так как для меня это самое полезное добавление.

На самом деле все максимально просто, нужно всего лишь прописывать url и его параметры через запятую.
Пример: background: url (‘bg1.jpg’) top left no-repeat scroll, url (‘bg2.jpg’) 100px 20% repeat-x scroll, url (‘bg3.jpg’) bottom right repeat-y scroll;

Сайты с большим количеством графики, иконок и т.д. обычно делаются «спрайтами», то есть вся графика в одном файле. Сейчас все поместить в один файл не получается, потому, что файл придется делать огромных размеров (если страница «резиновая»). Но в CSS3 решили эту проблему, придумав параметр image-rect, при помощи которого можно обрезать фоновую картинку убирая лишнее. В данный момент этот параметр работает только в последних версиях Mozilla Firefox и пишется -moz-image-rect.
Пример: background-image: -moz-image-rect (url (‘bg.jpg’), 20, 30, 15, 40);

Следующее супер-мега нововведение — параметр box-sizing. В CSS 2.1 padding и border добавляют элементу ширину и высоту. К примеру, если к диву применить width: 10px; border: 10px; padding: 10px, то в иторе этот див будет 50 пикселей в ширину. Если же применить к элементу box-sizing: border-box, то все бордеры и паддинги окажутся внутри элемента, естественно это отразится на содержании элемента.

В CSS3 к селекторам можно будет применять особые атрибуты. Нужны они для того, чтобы применять стили к элементам с определенными атрибутами и значениями. Существует три варианта записи: [атрибут^=значение], [атрибут$=значение], [атрибут*=значение]. Первый применяет стили если к элементам потомкам, которым присвоен указанный атрибут и его значение начинается с указанного, второй если заканчивается и третий если содержит.
Пример: ul.filelist a[href$=”mp3”] { background: url (‘mp3.png’);}

Еще несколько полезностей

word-wrap: break-word позволяет разбивать слово для переноса его на следующую строку. Еще бы ставил знак переноса, так ему бы цены не было.

Сейчас многие сайты пишут заголовки не стандартными шрифтами, вставляя их при помощи Adobe Flash. Теперь вместо flash можно воспользоваться @font-face.
Пример: В CSS файле прописываем нужный шрифт @font-face { font-family: Helvetica; src: url(Helvetica.ttf'); }. Ну, а дальше можно спокойно указывать Helvetica в font-family.

Думаю про border-radius, border-image, text-shadow, box-shadow, opacity все уже слышали и использовали.

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

Повторяю свой пост из старого блога про прекраснейший сервис для генерации индикаторов загрузки ajax.

Ситуация с Preloaders.net сейчас такова — с сайта ежедневно скачивают минимум 2000 прелоадеров, новые прелоадеры появляются каждую неделю, количество ссылок на сервис всегда растет, а с ним и популярность. Две светлые головы продолжают думать над улучшениями, по ходу добавляя их.

Вставил бы в пост пару прелоадеров с сайта, но не хочу чтобы у меня на сайте, что-то шевелилось. Лучше сходите и сами посмотрите.

Решил номинироватся на «Интернет-фестиваль национального домена .uz 2009» на номинацию «Лучшая персональная страница» и специальную номинацию «Открытие года».

Заявка пока еще не принята (не прошла модерацию). Не знаю уж, кому понравится мой сайтик, но буду надеяться, надежда как говорится — умирает последней. Очень хочется победить, старался все таки. Несколько друзей уже пообещали, что проголосуют за меня (и только за меня), так как им очень понравился дизайн моего сайта, а особенно логотип. Хотя есть люди кому лого ужасно не понравилось. Ну чтож, сколько людей, столько и мнений.

Кстати мой любимый Preloaders.net, ой извините Preoaders.uz тоже номинирован. Уверен, что победим.

Среди верстальщиков принято ругать дримвак. Верстка на дримваке — признак ламерства. В этой статьей, я хочу рассказать почему эти утверждения не верны. Сравнивать буду с не менее популярными Notepad ++ и Microsoft Notepad.

Самые частые заблуждения

Начнем с того, что все ненавидят «Design view» и в этом очень правы, он действительно ужасен. Но не нужно его недооценивать. К примеру у вас есть огромная страница с сотней блоков. К каждому из них применены разные классы или идентификаторы. Наизусть запомнить все конечно же не получится. Чтобы найти нужный блок в коде, вам всего лишь нужно тыкнуть по нему в Design view и ползунок сразу же прокрутится в нужное место. Так же для поиска очень удобно использовать Firebug.

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

Как от этого избавится? Просто не использовать функцию дримвака менять цвет, шрифт и другие параметры при помощи панели Properties. Эта панель служит только для просмотра стилей примененных к тэгу. Это меняет еще один минус дримвака в плюс.

Работа со стилями

Тут важна последовательность. Если вы умеете верстать в слепую, то есть сначала полностью создать HTML, с примененными классами, а потом уже создавать CSS файл, то дримвак просто создан для вас.

и так чтобы создать класс в файле CSS, нужно просто выделить тэг и нажать на панели CSS во вкладке CSS Styles кнопку New CSS Rule . После чего открывается соответствующее окно в котором уже прописан класс со всеми предками, что конечно же очень удобно.

Так же как и с design view, можно с легкостью найти нужный класс в CSS просто кликнув по его названию в панели CSS.

Еще несколько плюсов

При выделении любого элемента в коде, ниже показываются все его предки, кликнув по которым, они выделяются в коде.

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

Запомнить все символы вряд ли кому то удастся, но стоит вам написать & и дримвак предствит вам список всех символов.

Еще одна не мало важная функция Find and replace. Если вам нужно заменить часть кода в большом количестве страниц, то вам сего лишь нужно указать директорию с файлами которые вы хотите изменить и  участок кода который нужно поменять на нужный.

Минусы

Одним из минусов можно считать долгую загрузку, но если вы работаете не прерывно, то получается, что запускать дримвак нужно всего один раз в день. Думаю, что можно пожертвовать этими секундами, чтобы сократить время верстки в целом.

Самый главный минус дримвака — это его цена.