How to become an author
Search
Write a publication
Pull to refresh

Comments 30

С нетерпением жду продолжения — было бы очень интересно почитать про transition.
Total votes 2: ↑2 and ↓0+2
«Интересной возможностью является передача пар значений радиусов для каждого угла» ->
Вообще шокировало. В первый раз слышу. Спасибо!
Total votes 4: ↑4 and ↓0+4
Спасибо, что собрали все в одной статье.
Total votes 2: ↑2 and ↓0+2
Если не сложно — хотел-бы попросить вас добавить сводную таблицу:
эффект, метод реализации, браузер (поддержка в нем этого метода реализации).
Это было-бы весьма полезно, и достаточно хорошо выглядело-бы визуально
This comment wasn’t rated yet0
см. caiuse, в конце статьи.
Нет смысла добавлять таблицу здесь, т.к. она через неделю (день, час) устареет.
Total votes 4: ↑4 and ↓0+4
Да, тут таблица лучше всего. Просто была необходимость в голове все по местам расставить, заодно поделился с теми, кто только начал изучать
This comment wasn’t rated yet0
www.colorzilla.com/gradient-editor/ лучше его для градиентов пока не видно. Но когда пробовал сделать круговой (или радиальный) все равно вручную пришлось потом код править и доки изучать developer.mozilla.org/en/CSS/radial-gradient (например).

Так что идеального генератора пока не сгенирировали
This comment wasn’t rated yet0
У меня картинка с примера при увеличении масштаба покрывается желтой решеткой. Муар?
This comment wasn’t rated yet0
:) какие-то огрехи округления. Возможно не на круговых градиентах не будет его, лень проверять :)
Total votes 1: ↑1 and ↓0+1
http://css3clickchart.com/#word-wrap — еще один сервис с описаниями и наглядными представлениями различных CSS3 свойств.
http://westciv.com/tools/gradients/ — неплохая штука для генерации градиентов.
http://nerdi.net/ — а здесь собраны многие инструменты и ресурсы для веб-разработки.
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
UFO just landed and posted this here
Интересно, что WebKit для Android и iOS становится своего рода аналогом MSIE для Windows.

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

Ну дык вот теперь совершенно так же поневоле придётся записывать -webkit-gradient, а не то не заработает в iOS 3.2 — 4.3 и в Android 2.1 — 3.0…
Total votes 3: ↑1 and ↓2-1
Автору: есть псевдоэлементы и есть псевдоклассы.

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.

Total votes 3: ↑2 and ↓1+1
Спасибо, но вроде бы в статье путаницы и с ними не было. Специально проверил, все своими именами названо.

Проблема-то в том, что IE8 не понимает псевдоэлементов с двумя двоеточиями, так что придется какое-то время так же как псевдоклассы их оформлять.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
-webkit-gradient
-webkit-linear-gradient
-moz-linear-gradient
-ms-linear-gradient
-o-linear-gradient
linear-gradient

Это какое-то издевательство со стороны разработчиков браузеров. Почему всем нельзя просто использовать последний вариант?
Total votes 1: ↑1 and ↓0+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 хватило ума выбрать меньшее из двух зол.
Total votes 3: ↑2 and ↓1+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;

что? никто не пробовал? ))
Total votes 2: ↑2 and ↓0+2
сори за офтоп и такой «широкий» комент — предпросмотр комента ВООБЩЕ не соответсвует действительности… даааа (
Total votes 1: ↑1 and ↓0+1
А ведь полезная может стать штука. По сути, если добавить еще одно значение к параметрам тени, то это и будет spread-radius. Можно тень делать шире элемента или наоборот, уже элемента. Есть в статье на css-tricks

За одно нашел на сайте мозиллы обсуждение возмножного spread-radius для text-shadow
Total votes 1: ↑1 and ↓0+1
Spread radius поддерживается, кажется, только в последних версиях Internet Explorer.
Total votes 1: ↑0 and ↓1-1
UFO just landed and posted this here
Вот замечательная статья на тему исследования box-shadow, которой, между прочим, уже почти полтора года. За это время наверняка всё то, о чём идёт речь в статье, изменилось в лучшую сторону.
This comment wasn’t rated yet0
UFO just landed and posted this here
По сути да, мы можем добиться того же эффекта, что и repeating-linear-gradient, если ограничить background-size, то есть повторяется уже не градиент по большому фону, а маленький фон с градиентом.

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

Думаю, еще случаи применения для обоих найдутся.
Total votes 1: ↑1 and ↓0+1
Sign up to leave a comment.

Articles

Show the best of all time
Unlock dark mode

Your account

Sections

Information

Services

Support
© 2006–2024, Habr