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

http://jsfiddle.net/nicktheandroid/F8v2c/3/

Я пытаюсь создать радиальный градиент, который плавно проходит между двумя одноуровневыми элементами - начиная с 10 или 20 пикселей справа от кнопки, спускаясь примерно на полпути вниз через div ".content".

Я считаю, что это просто требует правильного позиционирования градиентов для обоих элементов, так что это выглядит как один плавный радиальный градиент, в этом проблема, я пытался сделать это, но я разочаровался - и ответ может помочь другим.

За меню есть фон, поэтому я не могу просто «забелить» часть рядом с «функциями» на изображении ниже — см. jsfiddle.

См. изображение, например.

Пример плавного прохождения радиального градиента через 2 элемента


css radial-gradients elements
person android.nick    schedule 20.09.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я разместил краткое обновление вашего jsfiddle по адресу http://jsfiddle.net/F8v2c/9/

Чтобы определить положение, вам нужно установить высоту кнопки, тогда вы знаете, на сколько нужно сместить градиент. На кнопке имеем:

padding:10px;
height:21px;

Итак, мы знаем, что общая высота блока составляет 41 пиксель
(21 пиксель в высоту + 10 пикселей сверху + 10 пикселей снизу)

Таким образом, чтобы центр градиента был на 10 пикселей ниже кнопки, мы использовали бы 51 пиксель для вертикального положения, горизонталь не имеет значения, если она одинакова как для кнопки, так и для раскрывающегося списка. Если кнопка и раскрывающийся список не имеют одинакового размера, проценты не будут работать, поэтому мы установим размер круга в пикселях (300 пикселей).

background-image: radial-gradient( 74px 51px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);

В раскрывающемся списке css почти такой же, за исключением того, что центр градиента находится на 10 пикселей ниже нижнего края, а на 10 пикселей сверху.

background-image: radial-gradient( 74px 10px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);
person Jedidiah    schedule 21.09.2011
comment
Это абсолютно красиво. Я не понимаю: как этот синтаксис работает, если это не тот синтаксис, который дает MDN: goo.gl/c82xM и я не думаю, что это синтаксис, который дает webkit. Или я просто не знаю, как читать их синтаксис? Я искал способ сделать круг размером в пиксели, как вы только что продемонстрировали, это возможно, но я не смог найти ничего о том, как это сделать. На самом деле, я разместил еще один вопрос здесь, на SO, спрашивая, можно ли использовать измерение Pixel, и единственный ответ сказал: «Нет»: goo .gl/dmCos Я до сих пор не отметил правильный ответ. - person android.nick; 22.09.2011
comment
О, и в вашем Jsfiddle кнопка перепуталась и окрашена сплошным синим цветом в Chrome и сплошным белым цветом в Safari - оба webkit. Когда я добавил background-size:93px, это было исправлено. Однако, если он установлен на 92 пикселя или меньше, это просто сплошной цвет. Может быть, я что-то упускаю, но я думал, что это было ужасно странно. jsfiddle.net/nicktheandroid/F8v2c/12 - person android.nick; 22.09.2011
comment
Спасибо, рад, что помогло. Я посмотрел его на webkit.org/blog/1424/css3-gradients он говорит, что начало может быть установлено в любых значениях, которые принимает фоновая позиция, даже в разных единицах по горизонтали и вертикали. Не уверен, что это просто вебкит, я прочитаю страницу MDN. Кажется глупым позволять вам использовать только проценты. - person Jedidiah; 22.09.2011
comment
И я забыл упомянуть, что он прекрасно работает в Safari, Chrome и Firefox. - person android.nick; 22.09.2011