Как вариант детектить размер изображения и выбирать один из трёх способов: горизонтальные градиенты, вертикальные, либо точечные. Правда про ограничение по количеству стопов я не слышал ещё. Уже давно в мозгу витает идея написать такой конвертер на js, не хватает знаний для реализации.
Как раз-таки нет. Самый нетривиальный это background-image и множество однопиксельных linear-gradient();. И по логике даже подходит, и не нужен однопиксельный элемент.
Именно такая вёрстка пиксель-в-пиксель убивает в верстальщике мотивацию. Вместо того чтобы прикручивать к вёрстке какие-нибудь крутые фишки, оптимизировать её, он должен заниматься выравниванием каждого элемента, прописыванием нигде не повторяющихся значений. Особенно это раудет при работе с цветами, ещё лучше всего если при этом дизайнер использовал режимы наложения для кнопок (естественно не понимая зачем). В итоге всё надо верстать изображениями, каждый раз при этом что-то подгонять под ПОСТОЯННО меняющийся макет и времени уже не хватает на то чтобы даже закончить проект, не то чтобы довести его до приличного состояния.
Больше за такое не берусь, спасибо.
CSS достаточно в данном случае. Вешаем картинку на псевдоэлемент у HTML, отключаем pointer-events у него и центируем с абсолютным позиционированием. В конце крутим opacity под оптимальный уровень.
А вообще pixel perfect — зло. Это magic numbers, отрицательные марджины, выкидывание из потока.
Не, я против перекладывания тяжёлой логики на CSS. :nth-child() удобен и отлично справляется со своей задачей. А почему? Потому что он простой, его легко понять, а когда эти селекторы усложняются то и сам код понимать становится труднее. Я уже не говорю про загадки текущих свойств в CSS. Всю логику я бы реализовал отдельным модулем, как media queries, к примеру.
Может быть потому что CSS отвечает только за представление контента, а не его модификацию. Поэтому все content и псевдоэлементы не очень подходят под определение CSS.
P.S. «вавка» — wave файл. ;)
Больше за такое не берусь, спасибо.
А вообще pixel perfect — зло. Это magic numbers, отрицательные марджины, выкидывание из потока.