CSS » PokrovBlog | Максим Покровский. Веб-дизайн устами фрилансера, глазами дизайнера и руками верстальщика.

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.

Сделал за последнее время:

Добавил в портфель около 48-и новых работ:
Сделал очень много всяких штук при работе над поддержкой сайтов.
Как бы это теперь в портфель запихнуть?

Заказать мне работу

26.07

Размещаем что-либо поверх flash блока

Комментарии (4) CSS, HTML

Размещаем любой блок над флеш: <div class="flash-wrap"> 
<a class="flash-link" href="#">Перейти на PokrovBlog</a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque"> 
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>
.flash-wrap{
position: relative;
}

.flash-link{
position: absolute; top:0px; left:0px;
}
Это наитипичнейшый пример, но иногда требует нечто более сложное. Например, мне нужно было сделать чтобы баннер с активной ссылкой (то есть уже вшитой в код самого флеша), вел на другой адрес.
Размешаем активную область над флеш.: <div class="flash-wrap">
<a class="flash-link" href="#"></a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>
.flash-wrap{
position: relative;
}

.flash-link{
position: absolute; top:0px; left:0px;
width:180px; /*Размеры флешки*/
height:220px;
background: url('images/0.gif') no-repeat; /*Особенный костыль для всех IE. Если фона нет, то воспринимается ссылка вшитая во флеш, а не наша. Думаю понятно, что 0.gif это прозрачный однопиксельный гиф.*/
}

Пример

13.05

Организация CSS. Думайте своей головой.

Комментарии (13) CSS

Когда таксопарк нанимает водителя, то им устраивают тест на знание города. Вопреки житейскому опыту, который подсказывает, что хороший таксист знает все зако пере и другие улки, отличается он от “таксиста обыкновенного” совсем не этим. Хороший таксист знает, что вовремя праздников, постов ГИБДД гораздо больше, чем в обычные дни. Знает, что в час пик лучше поехать не самой лучшей, но зато пустой дорогой, а ночью лучше разогнаться по длинной, но прямой и ровной дороге. Знает, что ночью, едя по главной дороге, лучше уступить идиоту несущемуся по второстепенной, чтобы там не говорили правила ПДД (а также знает много других разных штук, которые мне не успел поведать таксит Вадик). Если выжать из этого абзаца истину, то оно будет звучать почти как мантра: классный таксист знает, КОГДА и ГДЕ лучше применить свои знания, а где лучше о них вообще не вспоминать.

Свежевыжатая мантра верна по отношению ко всем аспектам интернет-деятельности (и не только). Например, три дня назад мне достался на редизайн сайт-визитка, состоящий из 3 типовых страниц и имеющий вот такую структуру css:

организация css

Структура была взята из вот этой статьи — http://vremenno.net/html-css/progressive-enhancement-with-css/ и хороша для крупных сложносочиненных порталах, над поддержкой которого работает очень много разных людей, чей труд должен быть как-то систематизирован. Поэтому в следующий раз перед тем как применить тот или иной популярный трюк, подумайте: а не будете ли вы похожи на того водителя который, пропускает среди бела дня, мчащихся по второстепенной дороге идиотов, только потому что более опытный водитель посчитал время суток как очевидный факт. Заодно можно подумать чем все это кончится.

17.03

2 способа расположить картинку сбоку от текста

Комментарии (13) CSS, HTML

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

15.03

Что надо сделать, чтобы люди перестали пользоваться IE6

Комментарии (18) CSS, HTML

Первой ласточкой борьбы с IE была всеобщая эйфория от семантики и стандартизации.

Откройте эту страницу – http://pokrovskii.com/misc/index.html в IE6 и любом другом браузере (оригинал страницы взят с http://anton.shevchuk.name/). Поводите мышкой по кнопкам в IE и в нормальных браузерах. Чувствуйте разницу?

Как работает:

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

Я использовал уже готовый скрипт выводящего предупреждение в IE – http://upgradebrowser.org/webmasters и заблокировал исполнение скрипта анимации с помощью <![if !IE 6]>IE Conditional Comment: NOT Internet Explorer<![endif]>. Проще некуда.

Любители скупой технической информации на этом могут перестать читать. Потому что дальше я буду многословно объяснять.

12.03

Длинные классы

Комментарии (0) CSS

Длинные классы зло — их труднее вбивать в строке поиска, а читать мы их не читаем

09.02

Крутой верстальщик понимает это….

Комментарии (16) CSS, HTML, IMHO-мысли

Крутой верстальщик — это не тот, кто знает тыща и один способ реализации всплывающего меню, а тот кто понимает, что для порталов лучше использовать ООП-верстку, а для динамично развивающегося ресурса, не стоит жалеть лишнего дива.

Крутой верстальщик понимает, что промосайтам чхать на кол-во тегов, для них больше важна оптимизация картинок, а на сайтах типа “чтоб было” можно выжать максимально оптимизированный код… А еще он не упирается рогом в семантику, когда не надо, и понимает, что валидность, это гарант того, что через 5 лет ваш начинающий YouTube не развалиться в супер новом браузере от Яндекса.

06.01

Объектно ориентированная верстка

Комментарии (13) CSS, HTML

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

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

Отследить, как повлияет корректировка существующего правила на такой портал — проблематично. А если это еще и не ваш портал? Если вас просто попросили внести пару десятков изменений? Тот еще мозготряс.

В таком случае верстать лучше объектами или блоками (кому как нравится). Для тех кто не знаком с термином ООП, объясню понятным языком. Например, у нас есть дверь. Дверь обладает свойствами: она белая, прямоугольная и открыта. Теперь если нам надо закрыть дверь, то мы просто меняем свойство «открытая» на «закрытая». Или добавить новое свойство — «застекленная»… Довольно примитивное описание, но в целом ясно, я полагаю.

Ниже я займусь практикой.

02.10

Вот вам истина

Комментарии (15) CSS, HTML, freelance

В 90% случаев контент верстать сложнее, дольше и дороже, чем промо.

Это догма.

24.05

5 советов верстальщику

Комментарии (17) CSS, HTML

Поддержу хорошую игрушку организованную Никитой Селецким и получившую поддержку от всех именитых css-разработчиков.

Перед началом работы смоделируйте каркас работ в голове. Настоящая работа верстальщика происходит ДО того как открывается редактор. Все остальное лишь инструмент.
Не злоупотребляйте <div>. Чем меньше вы сможете использовать тегов тем лучше. Впрочем всегда есть исключения (Статья на эту тему).
Не зацикливайтесь на одних и тех же методах. Возможно именно сейчас появился более совершенный способ реализации png, закругленных уголков или чего еще. Не нашли в рунете — придумайте сами.
Каждый дизайнер обладает своим собственным стилем. Верстальщик тоже, просто это не так заметно. Поэтому не старайтесь копировать стиль верстки подчистую. Я например не разделяю блоки кода комментариями, потому что использую структурированный стиль написания и интуитивные id. Мне так удобно, не не факт, что это будет удобно вам. Используйте, то что вам подходит, а не то что СЧИТАЕТСЯ удобным.
Не забывайте про то что браузеров много. Отмазка, “у меня нет этого браузера” — смешна.

Эстафету передам Евгению, Дмитрию и Владимиру

04.05