I found a code for light box using a simple java script from here. The problem here is the transparent background is not coming when i scroll down the page.Here is my css
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border-radius:10px;
background-color: white;
z-index:1002;
overflow: auto;
}
and what i got is jsfiddle
please give me some suggesstions
Thanks for reading :)
try this one,
.black_overlay {
display: none;
position:fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.5;
opacity:.50;
filter: alpha(opacity=50);
}
.white_content {
display: none;
position:fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border-radius:10px;
background-color: white;
z-index:1002;
overflow: auto;
}
http://jsfiddle.net/Jz4Zq/2/
You are using height:100% which uses the 100% height for the element it is contained in. You will have to adjust the top property of the element when scrolling, or setting the height by javascript.
Related
I have a simple css styling question. I've been trying to create this effect on a background to match a design but i just can't seem to get it right.
Here is what I have
And here is the design
does anyone have any tips to help me create that background effect? any help would be appreciated.
My code right now, if it helps:
.backgroundOverlay {
background-image: url('../images/background-pattern.png'), linear-
gradient(to bottom right, rgba(0,118,255,0.8), rgba(0,197,255,0.8));
/* opacity: 0.3; */
height: 100vh;
width: 100vw;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
/* padding: 15vw 5vw; */
}
The background image is just a repeated .png file
Thank you in advance
Use this:
.container{
width: 100%;
height: 300px;
border: 1px solid #000;
position: relative;
}
.container .content{
position: absolute;
z-index:999;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container::after{
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index:99;
background-image: url("path/to/yourfile.png");
background-size: repeat;
opacity: 0.4;
}
<div class="container">
<div class="content">
<img src="path/to/your/upper_frame.png" />
</div>
</div>
I have the following JSFiddle, which positions an "X" to the left of a pop-out window: http://jsfiddle.net/XDaEk/601/
CSS:
.x {
display: none;
position: fixed;
top: 25%;
left:60px;
transition: transform .25s ease-in-out;
}
.x:before {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 32px;
height: 0;
border-top: 3px solid black;
transform: rotate(45deg);
transform-origin: center;
}
.x:after {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 32px;
height: 0;
border-top: 3px solid black;
transform: rotate(-45deg);
transform-origin: center;
}
.alert-div {
display:none;
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
padding-left: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-top: 50px;
background-color: white;
color: white;
opacity:0.7;
overflow-y: auto;
}
HTML
<div class="alert-div2"> <div class="x"></div>Sed ut perspiciatis, unde omnis …</div>
If I copy this exact same CSS & HTML into my file on byethost.com, the "x" appears in the center of the screen. I surrounded the CSS with <style type="text/css"> </style> in the head. The HTML is in the body. I've tried copying this CSS & HTML into another JSFiddle and it works, so it seems to have something to do with Byethost.
There are no console errors related to this.
Here's the actual site. The button to show pop out is at the very bottom. It says "Post Message" http://carouseltest.byethost8.com/aplayground.php (Neither of the 2 errors on the console have to do with this code. They were there before I added this.)
Here's a photo of how it appears on Byethost: http://imgur.com/a/BSzER
Looks like position: fixed is being overridden (although it's difficult to be certain when it's not reproducible). Try updating to:
.x {
display: none;
/* add !important in case this is what's getting zapped and affecting layout */
position: fixed !important;
top: 25%;
left:60px;
transition: transform .25s ease-in-out;
}
I'm trying to redo a client site that's currently not responsive and throughout the site she has long images that are trapezoids with text inside. Of course, on devices, you can barely read it.
So I'm trying to turn it into CSS using shapes. Tried a bunch of examples but nothing working at the moment. I think the difference is the examples seem to use hard width numbers instead of 100% for fluid width. I have a pen here: https://codepen.io/anon/pen/KmgoqE and here's the code I'm playing with as I post this (still playing, of course):
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -4%;
bottom: -11%;
left: -3%;
right: -3%;
z-index: -1;
-webkit-transform: perspective(50em) rotateX(-30deg);
transform: perspective(50em) rotateX(-30deg)
}
You have already good answers
To give another try. I have opted to fix your current attempt.
Basically the problem is that the background should be on the pseudo instead of on the base
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: perspective(20em) rotateX(-45deg);
transform-origin: top;
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
And now a fancy efect
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
perspective: 20em;
animation: tilt 2s infinite alternate linear;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: rotateX(-45deg);
transform-origin: top;
}
#keyframes tilt {
from {perspective-origin: left}
to {perspective-origin: right}
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
By using pseudo elements, and skew them, you can achieve that.
This one works if the line breaks up to 3 lines, and if you need more, a media query will fix that.
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
width: calc(100% - 120px);
margin: 0 auto;
text-align: center;
position: relative;
}
h2.test-text:before,
h2.test-text:after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 70px;
background: inherit;
z-index: -1;
}
h2.test-text:before {
left: -35px;
transform: skewX(30deg)
}
h2.test-text:after {
right: -35px;
transform: skewX(-30deg)
}
h2.test-text.nr2 {
margin-top: 20px;
width: calc(60% - 100px);
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
<h2 class="test-text nr2">Check out what our Clients are Saying</h2>
You can achieve this effect by using the the common transparent border trick to achieve css triangles. Just instead of even borders and only one set to non-transparent you use different border sizes and two colors. I colored the right edge differently so it's easier to see what's going on.
h2.test-text {
background: #bada55;
color: #FFF;
font-size: 30px;
padding: 5px;
line-height: 1;
width: 80%;
text-align: center;
position: relative;
margin:40px;
}
h2.test-text:before, h2.test-text:after {
content:"";position:absolute;top:0;width:0;height:0;
border-style:solid;
border-width:20px 15px;
}
h2.test-text:before{
left: -30px;
border-color: #bada55 #bada55 transparent transparent;
}
h2.test-text:after {
right: -30px;
border-color:blue transparent transparent red;
}
<h2 class="test-text">Whatever somebody says…</h2>
Using this block of code to create an overlay and a box.
problem: the box is inheriting the opacity of parent and I will like it to have no transparency.
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
text-align: center;
}
#formed{
background-color: white;
width:300px;
height:200px;
position:relative;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
<div id="overlay"><div id="formed">Enter Here</div></div>
That's the way it works, unfortunately. For the parent div, you can try using RGBA for the background color - background: rgba(0, 0, 0, 0.5); http://css-tricks.com/rgba-browser-support/
For something like this (assuming you don't need to support IE7 or earlier), apply the opacity to a pseudo-element as this fiddle does. Code:
CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
text-align: center;
}
#overlay:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 0;
}
#formed{
background-color: white;
width:300px;
height:200px;
position:relative;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
z-index: 1;
}
Thanks Guys. I was able to solve the problem by doing two things:
Taking the child div outside it's parent.
<div id="overlay"></div><div id="formed">Here</div>
Altering the positioning of both div's
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
text-align: center;
display: none;
}
#formed{
/* for IE */
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: white;
width:300px;
height:200px;
position: absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
z-index: 12000;
border: 2px solid #eee;
display: none;
}
Here's an example as an image:
I want to style page elements like this using CSS, though. I can't seem to get it to work with border styles. Help appreciated.
You could also do it with two skewed pseudo-elements. Support is the same as for box-shadow: everything except IE8/7 and Opera Mini.
live demo
HTML:
<div class='box'></div>
CSS:
.box {
position: relative;
margin: 10em auto 0;
width: 20em; height: 20em;
background: dimgrey;
}
.box:before, .box:after {
position: absolute;
transform-origin: bottom right;
content: '';
}
.box:before {
top: 0; right: 100%; bottom: 0;
width: 4em;
background: darkgrey;
transform: skewY(45deg);
}
.box:after {
right: 0; bottom: 100%; left: 0;
height: 4em;
background: silver;
transform: skewX(45deg);
}