CSS3 с погружением

[DOC_tr]

С нетерпением жду продолжения — было бы очень интересно почитать про transition.

[f0rmat1k]

habrahabr.ru/blogs/css/135816/

[nick4fake]

«Интересной возможностью является передача пар значений радиусов для каждого угла» ->
Вообще шокировало. В первый раз слышу. Спасибо!

[ShpuntiK]

Спасибо, что собрали все в одной статье.

[ZiNTeR]

Если не сложно — хотел-бы попросить вас добавить сводную таблицу:
эффект, метод реализации, браузер (поддержка в нем этого метода реализации).
Это было-бы весьма полезно, и достаточно хорошо выглядело-бы визуально

[lashtal]

см. caiuse, в конце статьи.
Нет смысла добавлять таблицу здесь, т.к. она через неделю (день, час) устареет.

[crenative]

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

[gerion]

Инструмент от MS
CSS Gradient Background Maker

[crenative]

www.colorzilla.com/gradient-editor/ лучше его для градиентов пока не видно. Но когда пробовал сделать круговой (или радиальный) все равно вручную пришлось потом код править и доки изучать developer.mozilla.org/en/CSS/radial-gradient (например).

Так что идеального генератора пока не сгенирировали

[bolk]

Я на градиентах делал картинки: bolknote.ru/2011/11/12/~3478 (на слова про экономию внимания не обращайте, я там ошибся).

А вот пример картинки с радиальным градиентом: bolknote.ru/files/webkit-purecss-image.html (только для WebKit).

[avrelian]

У меня картинка с примера при увеличении масштаба покрывается желтой решеткой. Муар?

[bolk]

:) какие-то огрехи округления. Возможно не на круговых градиентах не будет его, лень проверять :)

[Vend3tta]

http://css3clickchart.com/#word-wrap — еще один сервис с описаниями и наглядными представлениями различных CSS3 свойств.
http://westciv.com/tools/gradients/ — неплохая штука для генерации градиентов.
http://nerdi.net/ — а здесь собраны многие инструменты и ресурсы для веб-разработки.

[ilyaerin]

Можно добавить еще text-shadow.

[Mithgol]

Интересно, что WebKit для Android и iOS становится своего рода аналогом MSIE для Windows.

Помните, как приходилось воздерживаться от целого ряда новинок (или подыскивать удовлетворительные костыли) оттого, что все они не работали во MSIE 6 под Windows XP?

Ну дык вот теперь совершенно так же поневоле придётся записывать -webkit-gradient, а не то не заработает в iOS 3.2 — 4.3 и в Android 2.1 — 3.0…

[csmile]

Автору: есть псевдоэлементы и есть псевдоклассы.

CSS selector для псевдоэлементов пишется так: elem::before, elem::after, elem::first-line, elem::marker и т.д. Смотрим: www.w3.org/TR/selectors/#pseudo-elements

Элементы это сущности (boxes как правило) сгенерированные CSS процессором дополнительно или в помощь отображению конкретного DOM элемента.

Псевдо-классы же есть средство описания стиля отображения(rendering) run-time состояний самих DOM и псевдо- элементов. Примеры: elem:hover, elem:visited, elem:invalid, etc.



[crenative]

Спасибо, но вроде бы в статье путаницы и с ними не было. Специально проверил, все своими именами названо.

Проблема-то в том, что IE8 не понимает псевдоэлементов с двумя двоеточиями, так что придется какое-то время так же как псевдоклассы их оформлять.

[dasty]

-webkit-gradient
-webkit-linear-gradient
-moz-linear-gradient
-ms-linear-gradient
-o-linear-gradient
linear-gradient

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

[Mithgol]

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

Так, например, чуть выше я посетовал на то, что нам поневоле придётся долго-долго ещё записывать не одну только современную форму этого свойства, но и «-webkit-gradient» — для того, чтобы свойства заработали в популярных прежних системах (в iOS 3.2 — 4.3 и в Android 2.1 — 3.0), появившихся до формирования стандарта.

Однако, если бы свойство с самого начала называлось «linear-gradient», то тогда всем нам приходилось бы ещё хуже: вообще нельзя было бы записать нынешнюю форму свойства так, чтобы она заработала в iOS 3.2 — 4.3 и в Android 2.1!

Я очень рад тому, что разработчикам WebKit хватило ума выбрать меньшее из двух зол.

[rmaksim]

почему все — да просто вообще ВСЕ для box-shadow забывают про 2-й радиус

box-shadow: none | <shadow> [,<shadow>]*
where <shadow> is defined as:
inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? ? ]

box-shadow: 0 0 5px 10px #f00;

что? никто не пробовал? ))

[rmaksim]

сори за офтоп и такой «широкий» комент — предпросмотр комента ВООБЩЕ не соответсвует действительности… даааа (

[crenative]

А ведь полезная может стать штука. По сути, если добавить еще одно значение к параметрам тени, то это и будет spread-radius. Можно тень делать шире элемента или наоборот, уже элемента. Есть в статье на css-tricks

За одно нашел на сайте мозиллы обсуждение возмножного spread-radius для text-shadow

[Mithgol]

Spread radius поддерживается, кажется, только в последних версиях Internet Explorer.

[Vend3tta]

Вот замечательная статья на тему исследования box-shadow, которой, между прочим, уже почти полтора года. За это время наверняка всё то, о чём идёт речь в статье, изменилось в лучшую сторону.

[crenative]

По сути да, мы можем добиться того же эффекта, что и repeating-linear-gradient, если ограничить background-size, то есть повторяется уже не градиент по большому фону, а маленький фон с градиентом.

Но в этой статье на 24 ways можно увидеть, как repeating-linear-gradient решил проблему с диагональным узором (так как повторяется не фон, то изменение угла наклона не разбивает диагональные линии на квадраты как было бы с background-size), причем код получился элегантнее.

Думаю, еще случаи применения для обоих найдутся.