Comments 30
С нетерпением жду продолжения — было бы очень интересно почитать про transition.
+2
«Интересной возможностью является передача пар значений радиусов для каждого угла» ->
Вообще шокировало. В первый раз слышу. Спасибо!
Вообще шокировало. В первый раз слышу. Спасибо!
+4
Спасибо, что собрали все в одной статье.
+2
Если не сложно — хотел-бы попросить вас добавить сводную таблицу:
эффект, метод реализации, браузер (поддержка в нем этого метода реализации).
Это было-бы весьма полезно, и достаточно хорошо выглядело-бы визуально
эффект, метод реализации, браузер (поддержка в нем этого метода реализации).
Это было-бы весьма полезно, и достаточно хорошо выглядело-бы визуально
0
0
www.colorzilla.com/gradient-editor/ лучше его для градиентов пока не видно. Но когда пробовал сделать круговой (или радиальный) все равно вручную пришлось потом код править и доки изучать developer.mozilla.org/en/CSS/radial-gradient (например).
Так что идеального генератора пока не сгенирировали
Так что идеального генератора пока не сгенирировали
0
Я на градиентах делал картинки: bolknote.ru/2011/11/12/~3478 (на слова про экономию внимания не обращайте, я там ошибся).
А вот пример картинки с радиальным градиентом: bolknote.ru/files/webkit-purecss-image.html (только для WebKit).
А вот пример картинки с радиальным градиентом: bolknote.ru/files/webkit-purecss-image.html (только для WebKit).
+1
http://css3clickchart.com/#word-wrap — еще один сервис с описаниями и наглядными представлениями различных CSS3 свойств.
http://westciv.com/tools/gradients/ — неплохая штука для генерации градиентов.
http://nerdi.net/ — а здесь собраны многие инструменты и ресурсы для веб-разработки.
http://westciv.com/tools/gradients/ — неплохая штука для генерации градиентов.
http://nerdi.net/ — а здесь собраны многие инструменты и ресурсы для веб-разработки.
+3
UFO just landed and posted this here
UFO just landed and posted this here
Можно добавить еще text-shadow.
+1
Интересно, что WebKit для Android и iOS становится своего рода аналогом MSIE для Windows.
Помните, как приходилось воздерживаться от целого ряда новинок (или подыскивать удовлетворительные костыли) оттого, что все они не работали во MSIE 6 под Windows XP?
Ну дык вот теперь совершенно так же поневоле придётся записывать-webkit-gradient, а не то не заработает в iOS 3.2 — 4.3 и в Android 2.1 — 3.0…
Помните, как приходилось воздерживаться от целого ряда новинок (или подыскивать удовлетворительные костыли) оттого, что все они не работали во MSIE 6 под Windows XP?
Ну дык вот теперь совершенно так же поневоле придётся записывать
-1
Автору: есть псевдоэлементы и есть псевдоклассы.
CSS selector для псевдоэлементов пишется так:
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.
+1
-webkit-gradient
-webkit-linear-gradient
-moz-linear-gradient
-ms-linear-gradient
-o-linear-gradient
linear-gradient
Это какое-то издевательство со стороны разработчиков браузеров. Почему всем нельзя просто использовать последний вариант?
-webkit-linear-gradient
-moz-linear-gradient
-ms-linear-gradient
-o-linear-gradient
linear-gradient
Это какое-то издевательство со стороны разработчиков браузеров. Почему всем нельзя просто использовать последний вариант?
+1
Да потому, что вариант без префикса является стандартом. Но пока стандарт не сформирован, практика употребления того или иного свойства 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 хватило ума выбрать меньшее из двух зол.
Так, например, чуть выше я посетовал на то, что нам поневоле придётся
Однако, если бы свойство с самого начала называлось
Я очень рад тому, что разработчикам WebKit хватило ума выбрать меньшее из двух зол.
+1
почему все — да просто вообще ВСЕ для 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;
что? никто не пробовал? ))
+2
сори за офтоп и такой «широкий» комент — предпросмотр комента ВООБЩЕ не соответсвует действительности… даааа (
+1
А ведь полезная может стать штука. По сути, если добавить еще одно значение к параметрам тени, то это и будет spread-radius. Можно тень делать шире элемента или наоборот, уже элемента. Есть в статье на css-tricks
За одно нашел на сайте мозиллы обсуждение возмножного spread-radius для text-shadow
За одно нашел на сайте мозиллы обсуждение возмножного spread-radius для text-shadow
+1
Spread radius поддерживается, кажется, только в последних версиях Internet Explorer.
-1
UFO just landed and posted this here
По сути да, мы можем добиться того же эффекта, что и repeating-linear-gradient, если ограничить background-size, то есть повторяется уже не градиент по большому фону, а маленький фон с градиентом.
Но в этой статье на 24 ways можно увидеть, как repeating-linear-gradient решил проблему с диагональным узором (так как повторяется не фон, то изменение угла наклона не разбивает диагональные линии на квадраты как было бы с background-size), причем код получился элегантнее.
Думаю, еще случаи применения для обоих найдутся.
Но в этой статье на 24 ways можно увидеть, как repeating-linear-gradient решил проблему с диагональным узором (так как повторяется не фон, то изменение угла наклона не разбивает диагональные линии на квадраты как было бы с background-size), причем код получился элегантнее.
Думаю, еще случаи применения для обоих найдутся.
+1
Sign up to leave a comment.
CSS3 с погружением