I need some help, I have a div with border-radius and I need it to be transparent outside the circle div. I tried with :after and outline. With ":after" the border stayed within the div and with outline I couldn't get it rounded.
Does anyone know the answer ?
CSS :
div.circle {
background: black;
width: 5em;
height: 5em;
-moz-border-radius: 2.5em;
-webkit-border-radius: 2.5em;
border-radius: 2.5em;
}
div.circle p {
padding: 2em 2em 0 2em;
color: white;
}
div.circle:after {
content:'';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 2.5em;
border: 4px solid rgba(255, 255, 255, 0.51);
}
CSS with outline property:
div.circle {
outline: 4px solid rgba(255,255,255,0.3);
background: black;
width: 5em; height: 5em;
-moz-border-radius: 2.5em;
-webkit-border-radius: 2.5em;
border-radius: 2.5em;
}
What I want:
http://giovannigras.be/home/img.png
Use box-shadow instead of border:
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.51);
Cause a transparent border will transpare the background beneath,
while if you use the spread value in the box-shadow property you're good to go:
Example demo
Also as suggested by #vals you can go with background-clip to retain the background size into the content-box size model cause otherwise goes into the default border-box.
Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
If you want your border to be transparent (or semitransparent), and you are setting a black background, you need to set the background limited to the inner part, so that the border can be seen.
The property for this is background-clip: content-box;
CSS
div.circle {
background: black;
background-clip: content-box;
width: 5em;
height: 5em;
border-radius: 50%;
border: solid 5px rgba(0,0,0,0.3);
}
fiddle
You can use a container to provide a border offset if you need it.
DEMO
HTML
<div class="border">
<div class="inner"></div>
</div>
CSS
.border {
width: 80px; height: 80px;
border-radius: 50%;
background: transparent;
border: 10px solid rgba(255,255,255,.4);
}
.inner {
width: calc(100% - 40px);
height: calc(100% - 40px);
border-radius: 50%;
background: rgba(255,255,255,.6);
border: 10px solid transparent;
margin: 10px;
}
Related
Image I'm able to achieve the top right border radius as per this design but for the left border I'm a bit confused.
.inverted-border-radius::before {
content: "";
position: absolute;
background-color: transparent;
bottom: 38px;
right: 0;
width: 20px;
height: 20px;
background: #d6dcea;
-webkit-mask-image: radial-gradient(
circle 10px at 0 0,
transparent 0,
transparent 20px,
black 21px
);
box-shadow: 0 -25px 0 0 #f66969;
}
This is css that I'm using. I know that some changes on radial-gradient will do the trick but getting really confused here.
apply border-bottom
.card {
width: 200px;
height: 50px;
border-radius: 5px;
border: 1px solid #dfe2e6;
border-bottom: 5px solid #2091bd;
}
<div class="card">
</div>
Currently, I am playing with HTML and CSS and I wanted to make a icon from this image
the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle but it did not work. For the shaded part, I used a box-shadow in styling it. There are already too many divs in my sample icon. I just want to have it simple and readable.
Here is my HTML structure:
<link rel="stylesheet" href="style.css">
<div class="cont">
<div class="icon2">
<div class="inner-circle"></div>
</div>
</div>
and here is my CSS:
.cont {
width: 190px;
height: 190px;
padding: 20px;
}
.icon2 {
position: relative;
border: 2px solid #353332;
width: 187px;
height: 184px;
border-radius: 50%;
background-color: #fff;
box-shadow: inset 20px 35px #1CAEE3;
transform: rotate(177deg);
}
.inner-circle {
border: 7px solid #353332;
width: 120px;
height: 183px;
background-color: #fff;
border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
transform: rotate(240deg);
display: block;
margin: 6px 0px 4px 35px;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
Can you explain me this and how can I come up with a solution to my problem? I'm stuck for hours and I just wanted to try it with pure HTML and CSS and not using photoshop.
You can easily do this with one element and radial-gradient. Simply adjust the percentage used inside the gradient to control the shape:
.box {
width:150px;
height:150px;
border-radius:50%;
border:4px solid;
background:
radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px));
}
<div class="box"></div>
You can also use box-shadow ;)
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
demo aside your image:
div {
border: solid 6px;
display: inline-flex;
height: 200px;
width: 200px;
border-radius: 50%;
box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px;
}
code {
font-size: 30px;
color: green;
margin: auto;
font-weight: bold;
}
div,
img {
vertical-align: middle;
}
<img src="https://i.stack.imgur.com/HRpQY.png">
<div><code>box-shadow</code></div>
another example :
div {
float:left;
height: 180px;
width: 180px;
margin: 1em;
box-sizing: border-box;
padding: 25px;
background: #F4E5D9;
box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;text-align:center;
}
div + div {border-radius:4em /50%;
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
you may also draw citrus slices https://codepen.io/gcyrillus/pen/wutEK .
but SVG would be at best here ;)
You could make use of a pseudo element and have an overflow:hidden to hide the rest of the pseudo element's parts that fall outside of the div's 'outer circle'
div {
height: 200px;
width: 200px;
overflow: hidden;
border: 5px solid black;
background:orange;
border-radius: 50%;
position: relative;
}
div:after {
content: "";
position: absolute;
height: 100%;
width: 200%;
border: inherit;
border-radius: 50%;
background: white;
top: -20%;
left: -100%;
}
<div></div>
Good evening! I just wanna to change my scroll like this.
So it looks like that track is hidden. I got my style like this
::-webkit-scrollbar{
width: 15px;
height: 40px;
}
::-webkit-scrollbar-thumb{
background-color: #DBDBDB;
border: 4px solid transparent;
border-radius: 11px;
background-clip: content-box;
}
::-webkit-scrollbar * {
background: transparent;
}
::-webkit-scrollbar-thumb:vertical {
height: 90px;
}
And I got such result:
So there is a question. How can I do this with CSS or JS maybe.
Thanks
I think this might work:
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(,0,0,0.5);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
You might have to edit it according to your need.
here to save the day, you must first add overflow: overlay; to your body tag, works the same as overflow: auto; but it will be on top of the content instead of on its side.
then just add this:
*::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 3px solid transparent;
background-color: rgba(0,0,0,0.3);
background-clip: content-box;
}
and adjust the color and the width to your liking, your welcome!
This question already has answers here:
CSS3 Box shadow to half of the div
(2 answers)
Closed 6 years ago.
I want to apply the box shadow to the upper half (upper 50%) of the div. I have tried everything but failed.
div{
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
box-shadow: 0px 0px 5px 5px;
}
Like mentioned: I want to add the box shadow to just the upper half of the div.
<div>Some text.</div>
You can use pseudo-element to add box-shadow and make that pseudo-element 50% of height of parent div. Also you need to set z-index: -1 so that pseudo-element appears under div.
div {
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
position: relative;
}
div:after {
content: '';
z-index: -1;
position: absolute;
left: 0;
height: 50%;
width: 100%;
box-shadow: 0px 0px 5px 5px;
top: 0;
}
<div>Some text.</div>
div{
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
border: none;
border-style: outset;
border-width: 5px 5px 0 0;
border-top-left-radius: 5px;
border-top-color: #6f6f6f;
border-bottom-right-radius: 5px;
border-right-color: #0e0e0e;
box-shadow: inset -2px -14px 47px 1px rgba(56,12,12,0.3);
}
<div>Box</div>
Try this.
border: none;
border-style: outset;
border-width: 5px 5px 0 0;
border-top-left-radius: 5px;
border-top-color: #6f6f6f;
border-bottom-right-radius: 5px;
border-right-color: #0e0e0e;
box-shadow: inset -2px -14px 47px 1px rgba(56,12,12,0.3);
I'm applying a box-shadow to an element with left and right borders.
I want the box shadow to stop so it doesn't appear underneath those borders.
Is there any way to achieve this without too many crazy wrappers?
<div id="button">Box-shadow, stop before the red borders!</div>
Here's a JSFiddle: http://jsfiddle.net/AHUEY/
You could do this with a pseudo element absolutely positioned relative to your target, instead of a box shadow:
#button {
position: relative;
background: #ccc;
text-align: center;
width: 400px;
border-left: 10px solid red;
border-right: 10px solid red;
}
#button::before {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 5px;
background: black;
}
demo
This is possible using the spread parameter of the box shadow.
Please see the working fiddle
http://jsfiddle.net/prashant_11235/dkR4H/
#button {
background: #ccc;
text-align: center;
width: 400px;
height: 25px;
border-left: 10px solid red;
border-right: 10px solid red;
box-shadow: 0px 15px 0px -10px black;
}
Replace border-right and border-left with box-shadow:
#button {
background: #ccc;
text-align: center;
width: 400px;
box-shadow: 10px 0 0 0 red, -10px 0 0 0 red, 0 5px 0 0 black;
}
http://jsfiddle.net/eEnpp/