CSS: добавление градиента при зависании

-1

Можно ли добавить градиент на зависание? Я хочу избежать изображений и использовать чистый css3.CSS: добавление градиента при зависании

У меня есть простая коробка с backgroundc-color: blue whihc имеет значок. Я хочу добавить эффект градиента на мыши.

Как я могу получить эффект градиентного свечения как захват экрана?

Я пытаюсь получить этот эффект ниже:

blue gradient

источник

2013-02-13 user244394

да, возможно – jackcogdill

Вы можете сделать градиенты в CSS, хотя определения могут получить немного многословным. Вот прочный CSS3 gradient creator.

Тогда просто добавьте :hover на свою ссылку.

.your-link:hover { 
// gradient here 
}

источник

2013-02-13 23:15:44 zakangelle

Это, как я хотел бы сделать это:

.link:hover { 
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 116, color-stop(1%, #57fdfe), color-stop(100%, #2c95dd)); 
background-image: -webkit-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%); 
background-image: -moz-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%); 
background-image: -ms-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%); 
background-image: -o-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%); 
background-image: radial-gradient(farthest-side at center bottom, #57fdfe 1%, #2c95dd 100%); 
}

То полный пример, вы можете просто скопировать и вставить, и он должен работать :) наслаждаться!

Обратите внимание, что имеет свои цвета там и его радиальная :)

источник

2013-02-13 23:22:40 DuncanLewis

ли это та вещь, которую вы ищете?
Очевидно, что используйте свои собственные цвета.

DEMO

Это CSS:

.blah:hover { 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0198E1), to(#00FFFF)); 
    background-image: -webkit-linear-gradient(top, #0198E1, #00FFFF); 
    background-image: -moz-linear-gradient(top, #0198E1, #00FFFF); 
    background-image:  -ms-linear-gradient(top, #0198E1, #00FFFF); 
    background-image:  -o-linear-gradient(top, #0198E1, #00FFFF); 
}

источник

2013-02-13 23:22:56 jackcogdill

@ yentup- thankyou. его работа над FF, но не работает на IE9. Есть ли возможность проделать работу над IE9? – user244394

Я не уверен. Я отказался от стандартного, возможно [это] (http://jsfiddle.net/yentup/DrRda/1/) работает? У меня нет IE, поэтому я никогда не смогу его протестировать – jackcogdill

Для получения наилучших результатов для CSS3, вы можете пойти в css3please.com. Просто добавьте: hover to the class даст вам то, что вам нужно:

.box_gradient:hover { 
    background-color: #444444; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */ 
    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */ 
    background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */ 
    background-image:  -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */ 
    background-image:   linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */ 
}

источник

2013-02-13 23:36:19

CSS: добавление градиента при зависании

ответ

Смежные вопросы