Let's say I have a simple div with some paragraphs inside.
I want to achieve a fading effect on the bottom of the div.
I have tried to set up a white shadow
box-shadow: inset 0 -15px 10px white;
but obviously this didn't work, since the box-shadow always appears under the text.
How can I accomplish this in pure CSS?
Thanks.
What about using the "after" css selector ? it even work with IE8 : http://caniuse.com/#search=after
.container{
position: relative;
height: 100px;
overflow: hidden;
}
.container:after{
content: "";
position: absolute; top: 0; bottom: 0; left: -15px; right: -15px;
box-shadow: inset white 0 -15px 10px;
}
I'm using negative left and right to put the inside box outside the main box to avoid the shadow on the sides.
I was able to replicate the effect with CSS only, but it's a little hackish:
http://jsfiddle.net/EaXTB/1/
I put two divs as siblings:
<div class="container">
<div class="shadow"></div>
<div class="copy">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
</div>
And positioned them absolutely:
.container { position:relative; }
.shadow {
-webkit-box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1);
-moz-box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1);
box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1);
height: 200px;
width: 300px;
z-index: 100;
position:absolute;
}
.copy {
max-height: 200px;
width: 300px;
overflow: hidden;
z-index: 0;
position: absolute;
}
The only trouble is that for this to work, you must specify the height for the .shadow class. If it will always be the same size, then you can use this. Otherwise using a png overlay might be more effective.
Something like:
.shadow {
background: url(overlay.png) repeat-x bottom;
}
div {
height:300px;
color:red;
overflow-y: scroll;
}
div:after {
content: "";
box-shadow: 0px -50px 50px -50px #000 inset;
position:fixed;
top: 250px;
left:0;
width:100%;
height:50px;
overflow: hidden;
}
create a div below all your other divs and set a negative bottom margin to that div and a top drop shadow. You can do that or you can do what I have done. Save a png image with that fade and set it to an absolutely positioned div that sits at the bottom of your relatively positioned div that contains the text.
Related
I'm trying to get some angle on the tip of a left and bottom border on a div or image. Can't seem to replicate this kind of style Desired Output
This is what I have come up so far. When using borders angle tips are pointing outwards though
Using box shadow
<div class="container">Text Content or Image</div>
.container {
background-color: blue;
padding: 100px;
box-shadow: -10px 20px 0px 5px #f71e1e;
}
Using border
.container {
background-color: blue;
padding: 100px;
border-bottom: 15px solid #f71e1e;
border-top: 15px solid white;
border-left: 15px solid #f71e1e;
border-right: 15px solid white;
}
https://jsfiddle.net/su8we1vq/
One approach is as follows, which does allow for easy changes to be made via CSS custom properties; the code is below with explanatory comments in the code:
/* CSS custom properties to handle the border's
color and size: */
:root {
--borderColor: #f00;
--borderSize: 10px;
}
/* simple reset to remove default margins and padding,
and also forcing browsers to use the same basis for
calculating element sizes: */
*,
::before,
::after {
/* includes any assigned padding and border-widths
in the declared size of the element: */
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: blue;
/* for no reason other than easily placing the contents of
the element to the vertical center and left (inline-start): */
display: grid;
place-content: center start;
block-size: 20vh;
/* allows for responsive sizing, the preferred size is 80vw
(80% of the viewport width), but with a minimum size of
20rem and a maximum size of 1200px: */
inline-size: clamp(20rem, 80vw, 1200px);
/* in romantic languages, derivatives of Italian (English,
German...) this is the top/bottom margin; we're using
logical properties in order that other languages might be
laid out appropriately for their own languages' inline and
block axes): */
margin-block: 20vh;
/* in romantic languages (as above) this is equivalent to
left/right margin: */
margin-inline: auto;
/* as above, but here we set padding on the inline-axis (left/right
in romantic languages and derivatives): */
padding-inline: 1em;
/* to allow absolute positioning for pseudo-elements: */
position: relative;
}
.container::before,
.container::after {
content: '';
background-color: var(--borderColor);
position: absolute;
transform-origin: right top;
}
.container::before {
/* taking the full size of the block axis of the parent: */
block-size: 100%;
/* sizing the inline axis to the desired size of the "border" */
inline-size: var(--borderSize);
top: 0;
right: 100%;
/* skewing the normal quadrilateral shape of an HTML element: */
transform: skewY(-45deg);
}
.container::after {
/* the size of the desired "border": */
block-size: var(--borderSize);
/* the full inline size of the parent: */
inline-size: 100%;
top: 100%;
left: 0;
transform: skewX(-45deg);
}
<!-- the original HTML: -->
<div class="container">Text Content or Image</div>
<!-- a second element, demonstrating the possible "theming": -->
<div class="container"
style="--borderColor: lightskyblue;
--borderSize: 2em;
background-color: palegreen;">Text Content or Image</div>
JS Fiddle.
It's worth noting though that there is a slight problem with this approach, where the two pseudo-elements meet, on the lower-left, there is a visible sliver of the background-color of whatever is behind the element.
The easiest way to achieve this would be by using multiple box-shadow, like this:
.container {
background-color: blue;
padding: 100px;
box-shadow: -1px 1px 0px #f71e1e,
-2px 2px 0px #f71e1e,
-3px 3px 0px #f71e1e,
-4px 4px 0px #f71e1e,
-5px 5px 0px #f71e1e,
-6px 6px 0px #f71e1e,
-7px 7px 0px #f71e1e,
-9px 9px 0px #f71e1e,
-10px 10px 0px #f71e1e;
}
Yeah, it doesn't look pretty syntax-wise but hey :(
clip-path with border can do it. I added a CSS variable to easily control the size of the shadow
.box {
--s: 10px; /* control the size of the shadow */
background-color: blue;
margin: 50px;
height: 100px;
border: solid #f71e1e; /* the color here */
border-width: 0 0 var(--s) var(--s);
clip-path: polygon(0 var(--s),var(--s) 0, 100% 0,100% 100%,100% calc(100% - var(--s)),calc(100% - var(--s)) 100%,0 100%);
}
<div class="box"></div>
Also with multiple background to have less code:
.box {
--s: 10px; /* control the size of the shadow */
margin: 50px;
height: 100px;
background:
linear-gradient(blue 0 0) calc(100% + var(--s)) calc(-1*var(--s)) no-repeat,
#f71e1e;
clip-path: polygon(0 var(--s),var(--s) 0, 100% 0,100% 100%,100% calc(100% - var(--s)),calc(100% - var(--s)) 100%,0 100%);
}
<div class="box"></div>
I want my <div> to have a bottom border which starts from a distance away from the left. It's like:
abc
^^^^^^^^^^
where ^ stands for a piece of border.
I achieved this using border-image. I set a border-image to a linear-gradient() image, which starts transparent, and becomes gray from some pixels.
<style>
div {
width: 200px;
border-top-style: none;
border-bottom-style: solid;
border-width: 1px;
border-image: linear-gradient(to right,
transparent 0,
transparent 1em,
lightgray 1em,
lightgray 100%) 100% 1;
}
</style>
<div>abc</div>
Now the new requirement is to add a 1px white line right below the existing line to mimic a 3d effect. I thought I could simply add a vertical gradient to the border image, but I don't know how to do it.
Instead of border consider multiple background. I used different colors to better see the result:
.box {
width: 200px;
background:
linear-gradient(blue, blue) 1em 100%/ 100% 1px no-repeat,
linear-gradient(red, red) 1em 100%/ 100% 2px no-repeat;
}
<div class="box">abc</div>
You can Achive it with box-shadow
If you are using display: flex to your div you should position pseudo after element using position: absoute
See this example:
body {
background-color: lightgreen;
}
div {
display: flex;
position: relative;
}
div:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 200px;
height: 1px;
box-shadow: 10px 1px 0 0 lightgray, 10px 2px 0 0 white;
}
<div>abc</div>
<div>edf</div>
I can't center my modal in twitter-bootstrap with various sizes. You can see live example here and here. (just click on the picture or "Report this image"). You'll see that modal is there working like charm, but it isn't horizontally centered. I tried everything: margins, float, text-align and even <center>
.modal:
.modal {
position: fixed;
top: 10%;
z-index: 1050;
width: auto;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal-body:
.modal-body {
margin: 0 auto 0 auto;
position: relative;
padding: 15px;
overflow-y: auto;
}
I know it's a little late, but I found the solution to all the problem with centering the Bootstrap Modal with different heights than the standard's (one).
$("#yourModal").modal('show').css({
'margin-top': function () { //vertical centering
return -($(this).height() / 2);
},
'margin-left': function () { //Horizontal centering
return -($(this).width() / 2);
}
});
A solution that works regardless of the child element size (in this case the modal). Can also be used to center vertically.
.centered {
left: 50%;
transform: translateX(-50%);
}
Essentially what we are doing here is pushing the element right by half of the parent container's width. In the case of the modal the parent would (should) be the body. The transform property is the pulling the element left by half of its own width.
Edit: To center vertically
.centered {
top: 50%;
transform: translateY(-50%);
}
Note: I think the horizontal centering only works if the height/width of the parent are the same, as the % comes from the parent width. If they are not the same then just use the parent height.
It's not the modal body that needs centering, it's the overall modal. Since that has fixed positioning, you could do it with CSS and jQuery (since jQuery is already being used):
CSS:
.modal { left: 50%; }
jQuery:
$('.modal').each(function(){
var modalWidth = $(this).width(),
modalMargin = '-' + (modalWidth/2) + 'px!important';
$(this).css('margin-left',modalMargin);
});
Alternatively it is possible with just CSS:
.modal {
width: 100%;
left: 0;
background-color: transparent; }
.modal-body {
display: inline-block;
background-color: #FFF; }
.modal img { min-width: none!important; }
Alternative to #Coop's answer. As you have a fixed width text area there, you can set the width of the modal and use negative margins rather than jquery.
.modal {
left:50%;
width:444px;
margin-left:-222px;
}
In your current code, there is nothing that will allow the modal to center.
You can use jquery to reproduce this behaivor:
left: 50%;
width: 560px;
margin-left: -280px;
Calculating the width of the div and asign css
$(document).ready(function () {
var modalWidth = $('#myModal').width();
$('#myModal').css("left", "50%");
$('#myModal').css("width", modalWidth);
$('#myModal').css("margin", (modalWidth/2)*-1);
});
.modal-dialog
{
padding-top: 15%;
}
I have an image on my page which i want to put an inset box shadow on.
I have tried doing this with the image both in, and out, of a div.
Can anyone help me to get an inset box shadow to display?
HTML:
<body>
<div id="logo">
<img src="images/key.jpg" width="3%" height="3%"/>
</div>
Next
Back
<img src="images/scene1.jpg" width="650" height="650" class="backing"/>
</body>
</html>
CSS
.backing {
position:relative;
z-index:-10;
float:left;
margin-left:12%;
box-shadow: 0 0 -50px -50px #FFF;
-moz-box-shadow: 0 0 -50px -50px #FFF;
-webkit-box-shadow: 0 0 -50px -50px #FFF;
}
.next {
position:relative;
margin-left:8%;
z-index:200;
}
.back {
position:relative;
margin-left:2%;
z-index:220;
}
Box-shadow inset will not work on image, you need to create a div and give box-shadow to that div and put image inside that div.
You can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.
div {
position: relative; /* Not required now */
margin: 10px;
float: left;
box-shadow: inset 0 0 12px blue;
border-radius: 50%;
}
div img {
display: block;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
z-index: -1;
}
Demo
Most of the solutions posted here have problems with the parent elements, a simple solution to this, is using pseudo elements:
.box-shadow
{
background-color: #fff;
height: 235px;
margin: 32px 24px;
text-align: center;
width: 500px;
position: relative;
border-radius: 50%;
overflow: hidden;
}
.box-shadow::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 0 10px 10px #000;
-moz-box-shadow: inset 0 0 10px 10px #000;
box-shadow: inset 0 0 10px 10px #000;
border-radius: 50%;
overflow: hidden;
}
<div class="box-shadow">
<img src="http://www.google.com/logos/2012/addams11-hp.jpg" />
</div>
The other answers that propose z-index have an issue if put into context, in my case the image disappeared behind the main div. Preventing this involves setting z-index: 1; (and non static position) to all of the ancestor elements, which is problematic, and may break a lot of existing layout.
I found a clean solution that doesn't require having to touch all ancestor elements.
I finally figured it out with the help of Understanding z-index - The Stacking Context
HTML
The markup stays like this:
<div class="box-shadow">
<img src="/images/graphic.jpg" />
</div>
The challenge is to put the wrapper div and the image into a single stacking context. For this you have to apply styles to the parent element.
Stacking Context CSS
According to the linked article, the following elements create a stacking context:
the root element (HTML),
positioned (absolutely or relatively) with a z-index value other than "auto",
a flex item with a z-index value other than "auto",
elements with an opacity value less than 1. (See the specification for opacity),
elements with a transform value other than "none",
elements with a mix-blend-mode value other than "normal",
elements with isolation set to "isolate",
on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto"
specifing any attribute above in will-change even you don't write themselves directly
If we focus on the options that make sense for this use case, we have these alternatives, assuming the parent element of the .box-shadow element is #parent:
1. Positioning and z-index:
This is what I would choose if possible:
#parent {
position: relative;
z-index: 0;
}
2. Opacity
If the parent element needs to have a different position attribute or adding z-index has unwanted side effects, you can use an opacity value that's almost 1, so that it has no visible effect but still creates a stacking context:
#parent {
opacity: 0.999;
}
Finally, the shadow CSS
Then you can apply the shadow on the div and move the img behind it with z-index:
.box-shadow {
box-shadow: 0 0 10px 6px white inset;
}
.box-shadow img {
display: block;
position: relative;
z-index: -1;
}
Here’s a clean, simple and modern approach of CSS pseudo-elements to place a box shadow “on top of an image”, since img tags themselves don’t support pseudo-elements.
HTML:
<div class="box-shadow">
<img src="http://i.stack.imgur.com/8LzBY.jpg" />
</div>
CSS:
.box-shadow {
position: relative;
text-align: center;
}
.box-shadow::after {
box-shadow: inset 0 0 10px 10px #000;
bottom: 0;
content: "";
display: block;
left: 0;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.box-shadow img {
max-width: 100%;
width: auto;
}
View the accompanying JSFiddle.
.backing {
position:relative;
z-index:-10;
float:left;
margin-left:12%;
box-shadow: inset 0 0 50px 50px #FFF;
-moz-box-shadow: inset 0 0 50px 50px #FFF;
-webkit-box-shadow: inset 0 0 50px 50px #FFF;
}
.next {
position:relative;
margin-left:8%;
z-index:200;
}
.back {
position:relative;
margin-left:2%;
z-index:220;
}
<div id="logo">
<img src="//picsum.photos/100" width="3%" height="3%"/>
</div>
Next
Back
<img src="//picsum.photos/650" width="650" height="650" class="backing"/>
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>