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

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

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

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

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

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

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

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

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

White in FireFox

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

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

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

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

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

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

Представьте себе абстрактный разговор абстрактного заказчика с абстрактным верстальщиком.

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