How to make border for half-circle fade out? - css

I want to make half border of a circle which fades out at the end, like this:
I managed to create a border that fades out to the bottom like this:
#cont{
background: -webkit-linear-gradient(green, #fff);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
However, this circle does not fade out at 50% but on the bottom. Also the border does not become thinner. How can I achieve this?

I managed to make it using positions. I assume this would give a better understanding on how to make these kind of shapes.
#cont {
background: -webkit-linear-gradient(green -50%, #fff);
width: 300px;
height: 300px;
border-radius: 100%;
padding: 10px;
position: relative;
top: 0;
left: 0;
}
#box {
background: #fff;
width: 320px;
height: 320px;
border-radius: 100%;
position: absolute;
top: 2%;
left: 0.1%;
}
<div id="cont">
<div id="box"></div>
<div id="box2"></div>
</div>

You can use :after as below.
/*#cont{
background: -webkit-linear-gradient(green, #fff);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}*/
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
position: relative;
}
#box:after{
content: '';
display: block;
width: 100%;
height: 100%;
background: white;
border-radius: 1000px;
display: block;
top: 5px;
position: absolute;
}
<div id="cont">
<div id="box"></div>
</div>

Related

how to make floating border

I need to make a border a little different in some cards for a component that I'm developing, but I'm not finding a good solution for a border like this, follow the need in the image below.
yes you can make it using before & after pseudos' in CSS
here is example: https://codepen.io/anoopkumarseth/pen/MWQNXWb
.image_outer {
border: 1px solid red;
padding: 50px 80px 50px 30px;
background: #f1f1f1;
width: max-content;
}
.image {
position: relative;
height: 600px;
width: 300px;
}
.image:before, .image:after {
content: "";
height: 100%;
width: 100%;
border: 5px solid;
display: block;
position: absolute;
top: 15px;
left: 30px;
}
.image:after {
top: 30px;
width: calc(100% + 30px);
}
.image img {
display: block;
position: relative;
z-index: 999;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="image_outer">
<figure class="image">
<img src="https://images.unsplash.com/photo-1656004035327-593b0d1818ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=742&q=80">
</figure>
</div>

HTML Canvas align DIV at bottom right-hand corner

I have a Canvas and want to add a Div/Button in the bottom right-hand corner relative to Canvas. My current code looks as follows:
#container {
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer {
width: 40%;
background-color: red;
height: 100%;
}
#button {
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas {
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
But so far I couldn't manage to find a proper solution for this. It would be great if someone could help me with this.
Is this what you are looking for?
I recommand you checking out this article: CSS Layout - The position Property
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position:relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
I think Temani was right — this puts the button at the bottom right of the canvas, is this not what you wanted?
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position: relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
Like Temani Afif said.
position:relative
on #viewer worked for me.

how to make a spaciel line in css?

i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.

"Transparent" border around items on background

There have been several questions regarding some kind of transparent border but not what I am looking for, I think.
It might be very stupid but: Is it possible somehow to have items (those white squares) on a background (the black texture) with those items each having a border that "remove" the background for a 10px (or whatever) border?
So you have a continuous background and each item on top of it "cuts out" some part of it.
A true "transparent" border (like other questions) obviously would just let you see the background, so that is not what I mean.
If not, what would be the way to achieve a responsive design like that?
Sorry, I don't know any other way to explain it. Thank you.
See example/fiddle here: jsfiddle.net/14nn2pLy
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fd1dfa;
}
#main_header {
position: fixed;
top: 0px;
width: 100%;
height: 200px;
background: url() no-repeat center top;
background-size: contain;
}
#main_footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 200px;
background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
background-size: contain;
}
#icons {
position: fixed;
bottom: 0px;
width: 900px;
height: 75px;
background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
border: 10px;
border-color: rgba( 0, 0, 0, 0);
}
<div id="main_header"></div>
<div id="main_footer">
<div id="icons"></div>
</div>
My thought process
The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.
Example:
.bg {
position: relative;
height: 250px;
width: 500px;
background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}
.border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid black;
}
.no-border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid #F7F2D5;
}
<div class="bg">
<div class="border">black border</div>
<div class="no-border">"transparent" border</div>
</div>
Solution:
The desired effect is possible using clip-path on the background. Notice that I've changed the HTML and CSS too, otherwise it wouldn't work. The clip-path is used to basically cut out the part of the background image you don't want, so that it becomes transparent, and it is activated on hover.
body,
html {
height: 100%;
margin: 0;
}
body {
background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
background-size: cover;
}
.container {
height: 140px;
width: 618px;
position: relative;
top: 40%;
margin: 0 auto;
}
.bg {
height: 140px;
width: 618px;
position: relative;
}
.icon {
height: 50px;
width: 50px;
position: absolute;
top: 25.25%;
left: 38.25%;
z-index: 1;
}
.icon:hover+.bg {
clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}
<div class="container">
<div class="icon">
<img src="https://i.imgur.com/V2eI4Rm.png" alt="icon">
</div>
<div class="bg">
<img src="https://i.imgur.com/D3V3ZYq.png" alt="background">
</div>
</div>
you could create a image with transparent background and use that as a border-image.
.background {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background-color: #fd1dfa;
z-index: 1 !important;
}
.background:after {
content: "";
display: table;
clear: both;
}
hr {
border: 10px solid white;
position: relative;
top: 100px;
z-index: 5 !important;
}
.center {
position: relative;
width: 50px;
height: 50px;
background-color: #fd1dfa;
color: #ffffff;
padding: 10px;
z-index: 10 !important;
}
.border {
position: relative;
z-index: 8 !important;
margin: 30px;
width: 70px;
height: 70px;
float: left;
background: white;
border: 10px solid transparent;
border-image:
}
<div class="background">
<hr>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
</div>

How to make a curve on a rectangle's top in css? only in top edge

I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea

Resources