Auto-resizing Skewed Background In Css (+ Images?)
Solution 1:
For anyone who's interested, here's my temporary solution: live demo.
I used this sprite image:
html:
<divclass="container"><h2class="sub-heading"><spanclass="sub-heading-txt">Short title</span></h2></div><divclass="container"><h2class="sub-heading"><spanclass="sub-heading-txt">A bit longer title</span></h2></div><divclass="container"><h2class="sub-heading"><spanclass="sub-heading-txt">A damn long title is here!</span></h2></div>
(the .container
div is only needed for variations)
css:
.sub-heading, .sub-heading:after, .sub-heading:before {
background:url(tha-sprite-url.png) 00 no-repeat;
}
.sub-heading {
position:relative;
display:inline-block; clear:both;
margin-left:31px; padding:018px10px0;
font-size:25px; font-weight:normal; color:#FFF; line-height:47px;
background-position:0 -75px;
background-size:100%282px; /* the sprite's height */
}
.sub-heading:before, .sub-heading:after { content:" "; position:absolute; top:0; }
.sub-heading:before { left:-31px; width:31px; height:57px; }
.sub-heading:after { right:-12px; width:12px; height:42px; background-position:-150px0; }
.sub-heading-txt {
display:block;
-webkit-transform:rotate(-2deg); -ms-transform:rotate(-2deg); transform:rotate(-2deg);
}
/* variations */.container { margin-bottom:10px; }
.container:nth-child(3n+2) .sub-heading { background-position:0 -150px; }
.container:nth-child(3n+2) .sub-heading:before { background-position:-50px0; }
.container:nth-child(3n+2) .sub-heading:after { background-position:-175px0; }
.container:nth-child(3n+3) .sub-heading { background-position:0 -225px; }
.container:nth-child(3n+3) .sub-heading:before { background-position:-100px0; }
.container:nth-child(3n+3) .sub-heading:after { background-position:-200px0; }
Works on IE9+
Unfortunately, background-size
property doesn't support an "inherit" value, so the actual sprite's height must be set in the css :-(
I'm still looking for a more efficient solution.
Solution 2:
With the combination of CSS shapes, positioning, :before
and :after
selectors I've managed to make the container expandable to any content. However, this approach only works in modern browsers and it seems that there's no proper solution without js. Also, the use of svg could be really handful in this case but again you're limited to the browser compatibility.
Here is the demo using pure CSS: http://jsfiddle.net/qaWKX/
EDIT
The use of svg
turned out to be useless without an extra JS function. So I dropped this approach. However, the only proper solution relies on CSS3 but without the use of :before
and :after
selectors. My previous approach was relying on creating pseudo elements that hide both sides of the h3
title. Hiding is not enough when there's no solid color for the background.
With this logic I needed to have a background
that will combine transparency and solid fill. The answer was on CSS3 linear-gradient
background
.
In details:
1. I rotated the h3
title
2. I masked the top area with its container (top:-value
or margin-top:-value
)
3. I set 2 linear-gradient
background images to each side
Here's the demo: http://jsfiddle.net/P5gLE/1/
Solution 3:
here is the html:
<br><divclass="scewed-shape"><divclass="text-align">here is a very long text adsadsad</div></div><br><br><divclass="scewed-shape"><divclass="text-align">this one is shorter</div></div>
and here is the css that makes the custom shape:
.scewed-shape {
display:inline-block;
-webkit-transform: perspective(500px) rotateY(34deg);
-ms-transform: perspective(500px) rotateY(34deg);
left: -25px;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px50px050px;
}
.scewed-shape.text-align {
position: relative;
top: -25px;
}
Solution 4:
I don't think it is possible to do with just the h2
. The problem occurs with the different angles of the skewed sides, meaning you need a 'container' for the skewing and transforms.
Given your example, I came up with the following:
As you will see, this is has a couple of maintenance problems:
- 'Magic Numbers' - these will need tweaking dependent on the skew + size you choose.
- Font rendering with the transform is somewhat worse.
Otherwise, it seems to work. The best solution outside of using pseudo-elements and CSS3 is likely to stick with plain old images for the background of each menu item.
Solution 5:
What about using CSS shapes? I haven't worked with them a ton, but it seems like a good place to start.
Post a Comment for "Auto-resizing Skewed Background In Css (+ Images?)"