Архив рубрики'CSS-верстка'

CSS3: брюки превращаются… превращаются брюки…

Thursday, 01.04.2010

Словечко CSS3 мелькает всё чаще, и я тоже начал искать новые методы работы. Естесвенно, оказалось, что даже в самых последних версиях браузеров поддержка CSS3 оставляет желать лучшего. Те CSS-свойства, которые действительно могли бы облегчить работу, поддерживаются не слишком широко. Например, псевдоклассы для создания “зебры” в таблицах. Зато тени и скругленные уголки уже точно можно применять, причем без ущерба для IE, что прибавляет радости. Но это же мелочь! И это всё? Жаль! А я уж размечтался…

Мои ощущения лучше всего передает фраза, которую я сегодня прочитал на Onderhond.com:

The more I play around with the possibilities of css3, the more I keep coming back to the same tired old concept of workaround, fixes and alternative methods. It’s a somewhat depressing realization.

Действительно: “depressing”.

Firebug: быстрый перебор размеров и цветов (мечта шопоголика)

Thursday, 10.12.2009

Firebug для меня — причина номер один для того, чтобы пользоваться Firefox-ом — 99% от всех причин. Чудо-инструмент! Часто при верстке блока, в css-файле я задаю лишь примерные параметры (расположение, размеры, отсупы), а тонкую подгонку осуществляю в Firebug-е.

Это просто! Выбираем элемент, выбираем CSS-правило, устанавливаем курсор и меняем цифровые значения при помощи клавиш-стрелок на клавиатуре. “Вверх” — увеличиваем значение, “Вниз” — уменьшаем. Экономит время и облегчает работу со страшной силой!

firebug1

То же самое  можно делать для чернового подбора цветов элементов. Далее »

“Похоже, скоро мы забудем о SIFR и Cufon! Ура!”

Saturday, 24.10.2009

Юрий Артюх (akella) описал состояние дел и перспективы такого нужного и замечательного дела как встраивание шрифтов в веб-страницы посредством CSS. Много ссылок для чтения.

CSStool.ru – генератор HTML+CSS шаблонов

Monday, 29.06.2009

UPD: Генератор шаблонов теперь находится по адресу Сsstemplater.com

Обновился интересный генератор HTML+CSS шаблонов CSStool.ru. Забыл о нем написать когда он появился. Обратите внимание, вдруг пригодится.

На сайте CSStool.ru, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера.

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

Хак с немасштабируемым фоном страницы

Friday, 26.06.2009

Прикольно на Блондинка.ру фон страницы сделан. Картинка — IMG — положена ниже остальных блоков страницы при помощи z-index. Спозиционирована абсолютно, с шириной 100% — всегда растягивается на всё окно. Сама картинка маленькая (500 х 286 px) но из за того, что рисунок нечёткий, незаметно, что оно сильно растянуто.

Самое, наверное, интересное, что картинка не масштабируется при page zoom-e (в Опере она в какой-то момент начинает, но в Фоксе — нет). Немного необычно смотрится. Отличный хак: дешево и сердито )) Раньше не встречал.

IMG#bg-fon{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: inline-block !important;   
}

А еще, фон рандомно меняется при обновлении окна.

Fixed.name. Эксперименты с фиксированной вёрсткой.

Monday, 22.06.2009

На просторах рунета появился ресурс Fixed.name посвященный внешне довольно мелкой, но внутренне довольно необъятной теме — вёрстке блоками, фиксированным относительно окна браузера при помщи CSS-свойства position:absolute. Далее »

Учебник по CSS-верстке вышел из беты

Monday, 01.06.2009

Сегодня убрал со страницы с Учебником надпись о том, что проект не окончен. Теперь он окончен официально. Это конечно полная условность, но все-таки повод для праздника :)

Эта страница с Учебником – одна – дает половину трафика на всем сайте. Полезный оказался проект.

Последним добавленным материалом стал перевод статьи с мозилловского блога: “Кроссбраузерный inline-block” (Grakhov.com)”.

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

Это конечно не означает, что Учебник никогда не будет меняться. При появлении интересных материалов буду добавлять, менять что-нибудь.

Айфон — сакс, но…

Thursday, 02.04.2009

…находятся желающие им пользоваться ;) Возможно, придется для него верстать. И тогда я начну с изучения материалов из заметки “Верстка под IPhone (шпаргалка)” в блоге Ольги Алексашенко.

Если однажды дизайнер принесет вам на блюдечке невероятно красивый, сияющий, округлый web-application для IPhone, эта шпаргалка и google помогут вам не ударить в грязь лицом.

Спасибо, Оля, что поделилась ценным опытом.

Скругленные уголки — сакс, но…

Tuesday, 31.03.2009

…людям по-прежнему приходится верстать блоки со скругленными уголками. И прогресс не стоит на месте, появляются новые методы. Про поиски и решения можно почитать в блогах Андрея Сумина и Сергея Чикуёнка:

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

Апдейт: Круглые углы в IE 8 (см. комменты)

Апдейт 2: Делаем закругленные уголки с помощью псевдоэлементов :before и :after

HTML Class Names of Web Dev Blogs

Tuesday, 16.12.2008

Собранные Энди Кларком имена классов для обозначения элементов шаблона страницы. С сайтов известных блогеров веб-разработчиков. Чисто “любопытно посмотреть”.

В дополнение к “5-ти советам верстальщику” (совет № 4) и обсуждению, развернувшемуся в комментах.