Live site- http://uposonghar.com/new-video/
If you go to that site then hover on embedded YouTube video then 2 sharing button will appear, 1 for facebook & 1 for twitter. After clicking on that button instant share window appear & after 5 second another popup will appear like that-
But that popup doesn't appear on right position, i want to make it center on vertically+horizontally.
My css code-
#reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
background: #eee;
position: fixed;
z-index: 101;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
text-align:center;
padding:20px 15px 30px;
}
If you declare the height, you could do this to keep the overlay div always be centralized both vertically and horizontally:
.reveal-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 340px; /* must be declared */
}
Check out the demo on JSFiddle.
That is a great article by Stephen Shaw with several ways of achieving absolute centering.
Easiest way I can see would be to copy the way you centered it horizontally:
.reveal-modal { top: 50%; margin-top: -186px; }
This is assuming the box height is usually consistent
Try :
.reveal-modal {
visibility: hidden;
top: 50% !important; // there
-webkit-transform: translateY(-50%); // and there
transform: translateY(-50%); // and there
left: 50%;
margin-left: -300px;
width: 520px;
background: #eee;
position: fixed;
z-index: 101;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
text-align:center;
padding:20px 15px 30px;
}
:)
You dont need to absolute center the element. Neither use CSS3 formulas. Just work with display:table-cell and vertical-align: middle.
Here is a concept of vertical and horizontal centering divs:
<div class="modal-bg">
<div class="modal">
<div class="window">Test</div>
</div>
</div>
And css:
.modal-bg
{
display:table;
width: 100%;
height: 100%;
position:fixed;
left: 0px;
top: 0px;
}
.modal
{
position: relative;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.window
{
margin: 0 auto;
width:200px;
height: 200px;
background-color: red;
}
Try it out... It will do the trick
http://jsfiddle.net/69skp/1/
first of all remove the top:300px inline style then define the height as height:50% and top:25% and it will become centered
Related
A client wants the grain effect on the box-shadow of this modal.
You can see the grain the box-shadow in the screenshot attached.
How can I achive this using CSS? I've looked but couldn't find anything.
Tried adding an after with a grain effect and applying the box-shadow to it
.grain {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: transparent url(grain.jpg) 0 0;
background-size: 320px 320px;
opacity: .1!important;
z-index: 30;
background-color: #000;
pointer-events: none;
box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.75);
}
You need to use a .png image with transparency; I found a bunch here.
Set position: relative on your element, and position: absolute on the ::after pseudo-element.
.grainy-shadow {
position: relative;
width: 200px;
height: 200px;
background: blue;
margin: 2rem;
}
.grainy-shadow::after {
content: '';
position: absolute;
top: 1rem;
left: 1rem;
bottom: -1rem;
right: -1rem;
z-index: -1;
background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png");
}
body {
background: url(https://img.freepik.com/premium-vector/colorful-random-shapes-abstract-background-geometrical-circle-background-with-copy-space-yellow_655111-46.jpg?w=2000);
}
<div class="grainy-shadow">
<h1>content</h1>
</div>
I have been trying to create this shape in the bottom left and top right corners of the page. Unfortunately, I have not been able to create the desired look the closest that I have been able to achieve is a pie shape with the following code:
<style>
/* css code that will create, color, and shape
the first accent color area */
#colorAreaOne{
width: 700px;
height: 700px;
background: #3333ff;
opacity: 0.8;
border-radius: 0 700px 0 0;
-moz-border-radius: 0 700px 0 0;
-webkit-border-radius: 0 700px 0 0;
position: fixed;
bottom: 0px;
left: 0px;
}
/* css code that will create, color, and shape
the second accent color area */
#colorAreaTwo{
width: 700px;
height: 700px;
background: #3333ff;
opacity: 0.8;
border-radius: 0 0 700px; 0;
-moz-border-radius: 0 0 700px 0;
-webkit-border-radius: 0 0 700px 0;
position: fixed;
top: 0px;
right: 0px;
}
</style>
If anyone has any information it would be much appreciated. Thank you!
A radial-gradient
div {
width: 700px;
height: 700px;
margin: 1em auto;
background-image: radial-gradient(circle at 100% 0, transparent 0%, transparent 700px, black 700px);
}
<div></div>
You may use a square and use a round pseudo to fill parts of it with a shadow
div {
height:50vw;
width:50vw;
bottom:0;
position:fixed;
overflow:hidden;
}
div:before {
content:'';
display:block;
height:100%;
border-radius:0 0 0 50% ;
box-shadow:0 0 0 50vw turquoise;
<div></div>
border-radius: 50%; overflow: hidden;
.shape{
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
.shape:after{
content: "";
position: absolute;
left: -100%;
bottom: -100%;
width: 200%;
height: 200%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 400px solid;
<div class="shape"></div>
Here is one quick solution that will work if pseudo element is same color as background.
.el {
width: 200px;
height: 200px;
background: black;
position: relative;
overflow: hidden;
margin: 50px;
}
.el:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 200%;
background: white;
border-radius: 50%;
}
<div class="el"></div>
I've looked at some other threads, but nothing seems to work. I'm trying to center a lightbox of an unknown width in the center of the page (horizontally). Any help would be appreciated. The code is as follows.
HTML
<div class="backdrop"></div>
<div class="box">
<div class="close">x</div>
<img src="../pics/placeholder.png">
</div>
CSS
.backdrop {
position: absolute;
text-align: center;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .0;
filter:alpha(opacity=0);
z-index: 50;
display: none;
}
.box {
position: absolute;
top: 20%;
width: auto;
height: auto;
background: #ffffff;
z-index: 51;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #444444;
-webkit-box-shadow: 0px 0px 5px #444444;
box-shadow: 0px 0px 5px #444444;
display: none;
}
.close {
position: absolute;
padding-left: 5px;
padding-top: 5px;
margin-left: 98%
margin-top: 4px;
cursor: pointer;
font-family: sans-serif;
}
• To center an element horizontally with position: relative use:
.element {
position: relative;
display: inline-block;
margin: 0 auto; /* We don't care about 0, but we do care about auto. */
}
• To center an element horizontally with position: absolute or position: fixed use:
.element {
position: fixed; /* Lightboxes usually use position: fixed. */
left: 50%;
transform: translateX(-50%);
}
I'm trying to center this popup but I can't seem to get it to work properly on smaller screens like iphone. It looks okay on desktop/laptop screens. Can anyone suggest any ideas how to use media queries to get it the popup to be centered properly regardless of screen size? thanks.
<style type="text/css">
#popup {
display: none;
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
top: 20%;
left:35%;
width: 25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
}
#popup-overlay {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
</style>
The easiest way to do this is to use a transform to centre the element. This will work no matter the width / height of the element
html, body {
height: 100%;
margin: 0;
}
#popup {
/*display: none;*/
background: #FFF;
border: 5px solid #444;
padding: 15px;
position: fixed;
width: 25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
top: 50%;
left:50%;
transform: translate(-50%, -50%)
}
#popup-overlay {
/*display: none;*/
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
<div id="popup-overlay"></div>
<div id="popup">Look at me!</div>
Can you try this,
#popup {
display: none;
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
top: 20%;
left: 50%;
width: 25%;
margin-left: -25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
box-sizing: border-box;
}
Note:
It is better to add some jsfiddle like url instead of providing partial details make easy to understand and workout.
left:50%;
margin-left:-120px;
(210 / 2) + 15 = 120
I would move the object to the center and then to the right the half of its size.
As the object width is not fixed, use transform to do that:
#popup {
...
left:50%;
transform: translate(-50%);
...
}
Despite transform is not available in IE8 and below, may be a good solution.
http://jsfiddle.net/fvLtd068/
For html5 enabled browsers use:
#popup {
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
/* top: 20%; */ //Remove
/* left: 35%; */ //Remove
/* width: 25%; */ //Remove
left: 50%; // Insert
top: 50%; // Insert
transform: translate3d(-50%, -50%, 0); // Insert
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
}
The sample div hovers fine however the background image doesn't move.
The div hovers fine but the image in the background stays at the same position.
What I am trying to achieve is when you hover over the div it moves like it clicks, but the background image in the div doesn't seems to move at all. I want the div and the background to move like real button click.
Fiddle link: http://jsfiddle.net/jackJoe/YhDXm/.
.sample {
width: 220px;
height: 220px;
position: absolute;
overflow: hidden;
margin: 180px;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://static.adzerk.net/Advertisers/2362.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 188px 188px;
}
.sample > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.sample > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.sample > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.sample:hover {
background-color: #f0eade;
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position: relative;
top: 10px;
margin: 180px;
}
<div class="sample">
<header>
<p><a>
Skyscraper
</a>
</p>
</header>
</div>
Your background image stays still because you have background-attachment: fixed; enabled.
From MDN on background-attachment: fixed
This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element.
Remove your background-attachment statement entirely and change your background-position to 0 0 (or top left) and then you will need to tinker the child elements appropriately.
Fiddle here with adjustments made.
Now that I'm done with that, some supplemental advice:
You should most certainly not do this using top or any other positional properties. These will cause a layout re-calculation on every single hover event (even with position: absolute;) and a paint, at a minimum. If you have a lot of stuff on that page your users may become frustrated or displeased with the stuttering on the page.
Instead, use transform: translate(X, Y); for a very cheap and equally effective move. Here is the fiddle with this incorporated
I found the answer for my question, thanks everyone for the help,
This is fiddle linke: http://jsfiddle.net/YhDXm/1186/
.sample {
width: 220px;
height: 220px;
position: absolute;
overflow: hidden;
margin: 180px;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://static.adzerk.net/Advertisers/2362.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
.sample > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.sample > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.sample > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.sample:hover {
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position: relative;
top: 10px;
margin: 180px;
}
<div class="sample">
<header>
<p><a>
Skyscraper
</a>
</p>
</header>
</div>