I want to create arc transparent inside border radius with CSS\html. In fact I want corner div to be transparent and display bottom of page.
.corner{
float:right;
border-top-left-radius:60%;
width:50px;
height:48px;
margin-top:2px;
background:#fff;
background:rgba(f,f,f,0.1);
}
.div{
background-color: rgb(50,20,70);
width:130px;
height:50px;
}
.left{
float:left;
width:70px;
height:48px;
margin-top:2px;
color:white;
}
<div class="div">
<div class="left">345345</div>
<div class="corner"></div>
</div>
You can use a box-shadow to keep a transparent background on .corner :
.corner {
float: right;
border-top-left-radius: 60%;
width: 50px;
height: 48px;
margin-top: 2px;
box-shadow:0 0 0 500px rgb(50, 20, 70);
}
.div {
overflow:hidden;
width: 130px;
height: 50px;
}
.left {
float: left;
width: 70px;
height: 48px;
margin-top: 2px;
color: white;
}
body{
background:url('http://lorempixel.com/output/people-q-c-640-480-7.jpg');
background-size:cover;
<div class="div">
<div class="corner"></div>
<div class="left">345345</div>
</div>
Related
I have two containers and I want to link them with a negative-rounded-ish div : JSFIddle
HTML:
<div class="div"></div>
<div class="d-flex">
<div class="p1"></div>
<div class="p2"></div>
</div>
<div class="div"></div>
CSS:
.div {
background:#e0e0e0;
border:solid 1px red;
padding:10px;
border-radius:5px
}
.p1 {
background:#e0e0e0;
width: 25px;height: 10px;
-webkit-mask-image: radial-gradient(circle at left, transparent 0, transparent 19px, black 0px);
}
.d-flex { display:flex }
.p2 {
background:#e0e0e0;
width: 25px; height: 10px;
-webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 19px, black 0px);
}
Preview:
I want to know if I can extend borders to get sth like this
CSS tricks with before & after pseudo might help!
.div {
background:#e0e0e0;
border:solid 1px red;
padding:10px;
border-radius:5px
}
.join {
margin-left: 20px;
background:#e0e0e0;
width: 20px;
height: 10px;
overflow:hidden;
position:relative;
z-index:1;
margin-top:-1px;
margin-bottom: -1px;
}
.join:before, .join:after{
content: '';
height: 8px;
width: 10px;
position:absolute;
border-radius:10px;
border:1px solid red;
background-color:#fff;
}
.join:before{
left:-5px;
border-left: 0;
}
.join:after{
right:-5px;
border-right: 0;
}
<div class="div"></div>
<div class="join"></div>
<div class="div"></div>
I want the code to show up the 3 bars, and the 3 dots to eventually be dropdown options. For some reason the 1st out of the 3 dots does not want to be spaced correctly.
#dropdown {
background: #3f51b5;
padding: 30px;
margin: 0px;
}
#dot {
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
float: right;
}
#bar {
width: 25px;
height: 3px;
background: white;
margin: 5px;
}
<div id="dropdown">
<div id="dot"></div>
<div id="bar"></div>
<div id="dot"></div>
<div id="bar"></div>
<div id="dot"></div>
<div id="bar"></div>
</div>
Picture of what is returned:
This is a hard thing to do with floats.
A possible solution could be to wrap the dots and the bars within a div.
Afterwards you can position those wrapping divs in the style you like.
I used flexbox for this in the following snippet.
#dropdown {
display: flex;
justify-content: space-between;
align-items: center;
background: #3f51b5;
padding: 30px;
margin: 0px;
}
.dot {
width: 5px;
height: 5px;
margin: 5px;
background: white;
border-radius: 50%;
}
.bar {
width: 25px;
height: 3px;
background: white;
margin: 5px;
}
<div id="dropdown">
<div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
p.s.: you should use the keyword class instead of id for repeating elements. This might still work, but is considered bad practice and might break javascript implementations using that id.
You can easily do this with one element for each:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 10px;
height: 30px;
background:
radial-gradient(5px 5px at center, white 57%, transparent 61%) top/10px 10px;
float: right;
}
#bar {
width: 25px;
height: 22px;
margin: 4px 0;
background:
linear-gradient(#fff,#fff) top/100% 3px,
linear-gradient(#fff,#fff) center/100% 3px,
linear-gradient(#fff,#fff) bottom/100% 3px;
background-repeat:no-repeat;
float:left;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Here is another idea:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 5px;
height: 5px;
background:#fff;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
border-radius:50%;
float: right;
}
#bar {
width: 25px;
height: 23px;
padding:7px 0;
margin: 4px 0;
border-top:3px solid #fff;
border-bottom:3px solid #fff;
background:#fff content-box;
float:left;
box-sizing:border-box;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Also like this with pseudo element:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 5px;
height: 5px;
margin: 15px 0;
background:#fff;
border-radius:50%;
float: right;
position:relative;
}
#dot:before,
#dot:after{
content:"";
position:absolute;
height:inherit;
width:100%;
left:0;
background:inherit;
border-radius:inherit;
top:-8px;
}
#dot:after {
bottom:-8px;
top:auto;
}
#bar {
width: 25px;
height: 3px;
margin: 15px 0;
background:#fff;
float:left;
box-sizing:border-box;
position:relative;
}
#bar:before,
#bar:after{
content:"";
position:absolute;
height:inherit;
width:100%;
left:0;
background:inherit;
top:-8px;
}
#bar:after {
bottom:-8px;
top:auto;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Use something like if you want to check for first specific dot
#dropdown div:first-child {
position:relative;
top:4px
}
I suspect using line gradient?I know how to do the ellipse thing but I just don't understand how I can make the red line right through the middle?
I would make something like this: DEMO FIDDLE
CSS:
#container {
position: relative;
width: 200px;
background-color:black;
z-index:-2;
padding: 10px 0;
text-align:center;
}
#line {
position: absolute;
top: 50%;
width: 80%;
left:10%;
height: 1px;
box-shadow: 1px 1px 20px 5px red;
z-index:-1;
background-color: red;
}
#text{
color:white;
font-weight:bold;
text-transform:uppercase;
letter-spacing:8px;
text-shadow: 1px 1px 1px #ccc
}
HTML:
<div id="container">
<div id="text">Text</div>
<div id="line"></div>
</div>
My HTML page with 2 columns and footer and header:
<div id="main">
<div class="header"> </div>
<div class="left"> </div>
<div class="data"> </div>
<div class="bottom"> </div>
</div>
In my case I want left DIV with auto width and data DIV with 100% width. Like on this image:
How to CSS with IE 6 support? Thank you!
Demo
html
<div class="header">
header content
</div>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">
footer content
</div>
css
body, html{
padding:0;
margin:0;
position:relative;
height:100%
}
.header, .footer{
width:100%;
background:#ccc;
padding:10px;
box-sizing:border-box;
}
.content{
background:#eee;
width:100%;
padding:10px;
height:100%;
box-sizing:border-box;
padding:10px;
}
.left{
width:50%;
float:left;
background:#bbb;
height:100%;
}
.right{
width:50%;
float:right;
background:#aaa;
height:100%;
}
as required DEMO
css
keeping everything same as above just change below css
.content{
background:#eee;
width:100%;
padding:10px;
height:100%;
box-sizing:border-box;
padding:10px;
display:table
}
.left{
width:auto;
background:#bbb;
height:100%;
display:table-cell
}
.right{
background:#aaa;
height:100%;
display:table-cell;
width:100%
}
It will work i think.
Please check and let me know.
.container {
width: 500px;
max-height: 500px;
margin: 10px;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.mainbody,
.header,
.footer {
padding: 5px;
}
.mainbody {
margin-top: 0;
min-height: 150px;
max-height: 388px;
overflow: auto;
}
.header {
height: 40px;
border-bottom: 1px solid #EEE;
background-color: #ffffff;
height: 40px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.footer {
height: 40px;
background-color: whiteSmoke;
border-top: 1px solid #DDD;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.left{
width:50%;
float:left;
background:#bbb;
height:100%;
}
.right{
width:50%;
float:right;
background:#aaa;
height:100%;
}
<div id="container">
<div class="header">Header</div>
<div class="mainbody">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">Footer</div>
</div>
I have an audio player that i built with jquery. The markup and css is relatively simple but I cannot get the progress bar to change width with the width of the whole container.
It is set as a percentage but does not behave as a child of the container div. I am guessing it is something to do with the position being absolute but if i change that the whole thing goes wrong.
Here is the markup
<div class="container gradient">
<div style="width:100px; overflow:hidden; display:inline-block;"><img src="" class="artwork" height="100%"></div>
<div class="name">
<p1><br>
<b></b></p1>
</div>
<div class="logo" style="font-size:12px; text-align:right; font-weight:bold;">
<br>
<br>
</div>
<div class="player gradient">
<a class="controls gradient" id="play" href="" title=""></a>
<input type="range" id="seek" value="0" max=""/>
</div><!-- / player -->
</div><!-- / Container-->
And the css
.gradient {
border: 1px solid #C4C4C4;
background: #F2F2F2;
}
.container {
position: absolute;
width: 100%;
height: 122px;
top: 0%;
left: 0%;
padding: 10px;
.artwork {height:100px; overflow:hidden; margin-left:auto; margin-right:auto;}
.containerLarge {
height: 427px;
}
.name {left:120px; position:absolute; top:7px}
.player {
box-sizing: border-box;
position:absolute;
width:91%;
bottom: 10px;
left:120px;
border-radius: 3px;
padding: 5px;
}
.controls {
border-radius:1em;
background-color:#0485bf;
display: block;
width: 34px;
height: 34px;
background-image: url(../player/src/images/sprite.png);
background-repeat: no-repeat;
float: left;
margin-right: 5px;
}
.controls:hover {background-color:#005b85}
#play {
background-position: 6px 5px;
}
#pause {
background-position: -32px 5px;
}
input[type="range"] {
width: 250px;
margin-top: -5px;
}
#close {
float: right;
background-position: -146px 5px;
display: none;
}
.volume {
position: absolute;
height: 100px;
width: 34px;
border: 1px solid black;
background-color: #242323;
top: -97px;
display: none;
}
input{
display:none\9!important;
}
input[type="range"] {
border: 1px solid #C4C4C4;
position: absolute;
top: 18px;
display: block;
width: 95%;
height: 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #DBDBDB;
left: 50px;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border:1px solid #C4C4C4;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0485bf;
}
input::-webkit-slider-thumb: hover {opacity : 0.3;filter: alpha(opacity=30)}
.logo {float:right; }
.embed {width:100%; background-color:black }
The main elements in question are .container, .controls, .player and the input type range.
Hard to see what's going on from the markup. Which element is the progress bar? If something is positioned absolutely and set to 100% width, it will fill fill the width of the screen, rather than its parent element (unless it's parent is set to position:relative).