CSS *

Román Cortés нарисовал Мона Лизу из фавиконок, Джорджа Буша и Гомера Симпсона на чистом CSS.

А Ned Batchelder показал чудесную анимацию этого действа в своем блоге при помощи javascript.

Любителям Симпсониады посвящается ;)

Испаноговорящий любитель симпсониады и CSS решил одновременно поразить любителей сериала и CSS — портрет Гомера Симпсона сотворенный при помощи CSS, что у него вышло рекомедую посмотреть кликнув по линку ниже:
www.romancortes.com/blog/homer-css

по наводке: cooler-online.com

Blueprint — довольно интересный фреймворк для верстки сеткой, который я лично считаю удобным, потому как он позволяет довольно просто создавать весьма сложные страницы, при этом не думая об IE.

Со страницы проекта на Google Code скачиваем архив.

В архиве будет папка blueprint/ там и содержатся основные файлы фреймворка, их и подключаем к странице:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> 
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

На технику Сетки я обратил внимание около года назад. Тогда эта техника после очень поверхностного изучения показалась мне бесполезной и очень экспериментальной, отталкивало то что для реализаций необходимо создавать лишнюю разметку. Но сейчас уже становится трудно не замечать количество веб-сайтов построенных на сетке, а так же количество статей и уроков о ней. Благодаря последним стало гораздо проще изучить и понять принципы и концепцию, сделать более менее реальные выводы. Мой вывод спустя год таков — «Это простое и полезное решение которое когда либо было создано для вёрстки веб-страниц, должен знать каждый уважающий себя веб-дизайнер.»

В связи с участившимися сообщениями о том, что в CSS хотят добавить переменные, анимацию, трансформацию и прочая, хотелось бы немного отстраненно порассуждать на эту тему.
CSS, которому уже 12 лет, изначально был задуман и разрабатывался как средство для описания внешнего вида документа. С тех пор утекло много воды и технология претерпела значительные изменения и дополнения. На данный момент, рабочая версия по стандарту W3C, принятая в 2006 году — Уровень 2.1. Уровень 3 находится в состоянии разработки (есть черновик), и ожидается с нетерпением многими разработчиками.
Вокруг будущего CSS ходит много слухов и предположений, коротые муссируются и множатся, выливаются в дискуссии и споры. Ведь по сути, если хотя бы половина предлагаемых изменений будет осуществлена, то CSS превратится в (полноценный?) язык программирования визуальной составляющей веб-документов.

Что-то мне кажется, что в этот раз с идеями внедерения новых правил разработчики перестарались…
Dave Hyatt, Dean Jackson и Chris Marrin (все трое работают в Apple) предложили внедрить в CSS 3 поддержку создания анимации, трансформацию объектов, их изменение с  течением времени и ввести css-переменные.

В этой статье я расскажу вам как сделать RSS иконку любого цвета, используя всего одну картинку.

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

« Открыть ссылку в новом окне» — это просто отвратительно! Я сам хочу решать когда, что и как открывать! Если мне понадобится открыть ссылку в новом табе, то я зажму Ctrl (в Опере — Shift).

Хотел что-то перевести и случайно скопировал CSS правило в переводчик Google, я на секунду даже поверил что это и есть перевод. Решил скопировать кусок побольше, вот что вышло :)

# заголовок охватывают (плавать: слева; дисплей: встроенный; текста-приведения: центр; отступы-слева: 15px)
# заголовок период сильной (размер шрифта: 130%)
# заголовок охватывают сильное (начертание шрифта: обычный; отображения: блок; размер шрифта: 60%)
# заголовок период сильной я (дисплея: нет)
# заголовок охватывают ул один (размер шрифта: 100%;)
# результатов й (бело-пространстве: nowrap; обивка: 5px; текста-приведения: левый)
# результатов td (границе-рейтинг: 1px твердых # ccd3d9; обивка: 6px)
# результатов td, # результатов td (img вертикально-присоединяются: средний)


Имеем: навороченную форму без таблиц
Нужно: подвинуть съезжающий из-за сглаживания шрифтов label в Safari
Примечание: подвинуть безопасно, а не css3-свойствами.

Вуаля! есть замечательное свойство safari only позволяющее подвинуть что-угодно куда-угодно влево-вправо!

Здравствуйте.
Есть идея к добавлению в спецификацию CSS.

Свойство skew сдвигает один указанный угол или сторону блока по горизонтали или вертикали на установленное смещение. Сдвиг стороны сдвигает оба угла этой стороны, образуя параллелограмм. Текст и внутренние элементы сохраняют своё положения (в отличии от свойства rotation) и не искажаются соответственно преобразованиям блока.

Пока вебмастера спорят о браузерах и стандартах, WebKit занимается делом :) На этой неделе разработчики CSS3 представили новое свойство, названное background-clip:text, которое позволяет наложить любой фон/изображение на текст, границы и даже тень, при этом не перекрывая их, а реализуя нечто похожее на функцию наложения «маски» в Photoshop.

Код выглядит так:




Hello, world!


Результат:

Симпатично, неправда ли? :) Наверняка, скоро пользователи Safari и FireFox смогут применить это свойство.

Еще несколько скриншотов применения нового свойства можно посмотреть здесь:
— текст с тенью
- текст с обводкой
— текст с подчеркиваением

Источник

