I've tried following a guide on Youtube for help with this, and I can get it to work - sort of.
I'm trying to place two divs inside a section, where the top one is to house an image, and the bottom one be place for text etc.
The thing I'd like, is for the the top one to have a skewed razorblade dip in the middle, so the image sort of bleeds onto the bottom div.
I've managed to make the skew elements and place them where I'd like, but I when I turn them transparent, they seem to disappear.
Example: https://imgur.com/DsqNvZI
My CSS:
.section_1 {
height: 800px;
width: auto;
background: red;
}
.section_image {
height: 400px;
width: auto;
background: green;
position: relative;
background-image: url(lolsovs.jpg);
}
.section_image::after, .section_image::before {
position: absolute;
content: '';
width: 150px;
height: 150px;
background: green;
z-index: 100;
bottom: -1em;
}
.section_image::after {
left: 50%;
transform: skew(0, -20deg);
z-index: 100;
}
.section_image::before {
right: 50%;
transform: skew(0, 20deg);
}
.section_text {
background: purple;
height: 400px;
width: auto;
z-index: -100;
}
I'm still a novice when it comes to all of this stuff, so go gentle on me!
Thanks in advance!
but I when I turn them transparent, they seem to disappear.
Which is logical since you made them transparent. I advise you to consider another way to achieve this. You may simply consider some linear-gradient to color the bottom part to have this transparent part on the top:
.image {
height: 200px;
background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}
.bottom {
height:200px;
margin-top:-50px;
background:
linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - 21px) 0/40px 50px no-repeat,
linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + 20px) 0/40px 50px no-repeat,
linear-gradient(purple,purple)100% 0/calc(50% - 40px) 50px no-repeat,
linear-gradient(purple,purple)0 0/calc(50% - 40px) 50px no-repeat,
linear-gradient(purple,purple)0 50px/100% 100% no-repeat;
}
<div class="image">
</div>
<div class="bottom">
</div>
And for better handling you can use CSS variable to adjust dimension:
.image {
height: 200px;
background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}
.bottom {
height:200px;
margin-top:calc(-1 * var(--h,50px));
background:
linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
linear-gradient(purple,purple)100% 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
linear-gradient(purple,purple)0 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
linear-gradient(purple,purple)0 var(--h,50px)/100% 100% no-repeat;
}
<div class="image">
</div>
<div class="bottom" style="--h:80px;--w:100px">
</div>
Related
There is a little space between my two divided blocks.
https://i.imgur.com/l411V0t.png here you can see my problem. I've can’t figure out why the blocks act like this.
body, main {
width: 100%;
margin: 0;
background: black;
}
.container {
display: block;
height: 200px;
margin: auto;
}
.block {
width: 100%;
height: 100%;
background:
linear-gradient(-135deg, transparent 45px, wheat 0) top right,
linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
background-size: 100% 50%;
background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>
In Firefox there is no gap to be found, in Edge and IE it shows so it seems to be a sizing issue. Increasing the background size to 51% closes the gap also in Edge.
I'll try to find how the different browsers calculate background sizes.
body, main {
width: 100%;
margin: 0;
background: black;
}
.container {
display: block;
height: 200px;
margin: auto;
}
.block {
width: 100%;
height: 100%;
background:
linear-gradient(-135deg, transparent 45px, wheat 0) top right,
linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
background-size: 100% 51%;
background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>
Interesting question, while when the container height is set to even number pixel, the line will be removed. When the container height is odd pixel, the line will be displayed.
The key factor should be background-size: 100% 50%; , so you could use scss round function to skip the rounding problem here.
I want to do the following and until now I neither got it to work on my own nor did I find something similar online. I am building a page that will not be scrollable and I want a white background but with a rainbow stripe at the bottom of the page.
I kinda got it to work like this with a div (I tried it as a background for the whole page, but it blurres because css doesn't crop the image, it compresses it):
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
background: white url('../img/rainbow.jpg') no-repeat bottom fixed;
background-size: contain;
}
But the problem with this code is, that it does not scale properly: Passing a certain point the image isn't visible all the way, because it gets cut on both sides(left and right) the hight works.
I hope y'all know what I want to do.
Thanks in advance
Instead of using an image, you could achieve that with HTML and CSS.
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
}
.color {
position: relative;
float: left;
height: 100%;
width: calc(100% / 6);
}
#blue {
background: blue;
}
#green {
background: green;
}
#yellow {
background: yellow;
}
#orange {
background: orange;
}
#red {
background: red;
}
#purple {
background: purple;
}
<div class="rainbow">
<div id="blue" class="color"></div>
<div id="green" class="color"></div>
<div id="yellow" class="color"></div>
<div id="orange" class="color"></div>
<div id="red" class="color"></div>
<div id="purple" class="color"></div>
</div>
Use gradient as background and no need image or a lot of code:
html {
min-height:100%;
background:
linear-gradient(to right,
blue calc(1*100%/6),
green calc(1*100%/6) calc(2*100%/6),
yellow calc(2*100%/6) calc(3*100%/6),
orange calc(3*100%/6) calc(4*100%/6),
red calc(4*100%/6) calc(5*100%/6),
purple 0)
bottom/100% 10% no-repeat;
}
Or if you want it inside a fixed element:
.box {
position:fixed;
bottom:0;
left:0;
right:0;
height:10%;
background:
linear-gradient(to right,
blue calc(1*100%/6),
green calc(1*100%/6) calc(2*100%/6),
yellow calc(2*100%/6) calc(3*100%/6),
orange calc(3*100%/6) calc(4*100%/6),
red calc(4*100%/6) calc(5*100%/6),
purple 0);
}
<div class="box"></div>
height: 10%; will scale the thickness. If you want the thickness consistent when you resize, just use px instead. I found 75px was about the same size as 10% when in full screen.
For the image, I just increased the width of your image to 2500x905 px This scaled nicely with no blur in both my monitors.
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
left: 0px;
background: white url('http://foregotten.net/imgs/pen/rainbow1.jpg') no-repeat bottom fixed;
background-size: contain;
}
https://jsfiddle.net/Foregotten/5yLev3bf/6/
I have a custom fancy footer created with html and css. See it here: https://jsfiddle.net/fb6qdvrw/
To create the triangles I use :before and :after like this:
#footer .layer-4.bg-secondary:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 100%;
border-top: 120px solid transparent;
border-left: 120px solid #FFFFFF;
width: 0;
}
#footer .layer-4.bg-secondary:after {
content: '';
position: absolute;
top: 10px;
right: 0;
left: 100%;
border-top: 120px solid transparent;
border-left: 120px solid #ffcf87;
width: 0;
}
The problem I want to solve is the white line / border thickness. I need it to have the same thickness for diagonal and horizontal line. Is this possible in my case? I see I am limited to triangles and rectangles, but I think there must be a solution. For the moment my fancy footer is ugly because of this.
CSS Based Approaches:
Below are a couple of pure CSS based methods to create this shape:
1 - Skewed Transformation:
You can create this shape by using CSS3 skew() transformations.
Required HTML:
All we need is 2 elements inside footer i.e:
<div class="footer">
<div class="top"></div>
<div class="bottom"></div>
</div>
We will then use ::before and ::after pseudo elements for each child element to draw skewed overlays on the respective element:
Output:
Working Example:
body {margin: 0;}
.footer {
position: relative;
padding-top: 100px;
overflow: hidden;
}
.top,
.bottom {
position: relative;
height: 50px;
}
.bottom {
margin-top: 10px;
}
.top::before {
transform-origin: left top;
transform: skew(45deg);
position: absolute;
background: green;
height: 100px;
width: 145px;
content: '';
top: 100%;
right: 0;
}
.bottom:before {
transform-origin: right bottom;
transform: skew(45deg);
position: absolute;
background: blue;
height: 150px;
bottom: 100%;
width: 95px;
content: '';
left: 0;
}
.top::after,
.bottom::after {
transform-origin: left bottom;
transform: skew(45deg);
position: absolute;
background: green;
right: -100px;
left: 100px;
content: '';
bottom: 0;
top: 0;
}
.bottom:after {
transform-origin: right bottom;
background: blue;
right: 100px;
left: -100px;
}
<div class="footer">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
2- Linear-Gradient:
In this approach we will use CSS linear-gradient() function to draw this shape on the element as a background. As we can apply multiple background images on an element so we will divide this shape in small parts and draw them on the element with precisely controlled sizes and positions.
We can divide this shape in 4 parts and draw them each having specific size and position.
Below is a step by step procedure to create this shape:
Required HTML:
We need only one block level element (div) possibly having some class i.e:
<div class="shape"></div>
Step 1:
First of all, lets try to create the long skewed shape on the bottom of the element.
Necessary CSS:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px);
background-repeat: no-repeat;
background-size: 100% 50px;
background-position: right 75px bottom;
}
We will have the following output:
Step 2:
Now we will draw the large triangular shape on the left bottom:
Necessary CSS:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
linear-gradient(-135deg, transparent 135px, blue 135px);
background-size: 100% 50px, 180px 200px;
background-position: right 75px bottom, left bottom;
}
This will create the following output:
Step 3:
Now we will draw the upper triangular bar with following CSS:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
linear-gradient(-135deg, transparent 135px, blue 135px),
linear-gradient(45deg, transparent 50px, green 50px);
background-size: 100% 50px, 180px 200px, 100% 50px;
background-position: right 75px bottom, left bottom, left 75px bottom 60px;
}
And we will have the following output:
Step 4:
Finally, we will draw the right bottom triangular image:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
linear-gradient(-135deg, transparent 135px, blue 135px),
linear-gradient(45deg, transparent 50px, green 50px),
linear-gradient(45deg, transparent 50px, green 50px);
background-size: 100% 50px, 180px 200px, 100% 50px, 150px 100px;
background-position: right 75px bottom, left bottom, left 75px bottom 60px, right bottom;
}
This will create the following shape:
Working Example:
div {
background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
linear-gradient(-135deg, transparent 135px, blue 135px),
linear-gradient(45deg, transparent 50px, green 50px),
linear-gradient(45deg, transparent 50px, green 50px);
background-repeat: no-repeat;
background-size: 100% 50px, 180px 200px, 100% 50px, 150px 100px;
background-position: right 75px bottom, left bottom, left 75px bottom 60px, right bottom;
height: 200px;
}
<div class="shape"></div>
SVG Based Approach:
Polygon Shape:
We can use SVG's polygon element to draw this shape as well:
polygon element draws a closed shape by connecting straight line segments. This element takes single points argument which contains a list of points
Necessary Code:
<svg width="400" height="140" viewBox="0 0 400 140">
<polygon points="0,0 80,100 300,100 330,140 0,140" />
<polygon points="53,50 85,90 305,90 343,140 400,140 400,50" />
</svg>
Working Example:
body {margin: 0;}
svg {
height: auto;
width: 100%;
}
<svg width="400" height="140" viewBox="0 0 400 140">
<polygon points="0,0 80,100 300,100 330,140 0,140" fill="blue" />
<polygon points="53,50 85,90 305,90 343,140 400,140 400,50" fill="green" />
</svg>
Useful Resources:
CSS3 Transforms: Specs, MDN
Linear Gradient: Specs, MDN
SVG: Specs, MDN
How would I go about create several homepage sections, all with parallax background images and a slanted edge?
This is the design I'm trying to create: http://prnt.sc/ea0avx
If it helps, I'm building within Wordpress using Avada theme as my base.
https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms
The Author details how to write css such that the sections have angled borders.
You can just transform the angled divs and over lap them off the screen.
<style>
body {
margin: 0;
}
.angle {
margin: -75px;
top: 350px;
height: 400px;
background: green;
transform: rotate(-5deg);
z-index: 5;
}
.revAngle {
margin: -75px;
width: 150%;
height: 400px;
background: green;
transform: rotate(5deg);
z-index: 5;
}
.strait {
height: 500px;
background: pink;
}
</style>
<html>
<div class="strait"></div>
<div class="angle"></div>
<div class="strait"></div>
<div class="revAngle"></div>
<div class="strait"></div>
</html>
http://codepen.io/kevinlbatchelor/pen/ggJmYK
To achieve a parallax background effect use something along these lines of code.
Example:
.parallaxdiv {
/* The image used */
background-image: url("img_parallax.jpg");
/* The Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I am not exactly sure what you mean by a slanted edge , but you can try to use CSS clip-paths to achieve a slanted affect.
An example:
.img {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
Please vote up if it helps !
I have three background images and I would like them to be on the top of each other. Besides that, I would like to place them manually and not just align.
How can I do this?
My codepen
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
-
.first {
background: url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg") no-repeat;
background-size: 100% 100%;
height: 400px;
}
.second {
background: url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
background-size: 300px;
height: 200px;
}
.third {
background: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif") no-repeat;
background-size: 80px;
height: 100px;
}
With CSS3, you can apply multiple backgrounds to elements. You can also set custom background-position for each background.
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
body, html {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 100vh;
background-image: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif"),
url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif"),
url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg");
background-size: 80px, 300px, cover;
background-repeat: no-repeat;
background-position: 50% 90%, 50% bottom, center;
}
<div></div>
You can place the DIVs on top of each other, with position:absolute. Then your DIVs need a width in order to be visible. Each DIV now can have a z-index with which you can determine who goes on top.
See this fork of your pen.
You can use multiple backgrounds for just one div, using css3, like so:
background:
url(3.png) 600px 10px no-repeat, /* On top, like z-index: 3; */
url(2.png) 100px 100px no-repeat, /* like z-index: 2; */
url(1.png) 50px 50px no-repeat; /* On bottom, like z-index: 1; */
The example code above uses shorthand, but you can also write it like this:
background: url(3.png), url(2.png), url(1.png);/*left to right: top, middle, bottom*/
background-size: 600px 10px, 100px 100px, 50px 50px;
Learn more about multiple backgrounds.
Try out this one :
<div id="container">
<div id="main_image"></div>
<div id="overlay_image"></div>
</div>
#container{
position: relative;
width: 200px;
height: 200px;
}
#main_image{
width: 100%;
height: 100%;
background: blue;
}
#overlay_image{
position: absolute;
bottom: 10px;
right: 10px;
width: 30px;
height: 30px;
background: red;
}
in your case you might just need to change the
background : url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
also you need to adjust the pixel of the images .
Hope this helps