I am not sure how to exactly phrase this question so maybe that's why I can't find help with this.
I am coding a webpage and the designer has made a background for a part of it. It's sort of a two way gradient: both horizontal and vertical at the same time. I am attaching the image here because I'm not sure how to explain it.
I'm sorry if it's very obvious but I can't find anything resembling this anywhere. Thank you!
Here's the image:
EDIT: The question is, can I make this background using just CSS3?
Thanks!
Are you able to limit browser support to browsers that support multiple backgrounds?
If so, you can create two gradients, along with a border, to simulate that.
Here's a version that only works in Firefox: http://pastehtml.com/view/b295elnso.html
You can modify the webkit and other lines to get it working in other browsers. I used the Ultimate CSS Gradient Generator to build the lower gradient.
Here's a good listing of multiple background support.
(Edit: I meant only works in Firefox, not IE. Doh!)
*(Edit2: Added multiple background support listing)*
Related
I am trying to use a CSS3 Border gradient property and using an example from css tricks. I can get it to work using their example but cant seem to get my colours in that i am after and i think it's syntax errors. Is someone able to let me know what i may be missing?
I am after a left and right border on a div with the gradient going from #d1d2cd to #e3e4df 5 pixels wide?
I have mocked up an example in js fiddle: http://jsfiddle.net/DqgPy/
Thanks
I'd recommend checking out a site like:
http://www.colorzilla.com/gradient-editor/
Play around with the gradient settings, and it will auto-generate the CSS you need (including support for older browsers). At the very least, the code provided might help you figure out any of your syntax errors.
I've encounter a doubts of how to approach a project which im busy at this time. I need to create a header with a strange form. This project needs to be responsive in any modern device. I've checked different blogs searching for help such as shapes of CSS. This has helped me but I do not know which would be the best approach for this.
http://css-tricks.com/examples/ShapesOfCSS/
The design which is wished is something similar as this image:
As you can see there are two curves on each side which are also different from each other. I would like this to be a header element. Is it possible to create with only one element? Any suggestions of how to reach this kind of irregular forms with CSS?
You could achieve this by using border-top-left-radius and border-top-right-radius, and setting them at different values.
Example jsFiddle.
If you'd like to set the border radius individually for all four corners, use the more general border-radius property. It's syntax is:
border-radius: top-left top-right bottom-right bottom-left
Example jsFiddle.
border-radius is supported in all major browsers, except older versions of IE (IE8 and before).
If you'd like border-radius to work in older versions of IE (6, 7, 8), you could look into using CSS3 PIE.
Here is a codepen of the desired header in the question.
Depending on your header size you will need to play with the numbers; but this should kick you off in the right direction.
http://codepen.io/BuoyantMedia/pen/ubIpG
I was just wondering if anyone might be able to tell me how to add a left and right sided faded border to my webpages such as on this site:
http://www.farrow-ball.com/colours/paint/fcp-category/list?resetFilters=true
My webpages are of a fixed layout and are 920px in width to the edges of the images / text boxes.
Any help would be greatly appreciated in my quest to learn CSS! I've tried to find tutorials on how to do this or previous topics on this however I must not be putting in the correct keywords because I can't seem to find what I'm after.
Thank you!
you use box-shadow it's supported in most new browser, some uses prefixes though.
there is even a generator available that can come in handy
http://css3gen.com/box-shadow/
I want to have a vignetting effect on the background of a page I´m building. This is the page:
www.karolinadahl.se
I managed to get the effect I´m looking for in Firefox, and it seems to work ok. In Safari I get some kind of vignetting, though not quite what I´m looking for and the inset shadow slows the page down tremendously for some reason. Im using Safari 5.
I don't think it works in Explorer at all and I don't know about Chrome and Opera.
Is there a smarter way of achieving this effect on the background?
You're applying the effect correctly, however, these effects are
Not fully supported, which explains your problem with IE
Known to render differently from browser to browser
Still, time is on your side. Support will only improve. For a web-site still in development, I'd say stick with the CSS3 techniques rather than older, hackier solutions.
You could also try a gradient in the background. Might be more consistent.
Is it possible to create the following without use of images, just using css3?
Yep. The relevant things you'll want to look up are gradients, text-shadow, and 2D transforms.
You'll need to do better with accepting answers to questions you've asked, and ask questions that show you've tried it yourself before you'll get better answers, most likely. People aren't going to give you the code if you've shown no effort to try to do it yourself.
Yes, it's possible.
CSS border-radius, gradients, text-shadow and #font-face will get you quite a bit of the way.
Those angled tabs are going to be a massive pain to get right, and likely to have cross-browser issues. You'll probably be able to get them right using CSS transform, but it'll require separate DOM elements for the edges, otherwise you'll transform your text as well.
The outward curves at the bottom of the tabs will also be tricky. I can't see an easy way to achieve that.
Assuming your aim is to do it without images, rather than simply as a CSS excersise, then a better solution might be to do it using SVG. You can incorporate SVG as elements within your page, so no separate downloads, and it should be fairly straightforward to achieve the results you want -- certainly much easier than with pure CSS.
SVG won't work in older versions of IE (IE8 and below), but since you're asking about CSS3, I assume that's not an issue for you. If it is an issue, then you can use a library like Raphael or SVG2VML to convert the SVG into VML on the fly for IE.