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!

Блуждая по сети, я не раз видела самые удивительные решения, основанные на применении 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 некорректно отображает код, впрочем, мы привыкли.