I have a container transformed with transform: skew(0deg, -3deg )translateY(-6vh), but I'm using it for a footer, so I want it to be completely flat at the bottom part. How can I acheive it without covering it up with another container with the same background colour? (I don't want things to mess up the responsiveness).
I would use the ::before psuedo element. I couldn't figure out how to get the ::before element to go under the main one, so you lose a little space, but it's not too bad.
Using ::before horribly failed. Plus, there is some oddities with using transform which can be seen if you just put a background color on the element and use a sufficiently wide screen.
So, rather than fight with that, I would just use an SVG to give you that slant you want. There was an odd space between the svg and div, so I used positioning to get around that.
You can play with the values to get the slant how you like, but be advised that it will vary based on the screen width.
#footer {
position:relative;
overflow:hidden;
}
svg {
width: 100%;
fill: green;
max-height: 50px;
position:absolute;
top:0;
}
#footerContent {
margin-top:49px;
height: 100px;
background: orange;
}
<div id="footer">
<svg viewBox="0 0 100 20" preserveAspectRatio="none">
<polygon points="0,20 100,20 100,0" />
</svg>
<div id="footerContent"></div>
</div>
Related
UPDATE: I had previously found a way to accomplish this using CSS, but the slope of the line is jagged and the aspect ratio of the triangle is not consistent for all widths. Here's a Codepen of that solution.
How can I create the effect where the top of the footer slopes upward? Most footers have a simple straight horizontal line along the top of the footer div, but I need to create an effect where the line slopes upward. Here are some different approaches:
PNG image with transparency.
CSS only
SVG
I prefer not to use a PNG image and tried using straight CSS and am now trying it using SVG. The height of the triangular shape should be no more that 200 pixels at the full width of 1440 pixels.
.main {
background: #ccc;
}
.right-triangle {
display: block;
}
.footer {
background: #333;
color: #fff;
}
<div class="main">End of main section be flush with the div below.</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="right-triangle">
<polygon points="50 25, 100 100, 0 100" />
</svg>
<div class="footer">
Next section needs to be flush with the triangle with no gap in between.
</div>
The code below should do what you want. The key is to set the height and width separately and NOT preserve the aspect ratio for the SVG.
You might need to play with values in the max function to get the narrow screen versus wide screen effects you want. And/or, change max-height to height.
CSS
.main {
background: #ccc;
}
.right-triangle {
display: block;
width: 100%;
max-height: max(20px, calc(200vw / 1440 ));
}
.footer {
background: #333; color: #fff;
}
HTML
<div class="main">
End of main section be flush with the div below.</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
class="right-triangle"
preserveAspectRatio="none">
<polygon points="100 0, 100 100, 0 100" />
</svg>
<div class="footer">
Next section needs to be flush with the triangle with no gap in between.
</div>
(I am on a mobile phone, so, sorry but it is bit difficult posting this how I would like to.)
I'm trying to recreate this layout in HTML/CSS (cross-browser compatible back to IE9):
Basically, it's a diagonal line spanning the width of the viewport that divides two background patterns. It will have a fixed height, but it should stretch dynamically to the full width of its container.
I couldn't think of a way to achieve this using purely CSS, so my next thought was to use SVG. This isn't very difficult to do with solid colors:
http://codepen.io/troywarr/pen/EPXVRV?editors=110
But, I'm stumped on how to apply a repeating background pattern to the SVG shape. It will need to line up with the background pattern in the <section>s above and below, and the background fill shouldn't scale with the dimensions of the shape, or it will appear distorted.
Applying some background images in CSS, I'm getting closer:
http://codepen.io/troywarr/pen/OMgyoE?editors=110
I just need the dark background pattern in the filled portion of the SVG.
Using a more visible image as a test, I'm able to stretch it to the dimensions of my <polyline>:
http://codepen.io/troywarr/pen/BjZoEq?editors=110
But, there's that stretching that I don't want. I need to tile my pattern, or at least not distort its native dimensions (so I can use a large swatch of it, if needed), even if the shape itself has a fluid width. I've tried several different combinations of attribute values for the <pattern> element, but I've yet to find anything that works as intended, even following some guidance from related answers:
Fill SVG path element with a background-image
Add a background image (.png) to a SVG circle shape
Fill SVG path element with a background image without tiling or scaling
Any suggestions? I'd love to hear any ideas for non-SVG approaches as well. Thanks!
UPDATE:
Sorry, I just realized that the background patterns in my CodePen examples weren't working. I've updated them with working image URLs.
Considering you need :
the slant width to be relative to viewport
a fixed height for the shape
There is a simple CSS approach you can use with border and viewport units :
body,html{padding:0;margin:0;}
div{
border-bottom:50px solid rgba(0,0,0,.8);
border-top: 50px solid transparent;
background-image:url('http://i.imgur.com/iUhGezx.png');
}
div:before{
content:'';
display:block;
border-right:100vw solid rgba(0,0,0,.8);
border-top:50px solid transparent;
}
<div></div>
The pattern is repeated with the background-image property. The slant is made with the borders on the pseudo element.
The borders on the parent div are there just to make the top and bottom space around the slant.
Viewport related units (vw) are supported by IE9 and over (see canIuse for more info).
Update :
If you need to have a seperate background-image for both areas, there are 2 possible CSS approaches :
With transforms: supported by IE9 and over with vendor prefixes. The slant always has the same angle.
body,
html {
padding: 0;
margin: 0;
overflow:hideden;
}
div{
width:100%;height:150px;
position:absolute;
}
.top {
padding-top:50px;
background: #fff url('http://i.imgur.com/dzFT6wB.png');
}
.bot {
transform-origin:100% 0;
transform:rotate(-5deg);
overflow:hidden;
top:50px; right:0;
width:110%;
}
.bot:after{
content:'';
position:absolute;
right:0;top:0;
width:100%;height:100%;
transform-origin:inherit;
transform:rotate(5deg) translatez(0px);
background: #262729 url('http://i.imgur.com/LxTJ685.png');
}
<div class="top"></div>
<div class="bot"></div>
With the clip-path property: although it has low browser support, it will allow you to control the slant angle better :
body,html{padding:0;margin:0;}
div{
position:relative;
height:150px;
}
div:before, div:after{
content:'';
width:100%; height:100%;
position:absolute;
}
div:before{
background: url('http://i.imgur.com/dzFT6wB.png');
}
div:after{
-webkit-clip-path:polygon(0% 60%, 100% 40%, 100% 100%, 0% 100%);
clip-path:polygon(0% 60%, 100% 40%, 100% 100%, 0% 100%);
background:#262729 url('http://i.imgur.com/LxTJ685.png');
}
<div></div>
This is one way to do it with just CSS. You can use the after pseudo-elements to help you get those angles and just a single png for the diagonal(or an element rotated if you want to avoid the element) and another for the repeating pattern. Since I didn't have your images I just made some real fast, but this should more or less be what you want.
html { height:100%; }
body {
padding:0;
margin:0;
height:100%;
background:#333;
}
.demo {
width:100%;
height:auto;
position:absolute;
}
body:after {
position:absolute;
content:'';
top:0;
bottom:0;
right:0;
left:0;
pointer-events:none;
background: transparent url(http://i.imgur.com/iUhGezx.png) repeat top left;
}
.demo .top {
min-height:100px;
background:#FFF;
position:relative;
}
.demo .bottom { min-height:60px; }
.demo .top:after {
position:absolute;
content:'';
top:100%;
left:0;
right:0;
height:100px;
background: transparent url(http://i.imgur.com/iEubBd5.png) repeat top left;
background-size: 100% 100px;
}
<div class="demo">
<div class="top"></div>
<div class="bottom"></div>
</div>
This is not currently possible with SVG. If you are stretching the SVG with preserveAspectRatio="none" then the entire contents of the SVG are affected. There is no way for some of the contents to opt out of the stretch transform.
In the future, there may be a way to do this in SVG2, but not with the current version of SVG.
Update
If you can live with it not working in IE, you can use a mask or a clip-path to achieve what you want. Below is an example of using clip-path.
body {
margin: 0;
}
section {
height: 50px;
}
main {
background-image: url('http://mass-relevance-all-access.massrel.io/template-static-2e84fe3d1c7dc87710f58b990263ad6c29dacafc/img/bg-pattern-light.png');
}
.dark {
background: #262729 url('http://mass-relevance-all-access.massrel.io/template-static-2e84fe3d1c7dc87710f58b990263ad6c29dacafc/img/bg-pattern-dark.png');
}
.diagonal {
background: url(http://www.boogdesign.com/examples/svg/daisy-grass-repeating-background.jpg);
-webkit-clip-path: url(#diagonalclip);
clip-path: url(#diagonalclip);
}
<svg width="0" height="0">
<defs>
<clipPath id="diagonalclip" clipPathUnits="objectBoundingBox">
<polyline points="0,1 1,0 1,1 0,1"/>
</clipPath>
</defs>
</svg>
<main>
<section class="light"></section>
<section class="diagonal"></section>
<section class="dark"></section>
</main>
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
I want to stack one division on top of another each with different background. the background, ofcourse will be transparent (.png). This is to recreate an effect of a pattern on an image and avoid loading an entire 1366 x 768 image.
my html is somewhat like this
<body>
<div id="firstLayer">
<div id="secondLayer">
<div id="mainContent">
main page content
</div>
</div>
</div>
</body>
I have a radial gradient for the body, the #firstLayer contains the main logo, and the #secondLayer must consist the transparent pattern.
my first try at css was somewhat like this
#secondLayer{
background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
}
But the pattern doesnt show up at all. How can i bring this #secondLayer on top of #firstLayer but just below the #mainContent?
You need to give width and height to #secondLayer like this Demo
#secondLayer{
background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
width: 100%;
height: 100%;
}
Are you trying to do this -
#firstLayer{ background: red; height: 500px; }
#secondLayer{ background: green; opacity: 0.6; filter:alpha(opacity=60); height: 300px; }
Demo
Width and height are definitely required if you have no DIV content. If that doesn't fix the problem for you:
Check image paths, can you load the same image using the same image path in an IMG tag?
Is your stylesheet inline or loaded as a separate file - this will affect relative paths to the image file.
Is your webserver case-sensitive? Does the case of your path match the image?
Hope this helps.
On my homepage I have a slideshow of pictures that are user selectable. I don't want the user to have to modify the image at all.
http://homespun-at-heart.com/ is the example except that the way that it currently is, the user has to modify the image.
What I would like to do is to have a div that is layered on top of the image so that it appears like the content area has a round corner.
How do I position my "round corner" div on top of the image without it pushing the image over?
well you could achieve this with the css3 border-radius property on a div on top, but it's not supported in all browsers. For an image based solution, something like:
html
<div id="container">
<div id="image"><img src="blah.jpg" /></div>
<div id="round">
<img id="topLeftRound" src="leftRound.png" />
<img id="bottomRightRound" src="rightRound.png" />
</div>
</div>
css
#container{
position:relative
}
#image{
position:absolute;
top:0;left:0;
height:100%;
z-index:10;
}
#round{
position:absolute;
top:0;left:0;
height:100%;
z-index:20;
}
#topLeftRound{
position:absolute;
width:10px;height:10px /* or whatever */
top:0;left:0;
}
#bottomRightRound{
position:absolute;
width:10px;height:10px /* or whatever */
bottom:0;right:0;
}
I'm assuming you can guess what you want your topLeft and bottomRight image to be... Just the rounded section of that corner.
I think that's what you're looking for?
You could simply have two divs, one inside the other, both the same width and height. The bottom one is used for the actual photo, i.e. it's background-image will be the photo. And the top one has a background image with transparancy, which is just the 2 rounded corners:
<div id="slideshow"><div id="slideshow_border"></div></div>
Or (perhaps even better), you could have the outside div with the image as a background, then two divs inside, one floated to the left and one to the right, each with a seperate transparant border image. This means that person browsing your website won't need to download the extra transparant pixels that aren't necessary.
<div id="slideshow">
<div class="border left"></div>
<div class="border right"></div>
</div>
And the CSS:
#slideshow {
width: 400px; height: 400px;
background-image: url(images/slideshow1.png);
}
#slideshow .border {
width: 50px; height: 50px;
}
#slideshow .border.left {
float: left;
background-image: url(images/border-left.gif);
}
#slideshow .border.right {
float: right;
margin-top: 350px;
background-image: url(images/border-right.gif);
}
I just used arbitrary values in the CSS.
Do you use jquery on your site? If you do, you can use this plug-in to generate round corners on dom elements : www.jquery.malsup.com/corner/ or this one: www.dillerdesign.com/experiment/DD_roundies/. Both work very well and support all browsers including IE6. To detect IE6 if needed you can use this plug in http://api.jquery.com/jQuery.browser/.
You could do this very easily with CSS3's border-radius property, and you don't need an overlay div or anything. It won't work in IE8 and below, but it works in Webkit and Firefox.
#slideshow img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}