I don't think there is browser support for that to be honest. That's CSS3 so you may not be able to do it like that and be cross browser compatible unfortunately.
You might have to use another div and position it over top using z-index. Not the best solution I know. If there is a solution, let me know Sent from my iPad On Mar 14, 2011, at 9:06 PM, Matt <[email protected]> wrote: > Ok. this working well but I have a follow-up question. I would like to > have the gradient but also add a background image overlay to cut the > corner of the image block at an angle. I created a .gif to try to > overlay but I can't seem to get it to show up over the gradient. Here > is the code I am trying. What am I missing? > > margin: 0; > font-size: 1.2em; > padding: 10px 0 10px 10px; > color: #FFFFFF; > border-top: solid black; > border-right: solid black; > border-bottom: none; > border-left: none; > border-image: none; > background: -webkit-gradient(linear, left bottom, left top, color- > stop(0.04, rgb(2,2,3)), color-stop(0.52, rgb(0,0,153)), color- > stop(0.76, rgb(0,0,153))); > background: -moz-linear-gradient(center bottom, rgb(2,2,3) 4%, > rgb(0,0,153) 52%, rgb(0,0,153) 76%); > background-image:url('/images/corner-right-white.gif') max-width: > 40px; > background-position:right top; > > > > On Feb 22, 4:23 pm, Matt <[email protected]> wrote: >> Thanks Greg. That's perfect. >> >> On Feb 21, 2:51 pm, Bazinga Designs <[email protected]> wrote: >> >> >> >> >> >> >> >>> Here Mat, >> >>> use this generator:http://www.colorzilla.com/gradient-editor/ >> >>> it will generate gradient backgrounds for all browsers, including >>> Internet Explorer - no images, just CSS as you wanted. I usre it very >>> often :) >> >>> Best, >>> Greg >> >>> www.bazingadesigns.com >> >>> 2011/2/21 buyz lots <[email protected]>: >> >>>> Whats your blog link? >>>> On Feb 20, 2011, at 6:51 PM, Matt wrote: >> >>>>> I wanted to add gradient to the headers of each post on the new blog >>>>> I'm trying to build in Drupal 7 - hoping to use CSS instead of an >>>>> image call. Anyone can help? Something like slashdot.org does but >>>>> without all the rounded corners and whatnot. >> >>>>> -- -- >>>>> You received this because you are subscribed to the "Design the Web with >>>>> CSS" at Google groups. >>>>> To post: [email protected] >>>>> To unsubscribe: [email protected] >> >>>> -- >>>> -- >>>> You received this because you are subscribed to the "Design the Web with >>>> CSS" at Google groups. >>>> To post: [email protected] >>>> To unsubscribe: [email protected] >> >>> -- >>> BAZINGA Designs >> >>> http://www.bazingadesigns.com >> >>> Igor Wnuk >>> Ul. PCK 5/20 >>> 24-100 Puławy >> >>> tel. 667 200 706 >> >>> REGON: 060622686 >>> NIP: 716-255-43-47 > > -- > -- > You received this because you are subscribed to the "Design the Web with CSS" > at Google groups. > To post: [email protected] > To unsubscribe: [email protected] -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
