Creating transparent text to show gradient color of underlying div

Question

I am trying to create gradient text with plain HTML and CSS. Something like the text below

Check the FIDDLE. It is self explanatory.

I know how to achieve th

Answer 1

i dont think what you are saying is possible...because you have a parent div whose background is gradient and then you have an inner div whose background is not transparent but black (#000000) nou you have written text on inner div but want font's background as gradient which is in parent div...this is not posiible using css/css3 ...

now i can show you 2 ways (>=IE 9) by following which you can achieve same style with little alteration in your mark-up and css

OPTION 1::(need some photoshop work)

have a

set that

's background black.then create gradient photoshop work(ex .png).now set that image as a font/text background using background-clip: text;

webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;

OPTION 2:: (above process is little time consuming ..there is another smarter way)

first have div with black background then write the text in inner div...set inner div's background as gradient then use -webkit-background-clip: text;-webkit-text-fill-color: transparent;

for example ::

MARK-UP

 

   

      CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO TRANPARENT TO SHOW COLOR OF UNDERLYING DIV SO THAT IT LOOKS LIKE THE "HELLO WORLD" TEXT
   

CSS

.black{
    background:black;
    overflow:hidden;
 }

.a{
background: #000000 -webkit-linear-gradient(red, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

LIVE EXAMPLE

ALSO CHECK BROWSER COMPATIBILITY OF background-clip AT caniuse.com

OPTION 3::(to make this style for IE8) (this process is simple,straight but not smart because it is IE specific)

create a photoshop work..make a text with gradient effect..now declare a div with black background..and include that image with tag . :)

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...