.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style="margin-top: -54px"></div>
</div>
</div>
.powder-inner overflow hidden ,there have a border in there . it can't cover all .
how can i cover all ? there is border there ?
Update .powder-inner class using border-top-left-radius: 0%; & border-top-right-radius: 0%; then remove top green curve.
See output is browser zoom it and see green curve.
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 49%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
z-index: 2000;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}
.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 49%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
z-index: 2000;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style="margin-top: -54px"></div>
</div>
</div>
.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden !important;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow:hidden !important;
margin: 1px;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style=""></div>
</div>
</div>
Related
The Code below shows tooltip at the right side using css when hovered as can been seen in the screenshot below
Please how do I make the tooltip to appear on the top of the name when hovered
<html><head>
</head>
<body>
<div data-tooltip="I am Nancy Moore">
<label>Name</label>
</div>
<style>
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 50px;
background: black;
color: white;
border-radius: 3px;
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid black;
border-bottom: 5px solid transparent;
}
</style>
</body></html>
did you mean that ?
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
label {
position: relative;
white-space: nowrap;
}
label:hover::before {
content: attr(data-tooltip);
bottom: calc(100% + 10px);
left: 50%;
position: absolute;
padding: 5px 10px;
background: black;
color: white;
border-radius: 3px;
transform: translate(-50%, 0);
}
label:hover::after {
content: '';
top: -10px;
left: 50%;
position: absolute;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
transform: translate(-50%, 0);
}
<label data-tooltip="I am Nancy Moore">Name</label>
Set the margin to 0 and z-index:1
margin: -3px 0 0 0;
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 0;
background: black;
color: white;
border-radius: 3px;
z-index:1
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid black;
border-bottom: 5px solid transparent;
}
<div data-tooltip="I am Nancy Moore">
<label>Name</label>
</div>
I'm looking for a CSS approach to make one div's side oblique, but with border radius at the top. for example
solution with transform skew doesnt work, because I need correct border-radius.
thanks in advance!
How about this? I made the two parts of the tab different colors, so you can see their outline.
.tab {
display: inline-block;
border: 1px solid black;
}
.tab .left {
background-color: pink;
border: solid red;
border-width: 3px 0 0 3px;
border-radius: 10px 0 0 0;
height: 20px;
padding: 0 10px;
float: left;
}
.tab .right {
background-color: #8080FF;
border: solid blue;
border-width: 3px 3px 0 0;
width: 20px;
height: 20px;
border-radius: 0 10px 0 0;
float: left;
transform: skew(30deg);
transform-origin: 0 100%;
}
<div class="tab">
<div class="left">TextTexT</div>
<div class="right"></div>
</div>
demo - http://jsfiddle.net/bu4aps5a/
use pseudo element :after
div {
width: 100px;
height: 40px;
border: 1px solid grey;
border-right: 1px solid transparent;
border-top-left-radius: 5px;
border-top-right-radius: 6px;
position: relative;
background: rgb(219, 219, 219);
text-align: center;
line-height: 40px;
}
div:after {
content: '';
width: 20px;
height: 100%;
position: absolute;
transform: skewX(25deg);
border: 1px solid grey;
border-left: 1px solid transparent;
top: -1px;
right: -11px;
border-top-right-radius: 6px;
background: rgb(219, 219, 219);
}
<div>test</div>
Here is a svg solution without any CSS:
<svg width="95" height="46">
<path d="M1,9 Q1,1 9,1 L70,1 Q76,0 80,9 L95,45 L1,45z" fill="#EEEEEE" stroke="#818185" stroke-width="1" />
<text x="25" y="29" font-size="18" font-weight="500" fill="#414145">Hits</text>
</svg>
I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below
#nameWidgeteMain {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
border: 1px solid #dbe0e3;
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
position: absolute;
width: 22px;
height: 31px;
top: 7px;
left: 270px;
background-color: rgb(237,237,237);
color: white;
border: 1px solid #dbe0e3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
text-align: center;
}
#nameWidgeteCloseTitle {
padding-top: 5px;
left: auto;
font-family: sans-serif;
font-size: 12pt;
color: rgb(158, 158, 158);
}
Maybe try something like this: http://jsfiddle.net/VNAZA/
Uses two divs: one with just the border, which gets layered under the rectangle and another with the actual content, layering over the rectangle. This way you can also apply css box-shadow to the lower div.
.container{
position:relative;
width: 50px;
height: 150px;
}
.rect{
position:absolute;
width: 50px;
height: 150px;
background: #eee;
border: 1px solid #000;
z-index: 5;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
.round_content{
position: absolute;
top: 50px;
right: -25px;
width: 50px;
line-height: 50px;
background: #eee;
z-index: 6;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.round_border{
position: absolute;
top: 49px;
right: -26px;
width: 52px;
height: 50px;
line-height: 52px;
border: 1px solid #000;
z-index: 4;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
<div class="container">
<div class="rect"></div>
<div class="round_content">x</div>
<div class="round_border"></div>
</div>
This is not possible with CSS.
Solution A) involves graphics used as background and solution B) uses a layer behind the vertical bar to draw the oval, a second layer for the bar itself and a third DIV for the X and it's link.
Use z-index property.
#nameWidgeteMain, #nameWidgeteMain2 {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
#nameWidgeteMain2 {
z-index: -2;
border: 1px solid #dbe0e3;
}
.nameWidgeteCloseArea {
z-index: -1;
...
}
This is not merging but the result is the same.
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.