Кросс-пост Блог для вебмастеров

У верстальщиков до сих пор возникает задача — подключить стили только для определённого браузера. Для IE проблема решаема — мало кто из верстальщиков не знает что такое conditional comments. Но исчезающе малое количество народу знает про per-site user stylesheet rules. Интересны они тем, что Mozilla FireFox поддерживет их через собственное правило — «@-moz-document».

Вообще, это правило позволяет подключать стили в зависимости от домена, URL или его префикса. Для нас важно, что эти правила увидит только FireFox.

Простой пример использования, из которого становится понятен общий принцип:

White in FireFox

У приведённого примера есть недостаток — такой CSS не пройдёт валидацию, что лично для меня определяющей целью не является, но для многих это как скаутский значок.

Принципы фильтрации по URL и доменам так же могут оказаться полезными, например, в случае, если CSS для нескольких поддоменов грузится с одного адреса, где располагается вся статика. О них можно почитать, например, в архиве W3C.

P.S. Если в статье что-то не так — подскажите. Это мой первый опыт.

Оригинал статьи опубликован в моём блоге.

Задался тут недавно вопросом, а кто-нибудь использует при дизайне UI псевдокласс :active для улучшения взаимодействия с пользователем?
Я никогда раньше особо не обращал внимание на этот псевдокласс (ну прописываю его в LO/HA и прописываю), но в один прекрасный день подсмотрел как он используется при создании вкладок на SimpleBits и ещё раз убедился, что всё гениальное просто :-)
Суть в том, что при нажатии на ссылку навигации для перехода в другой раздел, например, для :active на этой ссылке присвоены те же стили что и для активного состояния. Получается интересный эффект ещё на этапе начала загрузки страницы. В сумме с достаточно логичной и легковесной разметкой выглядит как практически мгновенный переход вкладки в состояние «вы в этом разделе».
По-моему достаточно любопытное использование, потому как больше нигде подобного использования этого псевдокласса я не припомню.
Естественно могут возникнуть некоторые проблемы при, например, остановке загрузки страницы пользователем, или, насколько я помню, в старых версия IE при переходе назад ссылки оставались активными, но как часто могут возникать такие ситуации? И достаточно ли это веский повод не использовать такой «разгон» интерфейса?
P.S. интересно было бы услышать комментарии, ссылки на другие примеры реализации, на основе этого трюка, или на статьи по схожей теме. :)

Столкнулся с проблемой, что в safari(3.0.4) очень странно отображается страница, которая адекватная во всех остальных браузерах.
После нескольких часов танцев с бубнами c restorer определили, что safari не воспринимает первый стиль в css-файле после указания кодировки.
Поэтому создали специальный класс, который идёт после указания кодировки.

@charset «utf-8»;
.i-love-steve-jobs { /* yep */ }

Зы ничего подобного в интернет не нашёл, возможно это только мои глюки?

Всем известно, что на маках замечательный рендеринг шрифтов ;) Но, к сожалению, на темном фоне при сглаживании «Medium» текст выглядит очень жирным, что меня, мягко говоря, раздражает. Вот, например, кусочек меню Smashing Magazine с рендером по-дефолту:



К счастью, я нашел обходной путь этой проблемы. Заключается он в следующем: если указать тень (параметр text-shadow), то для текста с тенью включается «фотошоповский» рендеринг без субпиксельного сглаживания (Standard в System Preferences/Appearance). И никто не мешает нам сделать нулевую тень :)

Прописываем в CSS элементам такой параметр: text-shadow: #000 0 0;. Смотрим:



Вуаля! Надеюсь, этот трюк поможет эстетствующим любителям шрифтов и Сафари :)

UPD: Если вас смущает ругающийся валидатор, то могу сказать, что это баг самого валидатора, который проверяет CSS2.1, т.к. параметр text-shadow является валидным и присутствует в спецификации CSS2 и CSS3. Решение проблемы — в More Options валидатора выбрать Profile: CSS version 2 или CSS version 3.

По просьбам пользователей после прочтения статьи Визуализация данных на CSS

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

Большинство дизайнов ориентировано на использование фиксированных значений при верстке: ширина и высота блоков, размер шрифта. Это позволяет сверстанному шаблону «не разваливаться» при изменении масштабов просмотра и сохранять свойство кроссбраузерности. Однако в этом есть один большой минус – при большом разрешении экрана маленькие фиксированные блоки теряются на большой площади и остаются незамеченными. Тут даже не спасет «резиновая» верстка, т.к. сайт будет выглядеть еще более нечитабельным, например на 19'' мониторах при разрешении большем 1280 по ширине. Для меня это актуально, т.к. на ноутбуке 17'' с разрешением 1400х800 просматривать «резиновый» сайт очень неудобно. И желание оставаться на таком сайте отпадает быстро. Существует ли способ, позволяющий управлять масштабами не только текста, но и всего сайта?

Хотя эта программа существует уже достаточно давно, я удосужился добраться до нее только сегодня. Итак, CSS Vista — легковесная софтина, позволяющая в реальном времени просматривать результат CSS-верстки одновременно в Firefox и IE6, что само по себе является отличной альтернативой запуску трех приложений отдельно.

Навеяно этим: habrahabr.ru/blog/css/36860.html

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно {...cut...}, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.

И так далее. There is a better way!