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>
Related
How can I create a "pile" effect like in this picture?
I'd like the formation/spacing of the pile to stay as it is, and for the pile to shift left or right as the window is resized.
I've been fiddling around with absolute/relative positioning, but I'm a CSS newbie and I'm not sure if this is the way to go.
This is what I have so far:
.boxes {
position: absolute;
top: 100px;
}
.box1 {
position: relative;
left: 10vw;
width:fit-content;
padding: 0px 10px 4px 10px;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0);
}
.box2 {
position: relative;
width:fit-content;
left: 16vw;
bottom: 13vh;
padding: 0px 10px 4px 10px;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0);
transform: rotate(10.84deg);
}
.box3 {
position: relative;
width:fit-content;
left: 25vw;
bottom: 20vh;
padding: 0px 10px 4px 10px;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0);
transform: rotate(21deg);
}
<div class="boxes">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
You should set boxes to relative and it's child absolute like:
.boxes {
top: 100px;
position: relative;
}
.box1 {
position: absolute;
...
}
.box2{
position: relative;
width: 70px;
left: 19vw;
bottom: 7vh;
width: 70px;
transform: rotate(16deg);
padding: 0px 10px 4px 10px;
box-shadow: 0px 0px 0px 2px rgb(0 0 0);
}
.box3 {
left: 27vw;
width: 40px;
bottom: 32vh;
position: relative;
padding: 0px 10px 4px 10px;
transform: rotate(-4deg);
box-shadow: 0px 0px 0px 2px rgb(0 0 0);
}
//etc..
Try to play with rotate transform - MDN
I have created a #wrapper with a width and a height. Then I gave the wrapper position: relative; because we will position the single elements with position: absolute;.
Here is the code I used:
* {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
height: 150px;
width: 450px;
border: 1px solid;
}
#blue {
width: 100px;
height: 30px;
background: blue;
position: absolute;
bottom: 0;
left: 70px;
}
#purple {
width: 100px;
height: 30px;
background: purple;
position: absolute;
bottom: 20px;
left: 145px;
transform: rotate(25deg);
}
#green {
width: 50px;
height: 30px;
background: green;
position: absolute;
bottom: 63px;
left: 177px;
transform: rotate(-10deg);
}
#red {
width: 100px;
height: 30px;
background: red;
position: absolute;
bottom: 21px;
left: 220px;
transform: rotate(28deg);
}
<div id="wrapper">
<div id="blue"></div>
<div id="purple"></div>
<div id="green"></div>
<div id="red"></div>
</div>
I am creating a rectangular outline with a 5px thin border box around an empty <div>. When the user hovers over the border I want the border to change colour. That's all working fine, but I don't want the border to remain changed when the user's mouse is inside the <div> because it's no longer actually on the border.
See an example here:
https://jsfiddle.net/qbcc1trt/
.outer {
position: relative;
overflow: hidden;
display: inline-block;
}
.myborder {
content: '';
position: absolute;
bottom: 5%;
left: 20%;
width: 40%;
height: 50%;
box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
}
.myborder:hover {
content: '';
position: absolute;
bottom: 5%;
left: 20%;
width: 40%;
height: 50%;
box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
}
<div class="outer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
<div class="myborder"></div>
</div>
Any way to accomplish this?
:hover events only work on the top most element (and the elements inside). So you can achieve this effect by making another div the same size as your myborder but subtracting the size of the border. Then place it directly above myborder.
This way, the hover event will trigger while over the border (box shadow in your case) but no the inside. See the demo below
.outer {
position: relative;
overflow: hidden;
display: inline-block;
}
.myborder {
position: absolute;
bottom: 5%;
left: 20%;
width: 40%;
height: 50%;
box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
}
.hover-cover {
position: absolute;
bottom: calc(5% + 5px);
left: calc(20% + 5px);
box-shadow: none;
z-index: 1;
width: calc( 40% - 10px);
height: calc( 50% - 10px);
}
.myborder:hover {
box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
}
<div class="outer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
<div class="hover-cover"></div>
<div class="myborder"></div>
</div>
I know the answer has been marked as answered but I found a solution that doesn't use calc but nth-child instead which has better compatibility table than calc.
.outer {
position: relative;
overflow: hidden;
display: inline-block;
}
.myborder {
content: '';
position: absolute;
bottom: 5%;
left: 20%;
width: 40%;
height: 50%;
}
.myborder div:nth-child(1) {
box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.myborder div:nth-child(1):hover {
box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
}
.myborder div:nth-child(2) {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
}
<div class="outer"><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
<div class="myborder">
<div></div>
<div></div>
</div>
</div>
It's almost the same solution as the one provided by #Kevin:
https://jsfiddle.net/qbcc1trt/1/
The idea is to put two elements, one (B) above the other one (A), so when the user will :hover element B he will actually not :hover element A.
You need to make sure the element B is not inside element A
.outer {
position: relative;
overflow: hidden;
display: inline-block;
}
.borderContainer {
position: absolute;
bottom: 5%;
left: 20%;
width: 40%;
height: 50%;
}
.myborder {
content: '';
box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
.inner {
position: absolute;
width: calc(100% - 5px * 2);
height: calc(100% - 5px * 2);
top: 5px;
left: 5px;
z-index: 100;
}
.myborder:hover {
content: '';
box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
width: 100%;
height: 100%;
}
<div class="outer"><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
<div class="borderContainer">
<div class="myborder">
</div>
<div class="inner">
</div>
</div>
</div>
Note the I used here a parent container (which might be easier, depending on your solution).
How can I do a folded-corner with external shadow which continues to the parent div shadow, like that :
Thanks.
CSS Backgrounds and Borders Module Level 4 introduces the corner-shape property:
By default, non-zero border-radii define a quarter-ellipse that rounds
the affected corners. However in some cases, other corner shapes are
desired. The corner-shape property specifies a reinterpretation
of the radii to define other corner shapes.
In your case, you should set it to bevel:
Border radii define a diagonal slice at the corner.
The code would be something like
corner-shape: bevel;
border-radius: 0 0 30px;
box-shadow: 0 0 5px #000;
However, this spec is a draft not ready for implementation. So browsers haven't implemented it. But you can use corner-shape preview to see how it would look like.
tried this one, a bit complex, but it works
.box {
width: 200px;
height: 100px;
position: relative;
padding: 25px;
background: none;
}
.box .content {
position: relative;
z-index: 2;
}
.box .the_background {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.box .the_background .square-top-right {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: #fff;
display: block;
z-index: 3;
}
.box .the_background .square-bottom-left {
width: 225px;
height: 150px;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
display: block;
z-index: 3;
}
.box .the_background:after {
content: '';
width: 35px;
height: 35px;
background: #ddd;
position: absolute;
z-index: 2;
right: 7px;
bottom: 7px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.box .the_background .square-shadow {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.box .the_background .square-shadow:before {
content: '';
position: absolute;
left: 0;
width: 250px;
height: 125px;
-webkit-shadow: 0px 0px 10px #000;
-moz-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.box .the_background .square-shadow:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 225px;
height: 25px;
-webkit-shadow: 0px 0px 10px #000;
-moz-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
<div class="box">
<div class="content">
Lorem ipsum...
</div>
<div class="the_background">
<div class="square-top-right"></div>
<div class="square-bottom-left"></div>
<div class="square-shadow"></div>
</div>
</div>
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>
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