I'm trying to create vertical angled effect using css3 and transform:skewY(). Problem is that when I use -moz-transform-origin to start from the bottom left corner of the screen firefox does not work as the rest of implementations do. Effect works as expected in chrome, safari and edge. Problem can be seen here.
Code I'm using is as follows.
.skew-heading {
height: 100vh;
background: #0A996F;
position: relative;
z-index: 1;
}
.skew-heading:after {
content: '';
height: 400px;
width: 100%;
display: block;
position: relative;
left: 0;
top: 0px;
background: white;
z-index: -1;
}
.skew-heading-2:after {
-webkit-transform: skewY(-9deg);
-moz-transform: skewY(-9deg);
-ms-transform: skewY(-9deg);
-o-transform: skewY(-9deg);
transform: skewY(-9deg);
-webkit-transform-origin:0 0;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
}
Related
Here's what I want to achieve:
slanted div:
HTML:
<span class="container">
<span class="element">some dummy text</span>
</span>
CSS:
.container .element {
font-size: 24px;
background-color: gray;
padding: 5px;
position: relative;
}
.container .element:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
}
.container .element:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(0deg, -1deg);
-webkit-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
}
https://jsfiddle.net/mktcany9/
I can't really make it like on the image, even though there is a lot of topics about similar divs.
This might help you.
The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowing parts are hidden with overflow:hidden;.
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
body {
background: #fff;
}
<div>slanted div text</div>
<div>
slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>
How to make a 3 div with distortion, as shown in the picture?
I have made this:
.cars {
width: 100%;
height: 500px;
}
.car {
width: 33.33333333%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.car:nth-child(2) {
background: #000
}
.car:nth-child(3) {
background: #ff0000
}
<div class="cars">
<div class="car"></div>
<div class="car"></div>
<div class="car"></div>
</div>
jsFiddle
Left div - left corner straight, right corner slanted
Center div - left and right corner slanted
Right div - left corner slanted, right corner straight
I have used CSS's :after pseudo class to add another red box after the last, slanted one. However this one isn't slanted, thus 'filling in' the bit of the slant that you don't want:
.car:nth-child(3):after {
/* create the box */
content: "";
display: block;
/* make it fill the required space */
width: 80%; /* (this is only 80 because it was a bit large at 100) */
height: 100%;
background: #ff0000;
/* transform it in the opposite direction to counter the -10deg skew of .car */
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -20%; /* counteract the 80% width */
}
I did the same with the first div, and :before:
.car:nth-child(3):before{
content: "";
display: block;
width: 70%;
height: 100%;
background: #3498db;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.cars {
width: 100%;
height: 500px;
margin-left: 100px;
}
.car {
width: 33.33333333%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.car:nth-child(2) {
background: #000;
}
.car:nth-child(3) {
background: #ff0000;
}
.car:nth-child(3):after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #ff0000;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.car:nth-child(1):before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #3498db;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
<div class="cars">
<div class="car first"></div>
<div class="car"></div>
<div class="car last"></div>
</div>
<br><br>
Following this question, I created a JSFiddle, but the output doesn't seem so good:
Here is the CSS, taken from the answer there:
#heart {
position: relative;
width: 100px;
height: 90px;
margin-top: 10px;
/* leave some space above */
}
#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
#heart:before {
-webkit-transform: rotate(-45deg);
/* 45 degrees rotation counter clockwise */
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
/* Rotate it around the bottom-left corner */
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
/* placing the right part properly */
-webkit-transform: rotate(45deg);
/* rotating 45 degrees clockwise */
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
/* rotation is around bottom-right corner this time */
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Did I miss something, or that love got old (it's about 2 years old)?
I was messing around a bit with your JSfiddle and I noticed that you were only drawing one side of your heart :(
Here's the updated CSS that will fix your poor broken heart
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
Here's a link to the working JSfiddle: https://jsfiddle.net/arfc63Le/1/
You missed the second selector for your second CSS rule.
The four rules should be:
#heart {}
#heart:before,
#heart:after {}
#heart:before [}
#heart:after {}
Here is the full demo:
#heart {
position: relative;
width: 100px;
height: 90px;
margin-top: 10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
top: 0;
width: 52px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
}
#heart:before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
<div id="heart"></div>
Looks like you missed one of the steps. It isn't very obvious in the other answer.
You need a copy of
#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
for #heart:after. So you need to add the following and it works (JSFiddle)
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
How to place an image centrally over another image?
I tried the answers from so many similar questions, but none of them work for me.
Basically I need the 2 images to become 1 and
it MUST be RESPONSIVE(so the size changes automatically when different screen size devices access the web page.)
The heart and ring should remain the same position to each other when user resize his or her screen(or web page window size etc.)
I am trying to use css to draw both the ring and the heart, but it is okay if you really need the picture to replace the ring or heart.
Here is my code, I have been working on it for hours but haven't got any good luck.
http://jsfiddle.net/4u6tfacw/
Thank you.
Here is my code
<div id="logo">
<div id="heart-container">
</div>
<div id="heart">
</div>
</div>
#logo {
width: 50%;
height: 50%;
}
#heart {
display: block;
position: absolute;
top: 70px;
left: 30px;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
width: 220px;
height: 220px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 90px;
top: 0;
width: 90px;
height: 130px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Well, here is my attempt to satisfy the requirements of the question — which is not only about putting an image/element over another one, but about achieving that in a responsive manner.
Key points
Using a percentage value on bottom padding to make elements' heights respect their width1.
Using percentage values on top, right, left, bottom offsets as well as width and height properties2.
Using a high value in pixels on border-radius instead of percentage — for instance 1000px.
And number four... well, the last step is trial and error!
Example on JSFiddle.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#logo {
width: 50%;
/* height: 50%; */
position: relative;
}
#logo:after {
content: "";
display: block;
padding-bottom: 70%;
}
#heart {
position: absolute;
top: 26%;
left: 35%;
z-index: 1;
width: 70%;
height: 100%;
}
#heart-container {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 70%;
/* height: 70%; */
border-radius: 50%;
behavior: url(PIE.htc);
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart-container:after {
content: "";
display: block;
padding-bottom: 100%;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 39.130434782608695652173913043478%;
height: 56.521739130434782608695652173913%;
background: red;
-moz-border-radius: 1000px 1000px 0 0;
border-radius: 1000px 1000px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: -38.9%;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container"></div>
<div id="heart"></div>
</div>
1 Have a look at Responsive Container section of this topic.
2 To find exact values, we can position/size things in an absolute length — like px — and then just measure things relative to each other.
If you want to go responsive, you'd have to drop all the fixed (pixel) units and use percentages unless you plan to have several versions depending on the screen size and in that case you can use media queries.
So, the idea is to use percentages for paddings, margins, etc... and I've replaced the fixed width/height definitions you had with percentual padding, which made the circle responsive. See if you can do the same for the heart (I think using an image might save you a lot of time here).
#logo {
width: 50%;
height: 50%;
position: relative;
}
#heart {
display: block;
position: absolute;
margin: 18% 14%;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
padding: 50%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
padding: 50%;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 90px;
top: 0;
width: 90px;
height: 130px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container">
</div>
<div id="heart">
</div>
</div>
And the fiddle: http://jsfiddle.net/fzgd6cv8/
Let me know if you have trouble doing the same thing for the heart.
UPDATE
Here's my attempt for the heart, probably needs a bit of number tweaking:
#logo {
width: 50%;
height: 50%;
position: relative;
}
#heart {
display: block;
position: absolute;
margin: 20% 14% 0 9%;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
padding: 50%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
padding: 50%;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 60%;
top: 0;
width: 60%;
padding-top: 100%;
background: red;
-moz-border-radius: 150% 150% 0 0;
border-radius: 150% 150% 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container">
</div>
<div id="heart"></div>
</div>
http://jsfiddle.net/fzgd6cv8/2/
I would like to make a diamond shape with a image background. I can do it, the only problem is the image seems to rotate at the same time which i do not want. This also needs to work in ie8
fiddle:http://jsfiddle.net/zangief007/2bft2rcx/1/
#diamond {
width: 80px;
height: 80px;
background: purple;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
Try removing the rotation and adding
#diamond:before, #diamond:after{
content: '';
border: 80px solid transparent;
position: absolute;
top: 50%;
margin-top: -80px;
z-index: -1;
}
#diamond:before {
border-right-color: #ccc;
border-left: none;
right: 50%;
}
#diamond:after {
border-left-color: #ccc;
border-right: none;
left: 50%;
}
Demo