Trying to simulate a top border that doesn't start at the left edge of the element.
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px -1px 0 0 black;
}
The above css is close, but produces a black 15px wide shadow to the right of the div. How do I contain that?
http://jsfiddle.net/3sjngyk1/
Top border with just a box shadow?
.border-top {
height: 50px;
width: 100px;
box-shadow: 0px -10px 0px 0px red;
margin-top: 25px;
background: lightblue;
}
<div class="border-top"></div>
Alternatively, you can use a pseudo-element and calc (if the border isn't going to be full width - it's not clear from your question).
.border-top {
height: 50px;
width: 100px;
background: lightblue;
position: relative;
margin-top: 25px;
}
.border-top::after {
content: '';
position: absolute;
height: 5px;
bottom: 100%;
left: 15px;
width: calc(100% - 15px);
background: red;
}
<div class="border-top"></div>
How about this?
http://jsfiddle.net/vleong2332/3sjngyk1/2/
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px 0px 0 0 white, 15px -1px 0 0 black;
}
Put another shadow with the same color as the background on top of the black one.
Related
CSS borders taper by default (as in the left side of this example):
Is there a way to get borders to behave like the right side of the example?
There's no way to modify the default jointing options, but there are a couple of workarounds.
Option 1:
If you can add another <div> element around the first one, you cans imply apply a left and right border to the outer <div>, and a top and bottom border to the inner one:
body > div {
border-left: 10px solid blue;
border-right: 10px solid green;
}
div > div {
border-bottom: 10px solid gold;
border-top: 10px solid red;
}
<div>
<div>
A div element with a border
</div>
</div>
2: Using before and after psuedo-elements:
If you can't modify the DOM, you could use the before and after pseudo-elements as follows:
div {
border-left: 10px solid blue;
border-right: 10px solid green;
padding: 10px 0;
position: relative;
}
div::before,
div::after {
content: '';
display: block;
height: 10px;
left: 0;
position: absolute;
width: 100%;
}
div::before { background: red; top: 0 }
div::after { background: gold; 0: 0 }
<div>
A div element with a border
</div>
Note: In order to use this method, we must also set padding on the <div> element itself in order to allow us to position the 'borders'.
I don't know of any solution that would change the rendering of the border, but you could nest two divs and overlap them.
.inner {
border-top: 20px solid red;
border-bottom: 20px solid orange;
height: calc(100% - 40px);
}
.outer {
border-left: 20px solid blue;
border-right: 20px solid green;
height: 60px;
}
<div class="outer">
<div class="inner">
Two div elements with borders.
</div>
</div>
You can do this with one element and gradient:
.box {
padding: 20px;
background:
conic-gradient(at top 20px left 20px,
red 90deg, #0000 0 180deg, blue 0) 0,
conic-gradient(at bottom 20px right 20px,
green 180deg, orange 0 270deg, #0000 0) 100%;
background-size: calc(100% - 20px);
background-repeat: no-repeat;
}
<div class="box">
Two div elements with borders.
</div>
You can use div::after to do what you want with a single div like this:
div {
border-right: 10px solid green;
border-left: 10px solid blue;
height: 100px;
position: relative;
}
div::after {
content: "";
position: absolute;
bottom: 0;
top: 0px;
left: 0;
right: 0;
border-top: 10px solid red;
border-bottom: 10px solid yellow;
}
<div class="d2"></div>
Box-shadows could do that
div {
border-top: 10px solid red;
border-bottom: 10px solid orange;
position: relative;
width: 400px;
height: 50px;
margin: 1em auto;
box-shadow: 10px 0 0 0 green, -10px 0 0 0 blue;
}
<div></div>
I would like to create this page (see image) with css shadow. Is this possible? So to have the page peel css box shadow bottom left and right and the shadow left and right?
You can do this with pseudo elements :before and :after. Creating two new areas which have their own box-shadows and placing them where required you can create the illusion of the shadow getting bigger as the page goes down.
body {
background: lightgrey;
}
div {
background: white;
margin: 40px auto;
height: 500px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 97%;
z-index: -10;
position: absolute;
content: "";
bottom: 15px;
left: 8px;
width: 30%;
top: 2%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 5px rgba(0, 0, 0, 0.3);
transform: rotate(1deg);
}
div:after {
transform: rotate(-1deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.3);
}
<div>
test
</div>
An alternative is using CSS transforms to change the perspective of a single :before pseudo element.
This was done by Harry **
body {
background: lightgrey;
}
div {
background: white;
margin: 40px auto;
height: 500px;
width: 300px;
position: relative;
padding: 10px;
box-shadow: 10px 0px 5px -10px gray, -10px 0px 5px -10px gray;
}
div:after {
content: '';
position: absolute;
bottom: 10px;
left: 0px;
height: 50%;
width: 100%;
transform-origin: 50% 100%;
transform: perspective(100px) rotateX(1deg);
box-shadow: 5px 0px 10px gray, -5px 0px 10px gray;
z-index: -1;
}
<div></div>
CSS :before & :after
I'm trying to create a tooltip that looks like this using CSS:
This is how i'm trying to solve it: http://jsfiddle.net/NXLuZ/
So, basically i'm using css3 masking:
div:after {
width: 61px;
height: 10px;
background: #fff;
-webkit-mask-image: radial-gradient(circle 10px at 0px 0, transparent 0, transparent 10px, black 11px);
top: -10px;
right: 0px;
position: absolute;
content: '';
display: block;
}
Looks good on regular displays, but you can see the problem when you're viewing it on a retina display or when you're trying to zoom in:
Because i'm using a gradient as a mask, it looks a bit blurry when the color changes in the gradient. Its important to mention, that the rounded corner needs to be transparent, because the background is not fixed behind it.
Any idea how can i fix this issue?
You can do it with a box shadow:
.demo{
position: absolute;
left: 400px;
top: 106px;
background: #fff;
width: 200px;
height: 200px;
-moz-border-radius:10px 0 10px 10px;
-webkit-border-radius:10px 0 10px 10px;
border-radius:10px 0 10px 10px;
-moz-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
box-shadow: 3px 4px 20px rgba(0,0,0,.5);
line-height:200px;
text-align:center;
color:#dbdbdb;
}
.demo:before {
content: '';
width: 50px;
position: absolute;
right: 0px;
top: -26px;
height: 16px;
background: #fff;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
display: block;
}
.demo:after {
width: 10px;
height: 10px;
background: transparent;
top: -10px;
right: 50px;
position: absolute;
content: '';
border-bottom-right-radius: 100%;
box-shadow: 50px 0px 0px 50px white;
clip: rect(0px, 60px, 50px, 0px);
display: block;
}
fiddle
I am trying to do something like this image below with CSS to build the buttons and then an image sprite to show the center content of the button.
Here is a demo of the code I have so far, I am having trouble getting my sprite images to position correctly. Any help to improve this CSS to look more like my image above would be great. I think the actual HTML structure could be improved as well?
http://dabblet.com/gist/2212456
HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">...</span>
</div>
<div class="switcher right">
<span id="right">...</span>
</div>
</div>
CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
Block & inline method
http://dabblet.com/gist/2213271
Absolute method
http://dabblet.com/gist/2213121
Hi you have not defined the position absolute in #left & #right so i controlled the sprite images through absolute positioned.
you can adjust your images through changes in position top,left,bottom,right whatever you need....
Here is your updated css :-
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
background-position: 16px -16px;
height: 15px;
left: 15px;
position: absolute;
top: 12px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
background-position: 0 -29px;
left: 15px;
position: absolute;
top: 13px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
or see the live demo:- http://dabblet.com/gist/2213048
I am trying to make shutdown button using CSS3 similar to this picture
http://static.desktopnexus.com/thumbnails/25080-bigthumbnail.jpg
So far I got this. The issues are that I cannot make that "semi-circle" look like that circle in the center of image, cannot center that "semi-circle" and box-shadow ruins that "semi-circle".
Do you have any suggestions to improve what I am trying to do?
Thnx in advance!
Here's my attempt:
.shutdown {
border: 8px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 100px;
width: 100px;
}
.shutdown .inner {
border: 5px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 30px;
left: 30px;
position: relative;
top: 30px;
width: 30px;
}
.shutdown .bar {
border-left: 5px solid #0cf;
box-shadow: 0 0 10px #0cf;
height: 20px;
left: 47px;
position: relative;
top: -15px;
width: 0;
}
.shutdown .sub-bar {
border-left: 11px solid black;
height: 30px;
margin-left: 44px;
margin-top: -20px;
position: absolute;
width: 0;
}
Here's the HTML structure to go along with it:
<div class="shutdown">
<div class="inner"></div>
<div class="sub-bar"></div>
<div class="bar"></div>
</div>
And here's a demo.