I'm having an issue where overflow:hidden doesn't seem to be working on a skewed container. I have an issue that requires a box shadow on the outer container with an inner image that extends to the top and bottom of the outer container.
For some reason placing the overflow:hidden on the .skew-container doesn't seem to be hiding the top of the image as expected.
.skew-container {
position: relative;
}
.skew-container:before {
-webkit-transform: skewY(-2.3deg);
-moz-transform: skewY(-2.3deg);
-ms-transform: skewY(-2.3deg);
-o-transform: skewY(-2.3deg);
transform: skewY(-2.3deg);
position: absolute;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 0;
content: "";
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.skew-container:after {
content: "";
display: block;
position: relative;
z-index: 3;
left: 0;
right: 0;
bottom: 5px;
height: 10px;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotate(-2.3deg);
-webkit-box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
}
.level-container {
background-color: green;
}
I have attached a jsfiddle below:
https://jsfiddle.net/eilawen/yy7pL7by/
If anyone could provide any solutions or alternative solutions to the issue it would be appreciated. I have tried using clip-path but unfortunately came across issues applying a box shadow along with positioning the skewed containers right next to each other on the top and bottom.
Thanks in advance.
Related
I am creating a triangle with pointing towards bottom using html and css. Here I need to reduce the top width and increase the height of down pointer little bit, I tried with lots of modification, it does not work.
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
bottom: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}
.triangle-with-shadow:hover, .triangle-with-shadow:hover:after {
box-shadow: none;
}
<div class="triangle-with-shadow"></div>
In CSS everything is treated as rectangle (BOX-MODEL). It’s annoying, but makes sense, If you try to apply box-shadow on rectangle layout, it's back-breaking task. So Instated of using box-shadow you can use Filter drop-shadow. Filters are not bound to the box model. That means the outline of our triangle is recognized and the transparency around it is ignored so that the intended shape receives the shadow.
Try this code:
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
border-style: solid;
border-width: 40px 20px 0 20px;
border-color: #999 transparent transparent transparent;
-webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.5));
}
.triangle-with-shadow:hover,
.triangle-with-shadow:hover:after {
box-shadow: none;
}
<div class="triangle-with-shadow"></div>
I'm trying to build simple pricing table using bootstrap 4 card element, but i can't find solution to one problem.
.card {
border: 0;
border-radius: 0px;
-webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
transition: all .3s ease-in-out;
padding: 2.25rem 0;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
border: 3px solid $primary-color;
transition: 0.5s;
}
&:hover {
transform: scale(1.05);
-webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
&:after {
border: 3px solid $primary-color;
width: 100%;
}
Live Codepen
This is code responsible for drawing line in top part of the tables on the hover. The problem is i have no idea how to hide this small green rectangle in the left top corner of each table. I was trying to make border white and change to green once customer hover table. It works, but then fade effect is visible. I would prefer to keep it as it's now, just somehow get rid of this rectangle.
Remove border from :after and add height: 3px instead, also remove border from :after on :hover
.card {
border: 0;
border-radius: 0px;
-webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
transition: all .3s ease-in-out;
padding: 2.25rem 0;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: $primary-color;
transition: 0.5s;
}
&:hover {
transform: scale(1.05);
-webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
&:after {
width: 100%;
}
For some strange reason Safari only allows me to scroll downward with the two finger gesture inside an iFrame. However, if I use the scroll bar I can scroll up and down. WTF?!
This is the html and css for the iframe and its wrapper.
#iframe-wrapper {
-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
height: 312px;
}
#iframe-wrapper>iframe {
border-radius: 4px;
background-color: white;
border: none;
-webkit-box-shadow: inset 0px 0px 15px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 0px 15px -5px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px 0px 15px -5px rgba(0, 0, 0, 0.75);
}
.fixed-window {
position: fixed;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
left: 0;
right: 0;
}
.popup {
margin: -100px auto 100px;
position: absolute;
border: 0px solid white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.4);
max-width: 720px;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
#container {
padding: 0 40px;
}
<div class="fixed-window">
<div class="popup">
<div id="container">
<div class="on-submit-hide">
<div id="iframe-wrapper">
<iframe height="100%" width="100%" src="http://www.lipsum.com/feed/html">
</iframe>
</div>
</div>
</div>
</div>
</div>
Why is this happening, is it a Safari bug?? Does anyone else have this problem? In the rest of the browsers it works fine, including ie9 :weary:.
I'm looking for a special CSS (3?) border effect: when applied, it looked like the corners of the objects stand out a bit more then the middle of the sides. Which produces a nice effect as if a piece of paper would be lying on the website.
How do you call this effect?
This page contains a good looking "bent paper" shadow effect, with pure CSS:
http://matthamm.com/box-shadow-curl.html
Sample code for the shadow effect on <li> element from the source above:
HTML:
<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }
Note: If you are using a parent element. Make sure that the parent div has position: relative; z-index: 99; or those shadows won’t show up.
You can do this with CSS3 box-shadow and transforms. E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {
width: 215px;
height: 80px;
border: 1px solid #ccc;
position: relative;
background: white;
}
div::before, div::after {
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
position: absolute;
left: 10px;
bottom: 12px;
z-index: -1;
width: 50%;
max-width: 100px;
height: 20px;
content: "";
}
div::after {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
http://codepen.io/anon/pen/JuwLd
You can do this with a little trick of setting the border width to different sizes. For example:
div{
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
width: 200px;
height: 400px;
}
Example
Don't know how this is called, though.
How would I have a top right corner div as shown in the image. I want to do something similar though not exactly the same. I think the text is not an image.
Also, I have seen some websites that has a page hover effect when a mouse is over the top right section. Any idea how to do that?
If the text isn't an image, none of the other answers will work. Here is some css that rotates a div 45 degrees and works in IE + FF + Webkit.
#yourdiv
{
top: 0px;
right: 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11='0.7071067811865476', M12='-0.7071067811865475', M21='0.7071067811865475', M22='0.7071067811865476', sizingMethod='auto expand');
}
Make sure it's a transparent PNG
#Element {
position: fixed;
top:0;
right:0;
z-index:10;
}
(An element with greater stack order is always in front of an element with a lower stack order.)
div.topRight {
position: absolute;
top: 0%;
right: 0%;
}
This will assign a division with class set as 'topRight' to the top right corner. I'm sure you can figure out how to get the image to show up properly from that. Make sure you set the proper width and height on it. As for hovering, what exact effects do you want? You can modify the CSS on hover easily, if that's all you want to do.
div.topRight:hover {
// new css rules
}
you may want to take a look at this JSFiddle:
Css:
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
html:
<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>
I'm assuming you want fixed positioning.
#Element {
position: fixed;
top:0;
right:0;
}