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:.
Related
Hi everyone thank you for taking the time. I am trying to add the nav-bar that is out of place inside of a container. This is the HTML
<div class="container-login100" style="background-image: url('images/packages.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
<div class="nav-container">
<nav class="nav-bar-outer">
<buttton type="button" class="hamburger-btn"> HERE </buttton>
</nav>
</div>
<form class="login100-form validate-form">
<!--css form content-->
And this is the CSS.
[ Nav-Bar ]*/
.nav-container{
position: absolute;
width: auto;
}
.nav-bar-outer{
background-color: #ffbf00;
padding:5px;
height:50px;
width:390px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-position: center;
background-size: cover;
position: relative;
}
.wrap-login100 {
border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
width: 390px;
background: rgba(0, 0, 0, 1);
overflow: hidden;
box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
}
.login100-form {
width: 100%;
}
.p-l-55 {padding-left: 55px;}
.p-b-30 {padding-bottom: 30px;}
.p-r-55 {padding-right: 55px;}
.p-t-80 {padding-top: 80px;}
.p-b-37 {padding-bottom: 37px;}
So I think because there is padding in the black container the bar is not positioning itself like I would like to how could it fit inside the container without me having to change the padding (since the content inside would get messed up)
Please add this new CSS to your CSS file.
.wrap-login100 {
position: relative;
}
.nav-container {
position: absolute;
width: auto;
left: 55px;
right: 55px;
}
.nav-bar-outer {
width: 100%;
padding: 0;
}
As you can see below, I have two items with similar effect.
In the first case i use an overlay element in order to achieve the effect as you see it.
What I want is to have the same effect but with shadow not the overlay trick.
What I can't achieve is to make the shadow start 20px from top but have zero oveflow from the bottom as you see it in the first item.
Is it possible with css shadow to achieve the same thing or I have to go with the first option?
.container {
padding: 20px;
}
.item, .desired-item {
max-width: 300px;
height: 300px;
position: relative;
}
.desired-item {
padding-top: 25px;
}
figure {
width: 100%;
padding: 0;
margin: 0;
}
figure img {
width: 100%
}
.item .overlay {
position: absolute;
background-color: #ff6666;
width: 100%;
height: calc(100% - 20px);
visibility: visible;
opacity: 1;
z-index: -1;
right: -20px;
transition: all .25s;
margin-top: 20px;
}
.item figure:hover .overlay {
visibility: visible;
opacity: 0.3;
z-index: 1;
right: 0;
height: calc(100% - 0px);
margin-top: 0;
}
.desired-item figure:hover {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
}
.desired-item figure {
-webkit-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
transition: all .5s;
}
<div class="container">
<h2>overlay effect:</h2>
<div class="item">
<figure>
<div class="overlay"></div>
<img src="https://via.placeholder.com/600x600.jpg/09f/fff">
</figure>
</div>
<h2>Shadow effect:</h2>
<div class="desired-item">
<figure>
<div class="overlay"></div>
<img src="https://via.placeholder.com/600x600.jpg/09f/fff">
</figure>
</div>
</div>
Apply the shadow on the image and rely on overflow to hide the non needed part:
figure img {
display:block;
box-shadow: 20px 20px 0px 0px rgba(0, 0, 0, 0.75);
transition: all .5s;
}
figure:hover img {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75);
}
figure {
display:inline-block;
padding-right:20px;
overflow: hidden;
}
<figure>
<img src="https://via.placeholder.com/150x150.jpg/09f/fff">
</figure>
I'm trying to have a skewed element change size on hover but for whatever reason, the elements only change whenever the mouse is about 200px below where it should be. I'm guessing this is either happening because of the way I transformed the elements or because of the way I positioned them on the page.
Code below
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
perspective: 1000px;
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->
Try putting the transform: rotateX(75deg); on .layer instead of its child image, like so:
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
perspective: 1000px;
}
.layer {
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->
Try replacing perspective: 1000px with transform: perspective(1000px)
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
//-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
transform: perspective(1000px);
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->
Explanation from CSS-Tricks:
[...] the perspective property doesn't affect how the element is
rendered; it simply enables a 3D-space for children elements. This is
the main difference between the transform: perspective() function and
the perspective property. The first gives element depth while the
later creates a 3D-space shared by all its transformed children.
I need to make this using only css and css3 drop shadows
Please help to make like this using css...
Image : http://technocodes.us/Lab/Html/vidbees/img/frame.png
ADDED MORE TO THE ANSWER:
I looked into this. I believe this is the solution. Not using images at all, only CSS.
This is not the full solution, but I believe this is the solution. You should get the idea and solution to run from from here I think:
This is the result:
(Here is the fiddle: http://jsfiddle.net/uwfL5azw/3/ )
Here is the place that inspired me, and I lend code from: http://www.themeshock.com/css-drop-shadow/
The HTML:
<div class="main-box">
<div class="box_shadow">Here is my content
<div class="sh_bottom"></div>
</div>
</div>
The CSS:
.main-box {
padding: 0 0 0 30px; /*just for the box's content*/
}
.sh_bottom:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 150px;
height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-10deg,-10deg) translate(40px,-15px);
transform: skew(-10deg,-10deg) translate(40px,-15px);
-moz-transform: skew(-10deg,-10deg) translate(40px,-15px);
}
.sh_bottom:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 150px;
height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.3);
box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(10deg,10deg) translate(-40px,-15px);
-webkit-transform: skew(10deg,10deg) translate(-40px,-15px);
transform: skew(10deg,10deg) translate(-40px,-15px);
}
.box_shadow {
padding:20px;
width: 374px;
min-height: 200px;
margin: auto;
background: #ccc;
border: 5px solid white;
position: relative;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 1px;
}
MORE:
See fiddle: http://jsfiddle.net/uwfL5azw/5/
This is only a little example of drop shadows.
For an example more helpful, I need of you code, or a web page with a result similar at your.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<div>Hello world!</div>
Thank you and bye,
Giacomo
How about this it is made of two divs
#box {
width:200px;
height:200px;
background:grey;
margin:20px;
border:2px solid white;
box-shadow:0px 16px 20px black;
}
#b {
position:absolute;
width: 0px;
height: 0px;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 100px solid white;
margin-left:-130px;
margin-top:-17px;
}
<div id="box"></div>
<div id="b"></div>
Without using two divs [Fiddle]http://jsfiddle.net/udq412fe/3/)
#box {
width:200px;
height:200px;
background:grey;
margin:20px;
border:2px solid white;
box-shadow:0px 16px 20px black;
}
#b {
position:absolute;
width: 0px;
height: 0px;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 100px solid white;
margin-left:-130px;
margin-top:-17px;
}
<div id="box"></div>
I have a problem with CSS3 Shadows that I did not expirience before.
It seems like a box-shadow, that is applied to a div via the :before and :after selector, is only possible, if the container of the div has no background-color set.
Is there any way to make this possible?
<div class="container">
<div class="shadow-box">
test
</div>
</div>
The .container must not have a background-color set. I created an example on http://jsfiddle.net/v1utr15n/
You need to make sure that the .container will start a new stacking order. You can do this by either setting a position: relative; z-index: 0 or a opacity other than 1, e.g. opacity: .9999.
.container {
background-color: #fff;
height: 500px;
position: relative;
z-index: 0;
}
.shadow-box {
background-color: #fff;
position: relative;
width: 300px;
height: 300px;
}
.shadow-box:before,
.shadow-box:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
<div class="container">
<div class="shadow-box">
test
</div>
</div>
See http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ for some background information on z-index and stacking order context.
Put the code of the box-shadow in the shadow-box class, not in before or after.
URL: http://jsfiddle.net/v1utr15n/1/
.container {
background-color: #fff;
height: 500px;
}
.shadow-box {
background-color: #fff;
position: relative;
width: 300px;
height: 300px;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
.shadow-box:before,
.shadow-box:after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
<div class="container">
<div class="shadow-box">
Shadow box
</div>
</div>