CSS *

Пока вебмастера спорят о браузерах и стандартах, 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!

Блуждая по сети, я не раз видела самые удивительные решения, основанные на применении CSS. И с каждым разом все больше верится, что возможности CSS безграничны :)
Сегодня я увидела вот такую картинку:

Правда интересный эффект? Давайте попробуем раскрыть секрет его реализации.

Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.
С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?

Визуализация данных графиков, диаграмм в основном решается с помощью флэш и некоторых языков программирования. Являются ли эти способы единственными? Давайте попробуем реализовать эту задачу с помощью CSS.

Предисловие
В этом примере я не буду использовать ни JavaScript, ни любые другие языки. Все, что мне нужно это хорошая разметка и код CSS.
Таким образом, наша цель состоит в том, чтобы представить данные таблицы в виде диаграммы. Можно отметить, что данные диаграммы – это объект из 2х элементов, непосредственно зависимых друг от друга. Поэтому, лучшим решением в отношении структуры и семантики будет использование списков определений.
Почему? Ну, для начала, это список элементов. Несмотря на то, что список является линейным, мы можем обозначить заголовки определений (элементы dt) как пункты по оси X и описание определений (элементы dd) как значения по оси Y.

Одна из интересных функций CSS3, которую мы и рассмотрим сегодня, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному. Однако, на мой взгляд, стоит быть в курсе всех новинок дабы не отставать от этих, так сказать, «вперед-идущих» техник.

Начнем:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

Цвет выделения текста будет, как можно догадаться, красным. Можно добавить несколько параграфов и определить для них разные цвета выделения.

[ПРИМЕР]

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

Что такое CSS Attribute Selector?
CCS дает нам возможность стилизовать элементы базирующиеся на атрибутах ссылки, а не на типе самого элемента. Например, вы уже знаете как украсить элемент заголовка h1:

h1 { color: blue; }

Можно немного четче определить атрибут заголовка:

h1[title] { color: blue; }

Можем зайти еще дальше:

h1[title="Go Home"] { color: blue; } /* Значение "Go Home" в атрибуте заголовка */
h1[title~="Go Home"] { color: red; } /* Значение "Go Home" где-то в атрибуте заголовка */
h1[title^="Go Home"] {color: green; } /* Значение атрибута заголовка начинается с "Go Home" */

Что уникального в «мыльных» ссылках?
А теперь возьмем опыт из предыдущих примеров и соорудим вот это:

a[href^="mailto"]:hover:after { content: attr(title); }

Атрибут заголовка мы поставили в hover. Это будет работать, однако может получится что текст появится сразу-же после ссылки. Поэтому правим код на это:

a[href^="mailto"]:hover:after { content: " > " attr(title); }

Что получилось:

[пример]

[*] будет к месту уточнить что, наш любимый браузер, — IE некорректно отображает код, впрочем, мы привыкли.

Долгое время работал за обычной 17-кой Sumsung SynsMaster. Сталкивался с множеством проблем: невозможно протестировать сайт на большом разрешении, при работе в Photoshop нужно постоянно двигать инструменты, постоянное переключение между браузерами, HomeSite и Photoshop (как минимум). Все это очень затрудняло работу и занимало много времени. А некоторые вещи в таких условиях и вовсе невозможно было сделать. Я понял, надо что то менять!

Ниже располагается перевод заметки CSS — A Recipe for Success, в которой рассматривается создание средствами HTML/CSS в браузере некоторого образца меню. В статье освещены довольно интересные случаи, и подробно описано их решение.

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


Рисунок 1

Хотя, на первый взгляд, внешне не представляется сложностей, чтобы повторить это с помощью HTML, однако, все не так просто, и можно наткнуться на достаточное количество подводных камней. Но обо всем по порядку!

Уже довольно давно использую псевдокласс :first-letter для назначения двух фоновых изображений для одного элемента. Самое интересное что :first-letter, один из немногих псевдоклассов, которые работают в 6-ом Интернет Эксплорере. Но есть одна маленькая хитрость, которую нужно знать.

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

Эрик Мейер — широко-известный эксперт в области стандартов HTML и CSS, работающий в области веб-технологий с 1993 года. Им были изданы такие книги, как «Каскадные таблицы стилей. Подробное руководство» (O’Reilly), «Справочник разработчика по CSS 2.0» (Osborne/McGraw-Hill) и «Эрик Майер о CSS» (New Riders). Так же он принимал участие в многочисленных конференциях, посвященных веб-стандартам, применению CSS и веб-дизайну.

Интервью у него берет Джозеф Лоуери — автор бестселлеров «Dreamweaver CS3 Bible» и «CSS Hacks and Filters». В данный момент он заведует маркетинговым отделом в компании WebAssist.

Автор: Джозеф Лоуери
Оригинал: http://adobe.com/newsletters/edge/december2007/articles/article5/index.html
Переводчик: Александр Мусаев

Джозеф Лоуэри: Во время подготовки к этому интервью, я познакомился с вашей статьей, написанной в июне 1999 года о поддержке браузерами CSS и будущем этой технологии. Никто не сомневается в вашем опыте, тем не менее, как именно вам удается делать такие прогнозы?

Эрик Мейер: Согласно изначальному плану, технология CSS разделена на модули, каждый из которых формировался на определенном этапе. Сложность здесь состоит в том, что каждый из таких временных интервалов, как правило, сильно заторможен. Даже у самых «простых» модулей формируется многолетней история развития.

IE7 — библиотека JavaScript, заставляющая эксплорер работать по стандартам. Устраняет множество проблем с css, делает правильной обработку полупрозрачных PNG под IE5 и IE6.

Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и «вечный» font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.