I have a small problem, I want to create 45 degree shadow for a picture. But if I use my code my object is rotating too. So I would like to ask for help with this problem.
My code:
.item {
box-shadow: -50px 80px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
Most flexible answer using only CSS is probably this:
.item {
position: relative; /* or absolute */
}
.item:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
box-shadow: -50px 80px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
You can do it using peudo-element (I've used arbitrary values, you need to tweak it yourself) :
.item {
margin-left: 50%;
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
.item:before {
z-index: -1;
position: absolute;
content: "";
display: block;
width: 100px;
height: 100px;
top: -30px;
left: 0;
background-color: transparent;
box-shadow: -50px 120px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
<div class="item"></div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
View Image
Look at the shadow at the bottom of the above popup how do I get this type of shadow
body{
background: rgba(135,206,250, 0.5);
}
.card {
width: 500px;
height: 250px;
background: white;
}
<div class="card">
</div>
body{
background: rgba(135,206,250, 0.5);
}
.card {
width: 500px;
height: 250px;
background: white;
}
.shadow
{
position: relative;
}
.shadow:before, .shadow:after
{
position: absolute;
z-index: -1;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
-webkit-box-shadow: 0 35px 20px #989898;
-moz-box-shadow: 0 35px 20px #989898;
box-shadow: 0 35px 20px #989898 ;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.shadow:after
{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
right: 10px;
left: auto;
}
<!DOCTYPE html>
<html>
<body>
<div class="card shadow">
</div>
</body>
</html>
You have to use css pseudo element along with transform: rotate
Try following snippet.
body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.shadow {
position: relative;
}
.shadow:before,
.shadow:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.shadow:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="box shadow">
<h3>test of the week?</h3>
</div>
I'm having trouble on how to achieve making the X stay at the middle during transform. It looks like the issue only occur in Firefox browser between Chrome and FF.
I'm using FF Quantum 58.0.2 and the X moves to the top, in Chrome I have no issues.
I tried to add top: 50%; in the pseudo element selector but during rotation the X moves few pixels to the bottom. Is there any other way to achieve this in Firefox like it does in Chrome?
.close >.x-button{
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
position: absolute;
content: '';
width: 100%;
height: 0.08em;
}
.close:hover >.x-button{
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
background-color: #FD0030;
}
.close >.x-button::before{
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close >.x-button::after{
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<button class="close">
<span class="x-button"></span>
</button>
You could also add bottom: 0.20em on
.close >.x-button::before,
.close >.x-button::after
to fix it on all browsers.
Why .20em? .25em is half the icon's dimension and .5em is half the top and bottom margin.
Firefox:
Snippet:
.close>.x-button {
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close>.x-button::before,
.close>.x-button::after {
position: absolute;
content: '';
width: 100%;
height: 0.08em;
/* new */
bottom: .20em;
}
.close:hover>.x-button {
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover>.x-button::before,
.close:hover>.x-button::after {
background-color: #FD0030;
}
.close>.x-button::before {
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close>.x-button::after {
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<button class="close">
<span class="x-button"></span>
</button>
You can vertically center the before and after like you do with any position absolute elements
Give it a top: 50% and transform: translateY(-50%)
I verified this on Mac FF
.close >.x-button{
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
position: absolute;
content: '';
width: 100%;
height: 0.08em;
top: 50%;
}
.close:hover >.x-button{
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
background-color: #FD0030;
}
.close >.x-button::before{
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translateY(-50%);
}
.close >.x-button::after{
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translateY(-50%);
}
<button class="close">
<span class="x-button"></span>
</button>
div.tp-border-bottom's border hide when div.tp-banner add transform property, if I set div.tp-border-bottom:after element height to 2px then it is visible, all of this in android webview platform
.tp-banner {
width: 100px;
height: 60px;
-webkit-transform: translate(0px, 0px) translateZ(0px);
transform: translate(0px, 0px) translateZ(0px);
}
.tp-border-bottom {
position: relative;
width: 100px;
height: 60px;
}
.tp-border-bottom:after {
content: "";
position: absolute;
font-size: 0;
line-height: 0;
background-color: #e1e1e1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform-origin: 0 1px;
-ms-transform-origin: 0 1px;
transform-origin: 0 1px;
}
.tp-border-scale:after {
-webkit-transform: scaleY(0.3333);
-ms-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
/*#media only screen and (-webkit-min-device-pixel-ratio: 3) {
.tp-border-bottom:after {
-webkit-transform: scaleY(0.3333);
-ms-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
}*/
<div class="tp-banner"></div>
<div class="tp-border-bottom tp-border-scale"></div>
Try to add this style to all the transformed elements:
-webkit-backface-visibility: hidden;
Taken from similar question CSS3 hover effects make weird impact on other elements in Chrome
This is my HTML code:
<style>
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
border:#000000 solid 2px;
width:500px;
height:500px;
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0%;
left: 0%;
z-index: -1;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
background: url(image.jpg) 0 0 no-repeat;
}
</style>
<div id="myelement"></div>
This is image.jpg file:
This is output of browser:
Here, background image is fixed and container is rotating. I want to make reverse. i,e Container will be fixed and background will rotate.
If I understood your question properly, you only need to apply transform: rotate on the pseudo-element which has the background and nothing on the container (like in the below snippet).
#myelement {
position: relative;
overflow: hidden;
border: #000000 solid 2px;
width: 100px;
height: 100px;
}
#myelement:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: -1;
transform: rotate(30deg);
background: url(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;
}
<div id="myelement"></div>
I want to create something like this via CSS.
Just want to use only CSS to create this custom shape with border radius. Any ideas please?
You can overlap a few div tags and use the skew effect.
HTML
<div class="container">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
<div class="shape shape3"></div>
</div>
CSS
.container {
position: relative;
padding: 30px;
}
.shape {
position: absolute;
text-align: center;
padding: 12px;
height: 60px;
width: 200px;
}
.shape:after {
border-radius: 5px;
content: '';
position: absolute;
height: 100%;
width: 100%;
background: green;
top: 0;
left: 0;
}
.shape1:after {
-webkit-transform: skew(-5deg, -3deg);
-moz-transform: skew(-5deg, -3deg);
-ms-transform: skew(-5deg, -3deg);
-o-transform: skew(-5deg, -3deg);
transform: skew(-5deg, -3deg);
}
.shape2:after {
-webkit-transform: skew(0deg, -1deg);
-moz-transform: skew(0deg, -1deg);
-ms-transform: skew(0deg, -1deg);
-o-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
top: 4px;
left: 3px;
}
.shape3:after {
-webkit-transform: skew(3deg, -2deg);
-moz-transform: skew(2deg, -2deg);
-ms-transform: skew(2deg, -2deg);
-o-transform: skew(2deg, -2deg);
transform: skew(2deg, -2deg);
top: 2px;
left: -5px;
}
.set2 {
margin-top: 80px;
}
.set2 .shape2:after {
background: red;
}
.set2 .shape3:after {
background: blue;
}
Here's a jsFiddle
You may want to look into CSS3 2D Transforms. It's possible to do similar things, but there are limitations as well. I tried to do something similar to the referenced shape :)
// CSS
#shape {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
margin:30px;
}
#shape:after {
border-radius: 5px;
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background: green;
-webkit-transform: skew(-5deg, -3deg);
-moz-transform: skew(-5deg, -3deg);
-ms-transform: skew(-5deg, -3deg);
-o-transform: skew(-5deg, -3deg);
transform: skew(-5deg, -3deg);
}
// HTML
<div id="shape"></div>
Check the jsFiddle