So there is this project I am working on, inside this tiny box there is this title that is like an Arch (A bridge or an upside down "U") Is it possible to make it out of CSS?
What "tiny box"?!? Are you doing the re-re approach of design where you are working from a PSD or something? If it's a text character, It sounds like you are looking for a cap... also known as a intersection. named entity : ∩ UTF-8 code: ∩ It really helps to know the HTML entities, or at least have a good reference to them: http://htmlhelp.com/reference/html40/entities/ Though if you are just talking about having the title box have a rounded top, that's where playing with border-radius comes into play, but if it's shape can't be replicated with that, you'd have to Really, it's hard to say what it is you need -- you really just didn't provide enough information about what you are trying to do.
Yeah, and accessibility-wise, I would recommend it to each and every person out there - NOT. Two options, regarding what type of person you are : - You are someone who has read and understood the web content accessibility guidelines, applying in real life all the w3 specs, and stuff. Well if you were that person, you wouldn't have been here asking this question. -You are unfortunately someone who goes "WCAG, never heard of it in my life" and "yeah, I'm a pro web designer, and my highly professional designs are always the best when it comes to esthetics, and yeah it's pixel perfect, except that it's broken on all handheld devices, small screens in general, as well as some old browsers I don't support since HTML5" -- then sorry to say, there is a solution. Kind of stupid, but still works (does it?!). It's simple - just wrap every single letter of it in a span (since span has no semantic meaning) of that title (you meant heading?), and apply to it a different absolute position and transform, in degrees, in order to tilt the thing. If that title inside a box is, say, a heading then it will sort of look like this : <h2> <span class="char1">T</span> <span class="char2">i</span> <span class="char3">t</span> <span class="char4">l</span> <span class="char5">e</span> </h2> Code (markup): If the title is not suitable for h2, then dont put h2. Put something else you think is the best fit, evaluating what it represents for your website, and not what it looks like. For the css part, declare the width, height, top, left, position (absolute) and transform (include multiple versions with different browser prefixes) of every singe character. Not that these classes don't have to be named like that, they don't even have to be classes. You must also apply the relative position to your heading, or whatever. The bottom line -- I would recommend this method to my worst enemy. From the accessibility point of view it's just rubbish. What about the browsers or devices that don't support the transform property, or handle some other mentioned properties in a different way? You asked for it, you got it.
Is that what was being asked for?!? See, so vague I didn't even come CLOSE to thinking that's what they were trying to do. Though there is a slightly better way of coding that: <h2> T<span>i<span>t<span>l<span>e</span></span></span></span> </h2> Code (markup): Tilt the H2 back 40 degrees, then tilt each span 20 degrees. (or something to that effect) -- each one is transformed off the previous element. This way you only need to say it twice in the CSS... and by nesting you don't need any extra classes. Honestly, I don't see how doing that would be a issue in terms of accessibility -- SPAN doesn't change the meaning of it's contents -- old UA's, non-CSS and non-visual wouldn't treat it any differently than if there were no spans present. I just didn't think that's what they were asking for.
Oh, I see, that nesting trick is rather cool. As always, you don't lack any ingenuity there. But imho when it comes to accessibility, it's kinda bad. Try to disable the transform property. See? Secondly, the whole thing is absolute. So, try to add a few letters, or a whole word. It would just stack one letter on another, and to prevent this you need to play with css again. If it's a web template he'll be selling in future, the customers will complain because they just can't figure it out... They may file a dispute if they're short tempered. The payment would have to be processed online of course, but that's not a problem, since, like 2 decades. If it's paypal, he can easily get limited, or life-frozen. And that's a real problem, because of some dumb css trick! Now again, you say use javascript. But since you don't like javascript doing css' job, I won't even dare to mention it here. I know I'm waay past the issue here, but it's just to prove it's not all roses. Well, @TS, you've got your answer. It's your call from here.
Actually, I stand corrected -- you can't nest that way because apparently a transform inside a transform screws up the positioning of the next element in a nonsensical manner. Still, since it's going to rely on CSS3 anyways, I'd use nth-child instead of classes. <h1> <span>T</span><span>I</span><span>T</span><span>L</span><span>E</span> </h1> Code (markup): h1 { text-align:center; padding:1em; } h1 span { display:inline-block; /* FF and Chrome won't rotate display:inline */ position:relative; top:0.2em; -webkit-transform:rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform:rotate(-45deg); } h1 span:nth-child(2) { top:-0.2em; -webkit-transform:rotate(-22.5deg); -moz-transform:rotate(-22.5deg); -ms-transform:rotate(-22.5deg); transform:rotate(-22.5deg); } h1 span:nth-child(3) { top:-0.35em; -webkit-transform:rotate(0); -moz-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); } h1 span:nth-child(4) { top:-0.2em; -webkit-transform:rotate(22.5deg); -moz-transform:rotate(22.5deg); -ms-transform:rotate(22.5deg); transform:rotate(22.5deg); } h1 span:nth-child(5) { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } Code (markup): Which looks a little something like this: http://www.cutcodedown.com/for_others/l3l00/template.html Though yeah, that's some UGLY code, but in some cases it may be far, far, FAR more desirable than a large image file -- and it's not like spans change the meaning of the CDATA or break it up in any way. (at least if you don't add whitespace -- screen readers won't even break it into letters and will read it as a single word!)
Unfortunately, too clever for my own good, didn't work in practice Uhm, check mine. No transform, oh noes it's an arch without them rotated... ooh... Well, relative actually but yeah, you change the size of the title you have to recreate the CSS from scratch -- which is why such a thing is only viable on STATIC titles that would never change on a site. I'd never suggest doing this with normal titles that change regularly as it would be a disaster. You COULD probably make it work with scripting assist, but honestly anyone resorting to scripting for layout or design deserves a shotgun blast to the crotch. In that way it falls into the category of one of those "But I can do it in photoshop" concepts -- as if that has ANYTHING to do with accessible web design... and again why starting from some goof assed picture of a website before you have semantic markup of content of value and a working designed IN CSS layout is putting the cart before the horse and the road to complete miserable failure in terms of usability, functionality and accessibility. No matter how much the artsy fartsy types have pissed all over the industry making said approach the norm with their flashy but ultimately useless design concepts.
I meant something like this: http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/
Too good to be true, I guess. It is viable if it's some static title, say an h1 logo text alternative, like in your demo. But the thread starter stated clearly that it's some sort of a box... Exactly my point. Years of traveling and site-seeing doesn't make one a painter.
Which means we STILL didn't understand what you are asking for -- and I'm still not sure we are. Is it a static title, or is it doing this on multiple titles. If the latter, kick the designer in the nerts and forget that nonsense. If the former, I'd suck it up and use a background-image.