css overflow hidden can't cover all element? - css

.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

Css: How to implement tooltip in css correctly

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>

rectangular with one oblique side

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>

How to merge two divs

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.

Position Image Sprite with CSS on a button

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

How to make Shutdown button with CSS3?

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.

Resources