I want to Create Box shadow as given below.
As per my study of Box shadow. It takes below parameters:
DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}
Please, Find the jsfiddle for this.
To create above examples, I need to use box shadow.
For example 1, I used below style:
box-shadow:0px 10px 22px 0px gray;
Here, I am getting lighter shadow on top, left and right side also (which I don't want)
In example 2, I used below style:
box-shadow:10px 10px 22px 0px gray inset;
I don't want inner shading to right and bottom part.
Is it possible to remove unnecessary shading in box-shadow ?
You can have a box shadow just on one side, on two sides, three sides, but in that case you should set the blur value to zero - see demo http://dabblet.com/gist/1579740
However, you can emulate the first kind of shadow by wrapping your div into another outer div of the same width, but slightly bigger height on which you set overflow: hidden;
If you don't need the background of your div to be semitransparent, then you could also emulate the second one using an absolutely positioned pseudo-element in order to obscure the bottom and right shadows.
DEMO http://dabblet.com/gist/3149980
HTML for first shadow:
<div class="outer">
<div class="shadow1"></div>
</div>
CSS for first shadow
div {
width: 100px;
height: 100px;
}
.outer {
padding-bottom: 35px;
overflow: hidden;
}
.shadow1 {
box-shadow: 0px 10px 22px 0px gray;
background: #f0f0f0;
}
HTML for second shadow
<div class="shadow2"></div>
CSS for second shadow
.shadow2 {
box-shadow:10px 10px 22px 0px gray inset;
position: relative;
background: #f0f0f0;
}
.shadow2:before {
top: 22px;
bottom:0;
left:22px;
right:0;
position: absolute;
background: #f0f0f0;
content:'';
}
You can do it with some extra markup (an extra div wrapping the element so that it hides the other shadows you don't want)
Or you could use the shadow spread property (the 4th number in the box-shadow declaration) to shrink the shadow down to hide the side parts of your shadow.
This creates a smaller shadow on the bottom, but it requires no extra HTML.
http://jsfiddle.net/hBMQm/2/
#b {
position:absolute;
width:100px;
height:100px;
top:200px;
left:200px;
background-color:#F0F0F0;
text-align:center;
box-shadow:20px 20px 22px 0px gray inset;
}
Now you have the inner shadow, but not on you right, or bottom as you asked for. Did i misunderstand you?
box-shadow takes one more parameter the spread
using following code i was able to achieve the desired effect
box-shadow: 0px 20px 22px -20px gray inset;
see here http://jsfiddle.net/hBMQm/3/
Related
Using CSS, how can I add a border of 100px to all sides of an image that is made up of the perimeter pixels stretched out and blurred? e.g. the border to the left of the image is just columns 1-3 stretched horizontally and blurred together?
I see other posts explaining how to keep the edges sharp but blur the center.
If you want to blur an image to the edges and if you have one single background-color then you could use the box-shadow with inset to archive your desired behavior:
box-shadow: inset 0px 0px 40px 40px #DBA632;
where #DBA632 is your background-color.
See this snippet:
body {
background: #DBA632;
}
div {
background: url('https://placekitten.com/500/300');
width: 500px;
height: 300px;
margin: 50px;
box-shadow: inset 0px 0px 40px 40px #DBA632; /* change to alter the effect*/
}
<div></div>
Old answer:
Are you looking for something like this?
box-shadow: 0px 0px 40px 40px #000000;
The first two values set the offset of the shadow, the third value is the amount of blur and the last value is the spread of the shadow.
You can play with those values to see how they change the effect: DEMO
box-shadow is what you want. I put some links below that will teach you everything you need to know about it:
http://www.css3.info/preview/box-shadow/
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.
I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words
I want this:
Here is my code:
http://jsfiddle.net/hpLYD/1/
The CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding property is expanding the whole div including the border.
How can I achieve that effect using only css? is it possible?
You can do this using the CSS3 property box-shadow. Add the following to your CSS:
box-shadow: 0px 0px 0px 5px #f00;
jsFiddle example
While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn't exceed 200px. In order to actually achieve this you can use the inset parameter on the box-shadow attribute (which will make an inner shadow).
You will also need to change the box-sizing to border-boxsuch that the size is proportional to the border and not the content.
Here's an JSFiddle with the result
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid red;
box-shadow: 0px 0px 0px 5px blue inset;
box-sizing: border-box;
}
<div class="mydiv"></div>
.mydiv{
position:relative;
height:150px;
width:200px;
background:#f00;
}
.mydiv:before{
position:absolute;
content:'';
position: absolute;
top: 10px;
bottom: 10px;
left:10px;
right: 10px;
border:1px solid #daa521;
}
Here's an JSFiddle with the result
You can't place a border within an element, however you can use box-shadow to give that effect:
.circle {
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
border: 3px solid blue;
box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */
}
JSFiddle example.
Do note though that this is a CSS3 style property and isn't supported on all browsers. You may also need to use vendor-prefixes on some browsers (-webkit, -moz, etc). Check http://caniuse.com/#search=box-shadow for support.
I suppose you could add another class to the circle.
I have done this for you.
I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.
.scirle {see fiddle}
http://jsfiddle.net/hpLYD/7/embedded/result/
The problem is a border takes up screen real estate whether we like it or not.
If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that's actually 102px caused by the borders on the outside. Border-box doesn't seem to do anything to borders in latest Chrome - they always appear on the outside.
An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:
.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }
This question already has answers here:
Creating space between an element and its border
(5 answers)
Closed 2 years ago.
Is it possible to increase the distance between a border and its content?
If it is possible, just do it on here: JSFiddle
What I plan on doing is putting a glow around the content (using a shadow with 0px/0px distance) and then putting a border a couple of pixels away from the glow.
NOTE: I have decided to do an inset shadow and a border instead, it looks better, but thanks for the answers :3
Add padding. Padding the element will increase the space between its content and its border. However, note that a box-shadow will begin outside the border, not the content, meaning you can't put space between the shadow and the box. Alternatively you could use :before or :after pseudo selectors on the element to create a slightly bigger box that you place the shadow on, like so: http://jsbin.com/aqemew/edit#source
Its possible using pseudo element (after).
I have added to the original code a position:relative and some margin.
Here is the modified JSFiddle: http://jsfiddle.net/r4UAp/86/
#content{
width: 100px;
min-height: 100px;
margin: 20px auto;
border-style: ridge;
border-color: #567498;
border-spacing:10px;
position:relative;
background:#000;
}
#content:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border: red 2px solid;
}
If you have background on that element, then, adding padding would be useless.
So, in this case, you can use background-clip: content-box; or outline-offset
Explanation:
If you use wrapper, then it would be simple to separate the background from border. But if you want to style the same element, which has a background, no matter how much padding you would add, there would be no space between background and border, unless you use background-clip or outline-offset
You usually use padding to add distance between a border and a content.However, background are spread on padding.
You can still do it with nested element.
.outer {
border-style: ridge;
border-color: #567498;
border-spacing: 10px;
min-width: 100px;
min-height: 100px;
float: left;
}
.inner {
width: 100px;
min-height: 100px;
margin: 10px;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(39, 54, 73)), color-stop(1, rgb(30, 42, 54)));
background-image: -moz-linear-gradient( center bottom, rgb(39, 54, 73) 0%, rgb(30, 42, 54) 100%);
}
<div class="outer">
<div class="inner">
test
</div>
</div>
Just wrap another div around it, which has the border and the padding you want.
You could try adding an<hr>and styling that. Its a minimal markup change but seems to need less css so that might do the trick.
fiddle:
http://jsfiddle.net/BhxsZ/
I want a CSS inset box-shadow to appear on top of the elements inside of the container with the box-shadow, specifically background colors of child-elements.
Demo: http://jsfiddle.net/Q8n77/
<div class="parent">
foo
<div class="content">bar</div>
</div>
<style>
.parent {
box-shadow : inset 0 0 5px 0 black;
}
.content {
background : #EEE;
}
</style>
Any ideas? Can do whatever with the HTML, but need to be able to click-through, so no 100% width/height DIVs on top of everything.
If all you need is to have the inset shadow show through background colors, you can use transparent rgba (or hsla) colors rather than hex codes;
.parent {
box-shadow: inset 0 0 5px 0 black;
}
.content {
background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}
Demo at http://jsfiddle.net/Q8n77/7/
Not everyone has the ability to change HTML structure. If you can only access the CSS, you could try the following from this post: https://stackoverflow.com/a/13188894/491044
Alternatively, you can use a pseudo element:
HTML:
<div>
a
</div>
CSS:
div {
height:300px;
color:red;
position:relative;
}
div:before {
content:'';
display:block;
box-shadow:inset 0 0 10px black;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
One possibility is to play with the padding.
.parent {
box-shadow : inset 0 0 5px 0 black; padding:.23em;
}
http://jsfiddle.net/jasongennaro/Q8n77/6/
you could try to position an overlay div on top of your parent with position: absolute; and give that the shadow (untested theory) with something like this:
HTML
<div class="parent">
<div class="overlay"></div>
foo
<div class="content">bar</div>
</div>
CSS
.parent {
position: relative;
}
.content {
background : #EEE;
}
.parent .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow : inset 0 0 5px 0 black;
}
You can set box-shadow on both parent and child.
Adding this approach since this is how I solved my version of this problem.
I basically add a ::before, or another element with a drop shadow in the parent, but offset it so only the shadow part is showing. Also I give the parent a overflow:hidden. This way, the content should still be interactive. :)
Mileage may vary depending on exact markup of course. But thought I should add this here.
codepen: http://codepen.io/mephysto/pen/bNPVVr
.parent {
background:#FFF;
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.parent::before{
content:"";
display:block;
width:100%;
height:25px;
margin-top:-25px;
box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}
I would like to add something with xec's answer.
I liked your suggestion. But I think it has to do with the transparency of the inner element. If the inner element has certain transparency then the shadow will appear.
Also, the strength of the shadow also depends on the transparency. The more transparent the inner element, the stronger the shadow and the strongest when the background color is transparent.
For example, if the background color is rgba(255,255,255,0.5) then the shadow will appear stronger than when it is rgba(255,255,255,0.7). And even if you use rgba scheme and your alpha value is 1 or the background color is rgba(255,255,255,1) then also the show will not show up.
Given that, it is not possible to show the shadow if the inner element has an opaque background color.
See the 3 examples here for reference: https://codepen.io/rajatkantinandi/pen/PoJgMMw?editors=1100
If you need shadow on top only, this will do it:
.element
{
box-shadow:inset 0px 3px 3px #BBB;
}
I want to Create DIV based Flexible corners. as per shown in the Image.
This is Not regular rounded corner, but something more complicated. This is Something like challenge .
And Please Note that I want Image based rounded Corners, so please give answer as per requirments.
Thanks a Lot
Well, the easiest answer is: use CSS3:
#roundedCornerDiv {
-moz-border-radius: 1em; /* for mozilla-based browsers */
-webkit-border-radius: 1em; /* for webkit-based browsers */
border-radius: 1em; /* theoretically for *all* browsers
dependant on implementation of CSS3 */
border: 12px solid #ccc;
}
you should be able to do this with 9 explicitly sized and floated divs. the corner divs are fixed size and have background-url for the 4 corners and the side divs are repeat-y and top bottom divs have repeat-x
You should look into The Thrashbox approach for this.
You can use a series of spans and 4 images, one for each corner, to make a resizable rounded corner div. Like this:
div {
background: white url(topleft.gif) top left no-repeat;
}
div span {
display: block;
background: url(topright.gif) top right no-repeat;
}
div span span {
background: url(bottomright.gif) bottom right no-repeat;
}
div span span span {
padding: 2em;
height: 0; /* fixes a padding bug in IE */
background: url(bottomleft.gif) bottom left no-repeat;
}
div span span > span {
height: auto; /* sets the height back to auto for all other browsers */
}
And now for the HTML:
<div><span><span><span>Round corners!</span></span></span></div>
For an actual example and code please refer to this page for a working example and source code.
border-radius: 10px 10px 10px 10px;
first is the left-upper corner.
second is the right-upper corner.
third is the right-lower corner.
fourth is the lower-left corner.
you can use that basically in any tag where you want the round corners. just remember to specify the border like:
border: 2px solid black;
if you specify the border separately, eg:
border-left: 6px;
border-right: 6px;
border-top: 2px;
border-bottom: 2px;
you can get some awesome-looking stuff.