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
Related
so I've read a lot about the current state of rotating text and not being able to perfectly get real antialiasing to happen in all browsers. It looks like the first box in the pic in chrome, but the second, jaggedy box in firefox. I've tried the most popular fixes including -webkit-backface-visibility:hidden; -webkit-font-smoothing:antialiased; and maybe one other I can't remember.
However this is not asking the same question, but a new one I havent found anywhere. These two screenshots of the same box are both taken from Firefox. The jaggedy box on the bottom is what it looks like normally, however, when I mess with the rotation attributes with another(completely different) element on the page with the css edit console, it renders the box perfect / smoothly...
I do, however, have to continue to press up or down to change the rotation value on another element for the entire box to render antialiased perfectly, then it returns to its jaggedy normal self. I rotated the div that the content is in and put the css fixes on the same div(although I did try putting the css fixes on every element) and I didn't ever seem to get any smoothness or antialising like you see in the box above...only when I rotate another element on the page in the browser. WTF?!!?!? is there a way to do this in css or is it only something the browser is doing in realtime and cannot reproduce that smoothness in CSS yet?
EDIT: PIC for comments section
For whatever reason, it seems under some circumstances browsers "forget" to antialias text while doing complex transforms.
The fix:
Using CSS to force the browser to render the transformed element in a separately-composited "layer" is one solution:
transform: rotate(…) translate3d(0px,0px,1px);
The explanation:
Many rendering engine implementations create a GPU layer for the 3d-transformed element, and composite it onto the rest of the page when painting. This alternate rendering path can force a different text-rendering strategy, resulting in better antialiasing.
The caveat:
However, this is a bit of a hack: first, we're asking for a 3-dimensional transform we don't really want; second, forcing many unnecessary GPU layers can degrade performance, especially on mobile platforms with limited RAM.
dev.opera.com hosts a good discussion of compositing, hacks using transform3d, and the CSS3 will-change property.
Jeremy if you come back and answer this I can give the answer to you. just realized I hadn't had an answer to this so I needed to put something here.
This solution worked as in the comments above:
Jeremy:
I had another thought: it could be related to creating an opengl/webgl layer behind the scenes. If you add translate3d(0px,0px,1px) after the rotate transform, does it "fuzz out" a bit more?
Answer - Yes this works to perfectly anti-alias any text in all browsers!
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 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)*
I am getting this display in IE 7
I am getting this display in Firefox:
for the following code
Could anybody point me, What I should do to make the IE Display simalar to Firefox and also, How Do I make the Size should be same for all the headings?
Internet Explorer does not support gradients, shadows, nor border-radius properties. border-radius is supported in IE9, but this won't be of much help!
You can look into CSS3 Pie, which uses IE-specific .htc files to achieve almost the same effect.
For now, if you really need to be fully compatible with all IE's (and other browsers for that matter) I'd use an image. It's not very nice but at least you can rest assured that it will always work ;-)
Rounded corners and drop shadow aren't going to work in IE7 without a lot of clever image tricks. You can't fix it through CSS alone.
Alternatively you could probably find a JavaScript plugin which would create these effects for you if you don't mind taking that route (see curvy corners for example).
I use css to apply rounded corners to li navigation elements. This elements have a border too.
So this is how it looks like:
Like you can see the quality of the rounded corner - border combination is strange, there is a bit of white shining through.
Any idea how to fix that? Do I have to use bg-images?
Unfortunately, yes, you should use background images. Some browsers don't properly handle actual borders with border-radius. You can even see this happening to Stack Overflow's badge styles (which also use border-radius) on Firefox. I don't think you can do anything to fix the border-radius issue other than to report bugs to the respective vendors.
Yes it can be done using this jquery plugin.
http://jquery.malsup.com/corner/
No corner images, uses nested divs to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.