Is it at all possible to achive this effect, only using CSS/JS?
http://i.imgur.com/s2RYR.jpg
I'm just wondering as to whether or not this is feasible without images, and any answers would be appreciated.
Thanks in advance.
"Peters out"?? You mean the 2 lines (top and bottom) that fade out to the right and left - yes. If you make a div of a whatever width and height of maybe 1px (or 2) you can apply a css gradient to it (with transparency) and it would work fine. You would have to accept some limitations in the IE world though. You can use the http://www.colorzilla.com/gradient-editor/ to design the gradient.
Related
I have been trying to make this PSD using CSS?
So far I have reached this. Can I achieve this design using CSS3 or do I have to use old school background image method?
In short, yes this is possible with CSS alone (without CSS2 even), but I would urge you to use background images instead.
Ranting
The problem with doing CSS like this is shadows. The way it renders the triangle is just a border that is transparent on the diagonal sides. In other words, your shadow would still be a box and would not look the way you want it to.
I see this a lot with people starting to use CSS3. They normally want everything done dynamically instead of with background images. And once it's done, there's this slew of CSS that barely does anything aesthetically for the page. In reality, it only takes 10-15% of what they end up with to achieve the same effect with images.
There isn't any problem with background images, they aren't going out of style, and they certainly won't stop working any time soon. My advice, stick with background images for what needs an image, and save CSS3 for special effects. It sounds boring and old-school, but it works and is a whole lot easier.
This seems like a relatively simple CSS project; simple, here, being relative, as I've seen people make an animated Twitter Fail Whale with CSS alone.
What you're going to have to do for the triangle edges (which I assume is the tricky part for you), is use the CSS matrix transform (elaborated on at W3Schools), and then just use box-shadow for the borders, and box-shadow: inset for the inset effect. Afterwards, just use appropriate padding and text alignment to get the text centred in each part of the object.
EDIT
Consider using the before and after pseudo elements to achieve this. Alternatively, you can use two skewed <div>s stacked on top of eachother for each section; however, this wouldn't give you an attractive shadow.
I don't think it is possible with CSS alone. You will have to make use of background image. You will be able to create the tapered edge effect using :after and :before psuedo classes. But will face problem with the inside shadow.
I once tried to create a similar breadcrumb using css3 alone when I saw the breadcrumb in Google Help Center (which is similar, but using background image), but was not able to do it.
http://support.google.com/adsense/bin/answer.py?hl=en&answer=1354760
I tried to do it with CSS (:after and :before) pseudo elements, without adding any other html elements.
I am trying to achieve the effect which can be seen here in the lower right where the artist name and track title fade out to the right.
My first attempt was creating an overlay image, but this resulted in an ugly edge on the right because the colors would add. (maybe I can substract the images before using them?)
(this is how it looks like)
Then I searched for a CSS 3 attribute which is crossbrowser compatible. But I didn't even found a solution that works with all modern browsers.
EDIT: I am not searching for an animation. I want to have a gradient.
This seems to be very difficult to explain. I made a fiddle of how far I got: http://jsfiddle.net/z7cK2/
ANSWER: OUCH, nevermind...
is seemed I just used an old image m(
What kind of image did you try to overlay?
Method 1 (Image):
http://jsfiddle.net/R3ndb/2/
Use an absolute positioned image as an overlay.
Method 2 (CSS3 gradient):
http://jsfiddle.net/R3ndb/3/
Use an overlayed DIV with a CSS3 gradient.
Hi I was trying to figure out how to create a border that fades into the background colour of a div and this is the only solution I could come up with.
I've googled around and it seems people suggest CSS3 but I was told it was still "under development" and not fully introduced in modern browsers, correct me if I'm wrong, probably am.
Anyway this is the solution I came up with, are there simpler ways of doing it or is this a reasonable approach?
Created numerous divs for each part of the border (as below), and set their background image according to the part of the border: http://i.imgur.com/sh6Z8.png
HTML & CSS: http://codeviewer.org/view/code:1e4f
(New to webdevelopment and stack overflow, sorry if I'm doing anything unorthodox, thanks).
So as Tim there already said it, if the width of your website is static, you can do something like that ( In fact even if css3 may be good option for your usage case This is super simple... )
http://jsfiddle.net/Xtw84/3/ - this is from a prior answer so the edges are not soft but the idea is the same. ( doesnt matter ) I also added image in the background so you can see how that would work. Theres no need.. actually makes no sense to slice the background image in half.
Heres a bit more stripped down version of it. http://jsfiddle.net/Xtw84/4/
With css3 i would do this with box-shadow and just expand the shadow as much as needed.
Is your layout going to be fluid? e.g. it will grow in width/height? If it isnt going to grow in width, then there is no reason that you can not just set the background image.
For what you are doing, I wouldn't use gradient borders and just stick with the images in the background.
I want something that looks like this http://jsfiddle.net/mazlix/VBzau/3/
But I don't want to have to write the border-radius twice (in the div.left in the CSS). I mean, I can, but I just feel like it's wasteful and a sign that I've structured this wrong.
Please let me know if that seems the only way to properly achieve what I want.
Thanks!
border-radius:15px 0 0 15px;
See here:
http://www.css3.info/preview/rounded-border/
I'm about 98% sure that you can't get around that.
1.
So.. I dont know if it's an option, but you could use background image in the outer container. This background would be the desired width and 1px height and hold 2 desired colors side by side. And it would be repeated vertically.
2.
This however is a css3 option: You could use horizontal gradient. Basically the same as the option above, just maybe a tad more flexible as it doesnt use image but css3 gradient as mentioned. http://jsfiddle.net/VBzau/13/
The gradient was made using http://www.colorzilla.com/gradient-editor/
3.
Then theres the good old masking. To basically use an image or images that are negatives of border radius and are the same color as the background where the box is placed.
Much like what is being used here as a fallback in the main content area with the sliding content http://www.apple.com/imac/
4.
I got thinking about how you mentioned about the structure. So heres what i would recommend. http://jsfiddle.net/VBzau/14/
Basically i have put another container wrapping around the main container. Re-applied overflow: hidden; and taken away the radiuses from the left box. Also i moved the image inside the new outer-container.
I have multiple divs where the left side is an image (varying heights per div) that will determine the height of each div.
The right side of the div has a header on top with content below, so header is solid color and content another solid color.
My issue is the right side has rounded corners, so I need to have an image on the top and bottom for all x-broswering. I don't want to adjust the height for every div based on the height of the left image. Is there a way of setting it up so the the right side will match the height of the left image?
does this make sense?
EDIT: Sorry, this wasn't clear. This should help: http://jsfiddle.net/xtian/cMs7m/
I was not able to use PIE because I need only specific corners to be rounded and it only supports all 4 being rounded. I had to just use images, which I would love to get away from but with IE, its not really possible yet.
I'm not sure I understand you exactly, but let's try...
If leaving IE out is not an option, you should look for solutions such as CSS PIE and others that can emulate CSS3 features in IE. I've used PIE and it does the trick marvellously for border radius. Can't quite remember what other things could be used, but I'm pretty sure there were like 2 more solutions that are pretty common. Would using CSS3 instead of rounded corner images solve your problems?
Not quite sure that I understood the question well, but if it's about having rounded corners, I think the time is totally right to stop using images for this and start using CSS3:
http://www.css3.info/preview/rounded-border/
easy...
for old IE's I think there are alternate solutions:
http://msdn.microsoft.com/en-us/library/bb250413%28v=vs.85%29.aspx