2

I've asked the question before one day. And someone give me a link too. But, I can't write the proper code. I need a CSS for this background image:

In this online generator, I've tried, but I can't generate the almost left pure/solid portion of white background color:

Can you please, help me for it. HTML Codes:

<div id="banner" class="outer">
   <div class="inner"></div>
</div>

CSS code:

.outer {
    width: 100%;
    float: left;
}
.inner {
    width: 978px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}
#banner {
    display: block;
    float: left;
    margin: 2px 0 0 0;
    padding: 12px 0 0 0;
    height: 290px;
    background: rgb(208,208,208); /* Old browsers */
background: -moz-linear-gradient(left, rgba(208,208,208,1) 0%, rgba(202,202,202,1) 1%, rgba(202,202,202,1) 2%, rgba(223,223,223,1) 9%, rgba(225,225,225,1) 12%, rgba(228,228,228,1) 13%, rgba(228,228,228,1) 53%, rgba(207,207,207,1) 65%, rgba(207,207,207,1) 68%, rgba(198,198,198,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(208,208,208,1)), color-stop(1%,rgba(202,202,202,1)), color-stop(2%,rgba(202,202,202,1)), color-stop(9%,rgba(223,223,223,1)), color-stop(12%,rgba(225,225,225,1)), color-stop(13%,rgba(228,228,228,1)), color-stop(53%,rgba(228,228,228,1)), color-stop(65%,rgba(207,207,207,1)), color-stop(68%,rgba(207,207,207,1)), color-stop(100%,rgba(198,198,198,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#c6c6c6',GradientType=1 ); /* IE6-9 */
}
Improve this question
11
  • "help" and "do it for me" are a bit different. Check out ColorZilla's Gradient Generator which will get you most of the way. Post your code, ask for help in fine-tuning it if you need. Don't ask us to do it for you. Commented May 27, 2013 at 23:58
  • 1
    What code have you tried so far? The gradient generator you linked to has a "create from image upload" function – have you tried that? Commented May 28, 2013 at 0:05
  • 1
    yes, I'm tried by uploading image. But, it won't give the correct code. This is the saved link of that: colorzilla.com/gradient-editor/… I can't give code at comment section. That's why, I've saved the link and give it at here Commented May 28, 2013 at 0:07
  • I can't provide code at comment section at here. I don't know the process. That's why, I'm posting like this way Commented May 28, 2013 at 0:13
  • 1
    I've just edited and give the code Commented May 28, 2013 at 0:21

2 Answers 2

Reset to default
2

That generator isn't working because that's not a single gradient; it's two. There's a horizontal gradient on the bottom and a vertical gradient atop that. You can use multiple backgrounds for that. This is what I came up with:

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 20%, transparent 97%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #e2e2e2, #fff 40%, #cbcbcb);

As you can see, there's a comma between the linear gradients, which means to composite the first one atop the second one. You can also see I'm using rgba and transparent on the top one so parts show through to the bottom gradient.

Take a look.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks, this is perfect for me. But, one problem is.. Before knowing it, please, visit the link: abidhasan.zxq.net/test/test.html At #banner left side, there are image called "products" which back-portion is white. The gradient is mixed perfectly at the right sides of "products" but can't mixed at the left side of "products". Can you please, tell me the cause?
@user1896653: It doesn't mix at either side for me. Either way, the cause is that products.png contains the gradient as well. Remove the gradient from products.png, leaving whatever isn't covered by the boxes transparent so the CSS gradient can show through.
may be, you're talking about editing "products.png" like makeing it's background transparent. But, It can't be done, because, at products.png each boxes have shadow. If I try to make transparent without that shadow at photoshop, still it might not a good solution for me. Because, there can be a slideshow at that section. So, different "products" would be come. Day by day new "products.png" would be come. So, at every time client don't want to edit every "products.png" at photoshop.
@user1896653: I suppose the solution, then, is to figure out where products.png is coming from and make sure the gradient is never added in the first place.
Hi, Please tell me one last thing. This gradient is not working at safari. I've add with your code: background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 20%, transparent 97%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #e2e2e2, #fff 40%, #cbcbcb); background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 20%, transparent 97%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #e2e2e2, #fff 40%, #cbcbcb); still it's not working at safari. Can you please, tell me how can I fix it
|
2

This is pretty close to your image. It uses a radial gradient and an inset shadow.

http://jsfiddle.net/daCrosby/eZN6Y/

/* Inner Shadow */
-webkit-box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);

/* Gradient */
background: #ffffff;
background: -moz-radial-gradient(40% 20%, ellipse cover,  #ffffff 25%, #cccccc 60%);
background: -webkit-gradient(radial, 40% 20%, 0px, 40% 20%, 100%, color-stop(25%,#ffffff), color-stop(600%,#cccccc));
background: -webkit-radial-gradient(40% 20%, ellipse cover,  #ffffff 25%,#cccccc 60%);
background: -o-radial-gradient(40% 20%, ellipse cover,  #ffffff 25%,#cccccc 60%);
background: -ms-radial-gradient(40% 20%, ellipse cover,  #ffffff 25%,#cccccc 60%);
background: radial-gradient(ellipse at 40% 20%,  #ffffff 25%,#cccccc 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 );
Improve this answer

3 Comments

yes, it looks good too. But, instead of this: abidhasan.zxq.net/test/test_1.html , this solution(provided by icktoofay): abidhasan.zxq.net/test/test.html is more good for me.
basically, it can be perfect for me. But, one problem that I want to mix the white portion with the "product" image's white portion(see the link I've provided). But, problem is if I increase the percentage for white portion(you gave 25%), the size of ellipse will be bigger which don't look good at all. Can you please, update your code increasing white portion to match the "products"'s white without increasing ellipse?
It sounds like you're trying to fit a square image into a round space. It wont work unless you change the size of the ellipse. As @icktoofay said in a different reply, your best option is to modify the products.png file such that it doesn't include the transparent white box. The shadow of the packages is fine, just not the outer square. For a quick hack, you could simply feather the edges of products.png (particularly at the corners) which will make it blend more smoothly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.