Goal is a borderless circle with a soft edge, containing text or other elements. How do I get rid of the thin black border line in the following example? I've tried adding a border with the same or transparent color. It can be done with 1px x 1px and large spread, but I want to put stuff inside.
body { background: black; }
div {
width: 50px;
height: 50px;
margin: 50px;
padding: 50px;
border-radius: 50%;
background: white;
box-shadow: 0 0 10px 10px white;
}
<div>some text</div>
do it with a radial-gradient()
body { background: black; }
div {
width: 50px;
height: 50px;
margin: 50px;
padding: 70px;
border-radius: 50%;
background: radial-gradient(farthest-side,white calc(100% - 15px),transparent );
}
<div>some text</div>
Related
In my project, I allow users to upload profile pictures. I want these pictures to have a circular border, like instagram profile pictures do. Does anybody know how to add this affect?
I have tried the border-radius property, however this makes some images with white/transparent backgrounds looking like they have been cropped, and doesn't have the expected outcome.
Does anybody know how to add a circular type border to any image that is upload by a user? Thank you.
HTML CODE:
.fixedImage {
position: relative;
left: 70px;
width: 25px;
top: 50px;
height: 25px;
border-radius: 50%;
}
Use a border and a box-shadow...
div {
text-align: center;
display: inline-block;
padding: 2em 3em;
border: 1px solid lightgrey;
background: lightgreen;
}
img {
display: block;
border-radius: 50%;
border: 5px solid transparent;
box-shadow: 0 0 0 5px red;
}
.white {
border-color: white;
}
<div>
Transparent border
<img src="http://www.fillmurray.com/g/150/150" alt="">
</div>
<div>
White border
<img src="http://www.fillmurray.com/g/150/150" alt="" class="white">
</div>
Instead of img, you can use div and have your image in background. This will allow you to add a background color of your choice to avoid the transparency.
Example:
<div class="fixedImage" style="background-image: url(img.png)"></div>
CSS:
.fixedImage {
position: relative;
top: 50px;
left: 70px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
background-size: 100px 100px;
}
I think https://medium.com/#biancapower/how-to-make-a-rectangle-image-a-circle-in-css-2f392bc9abd3 is what you are looking for.
A div around the image gets the border-radius: 50%
HTML:
<div class="image-cropper">
<img src="https://www4.lunapic.com/editor/premade/transparent.gif">
</div>
CSS:
img {
height: 200px;
width: 200px;
padding: 20px;
}
.image-cropper {
width: 240px; // it seems you need to add the padding twice here
border-radius: 50%;
border: 1px solid red;
position: relative;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/bdL8zmu1/
Without background color:
https://jsfiddle.net/94z27bdL/
I have a block (container) with gradient as background color. The container have a border, and inside it, i have a text that I want to overflow part of a border and have the same background color. Now I have something like this:
But I want to achieve something like this:
To overflow some border area but still having the gradient background color, because if I add background color to the block of text, it still different from the gradient effect.
EDIT: I'd like to achieve something like this:
According to your JSFiddle code, I think the following code will help you.
.gradient-box {
background-image: linear-gradient(white, grey);
display: inline-block;
padding: 10px;
}
.container {
margin-top: 10px;
border: 3px solid black;
text-align: center;
display: inline-block;
padding: 10px;
}
.text {
margin-top:-20px;
}
.highlight {
background-color: #a9b0a9;
color: #429778;
}
<div class="gradient-box">
<div class="container">
<div class="text"> <span class="highlight"> TEXT </span></div>
</div>
</div>
You're wanting something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-color: #FBBFBF;
}
.container {
width: 300px;
height: 300px;
margin: 50px;
background-color: #FBBFBF;
position: relative;
border: 3px solid black;
border-radius: 15px;
}
.float-text {
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: #FBBFBF;
/* background-image: linear-gradient(to right, red 0%, orange 100%); maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
}
<div class="container">
<div class="float-text">
Text
</div>
</div>
EDIT: With transparent BG. Think this is only possible with square borders...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-image: linear-gradient(to right, red 0%, orange 100%);
}
.container {
width: 300px;
height: 300px;
margin: 50px;
position: relative;
border-top: 0;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
.top-border {
width: calc(100% - 100px);
height: 2px;
background-color: black;
position: absolute;
top: -1px;
left: -1px;
}
.top-border-end {
width: 20px;
height: 2px;
background-color: black;
position: absolute;
top: -1px;
right: -1px;
}
.float-text {
width: 80px;
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: transparent;
/* background-image: linear-gradient(to right, red 0%, orange 100%); maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
text-align: center;
}
<div class="container">
<div class="top-border"></div>
<div class="float-text">
Text
</div>
<div class="top-border-end"></div>
</div>
I would do it like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-color: rgba(255,0,0,0.25);
}
.container {
width: 300px;
height: 300px;
margin: 50px;
background-color: purple;
position: relative;
border: 3px solid black;
border-radius: 15px;
}
.float-text {
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: #fff2ac;
background-image: linear-gradient(to right, red 0%, orange 100%); /* maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
}
<div class="container">
<div class="float-text">
Text
</div>
</div>
Edit
You mention a gradient, maybe you mean like this? (I added the gradient behind the the text box). If not - remove the background-image gradient if you just want solid colour.
I am finding it hard to fit an image inside a Div that contain a text. Everytime I try to get it to fit inside the boundaries of the super div, it simply goes out of bounds regardless of what I use from the css side. can anyone tell me what I am doing wrong?
.justRight {
float: right;
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
margin-right: 50px;
background-image: url(https://internal.bs.fb.ac.uk/modules/2017-
18/bsl/css/sign_language.png);
background-size: cover;
background-repeat: no-repeat;
}
.jas {
background-color: white;
border: 1px outset blue;
position: absolute;
margin-left: 20px;
border-top: 40px solid blue;
border-right: 2px outset blue;
margin-top: 10px;
margin-right: 20px;
height: 80px;
padding-left: 10px;
width: 96.3%;
}
<div class="jas">
<h1>Sign Language</h1>
<div class="justRight">
</div>
</div>
By saying height: 80px to parent (.jas), you are restricting the parent div's height to 80px. So it wont go beyond. So remove height of parent(.jas). Set a height to the child instead(.justRight).
Not sure why you used float: right value to the child(.justRight). Please remove if it is unnecessary.
Codepen: https://codepen.io/johnsackson/pen/KRdvMQ
* {
box-sizing: border-box;
}
.justRight {
height: 100px;
max-width: 100%;
margin-bottom: 10px;
background: url(https://placehold.it/1920x200) 0 0 no-repeat;
background-size: cover;
}
.jas {
background-color: white;
border: 1px outset blue;
/* position: absolute; */ /* use if only needed */
margin: 10px 0;
border-top: 40px solid blue;
border-right: 2px outset blue;
padding: 0 10px;
width: 100%;
}
Hope this helps.
Your problem is that the h1 tag is on position: relative. Changing it would solve your issues.
h1 {position: absolute}
I am trying add shadow to a div. shadow should be at top and half of its height from top ( to both left and right side), someone please help me.
.test {
width: 200px;
height: 200px;
margin: 10px;
border: solid 1px red;
position: relative;
background-color: white;
}
you can increase offset and reduce size of box shadow and draw 2 of them.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
/* offset-x | offset-y | blur-radius | spread-radius | color */
<spread-radius>
This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
#test {
width: 200px;
height: 200px;
margin: 10px;
border: solid 1px red;
position: relative;
background-color: white;
box-shadow: -50px -50px 5px -50px, 50px -50px 5px -50px
}
<div id="test"></div>
This could be a simple way to do it, quite a few possibilities.
.parent{
width: 200px;
height: 200px;
margin: 10px;
position: relative;
}
.test {
z-index: 2;
width: 100%;
position: relative;
height: 100%;
border: solid 1px red;
background-color: white;
}
.halfshadow{
position: absolute;
width: 100%;
top: 0;
height: 50%;
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="parent">
<div class="test"></div>
<div class="halfshadow"></div>
</div>
How can I style a a circle (a div) with two borders responsively so that it reacts to a container's size?
Suppose circles like this for example:
Here is a working CSS for a circle:
div.circle {
width: 90%;
height: 0;
padding-bottom: 90%;
margin: auto;
float: none;
border-radius: 50%;
border: 1px solid green;
background: pink;
}
<div class="circle"></div>
How can I add a border with two colors? I tried outline but it came out as a rectangle. I tried to place another div inside the circle div and use background color but I can't align the inner div vertically.
I'd suggest, with the following HTML:
<div></div>
The CSS:
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red;
}
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red;
}
<div></div>
JS Fiddle demo.
The box-shadow gives the outermost ring of colour, the border gives the white 'inner-border'.
Alternatively, you can use a box-shadow with the inset keyword, and use the box-shadow to generate the 'inner-border' and use the border as the outermost border:
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid red;
box-shadow: inset 0 0 0 5px white;
}
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid red;
box-shadow: inset 0 0 0 5px white;
}
<div></div>
JS Fiddle demo.
Obviously, adjust the dimensions to your own taste and circumstances.
Using the box-shadow to generate the outermost border, however, allows for multiple borders (alternating red and white in the following example):
div {
width: 20em;
height: 20em;
margin: 20px;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}
div {
width: 20em;
height: 20em;
margin: 20px;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}
<div></div>
JS Fiddle demo.
There are already two very good answers on this thread but here are a couple of more approaches to make this thread more complete with all possible approaches. The output produced by these are also responsive.
Using a pseudo-element:
You can use a pseudo-element that is smaller in size than the parent and position it absolutely within the parent. When the background is added to the pseudo-element and a border is added to the parent it looks like there is a gap between the border and the background. If the gap needs to be transparent then we need not add any background on the parent. If the gap needs to be of a solid color (that is, it needs to look like a second border) then a border of that color and required width should be added to the pseudo-element.
While using this approach, the inner area can also have image or a gradient as the fill (background).
.circle {
position: relative;
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
color: white;
border-radius: 50%;
border: 2px solid brown;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: brown;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid white;
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
/* Just for demo */
div {
float: left;
margin-right: 10px;
transition: all 1s;
}
div:hover{
height: 250px;
width: 250px;
}
body {
background: url(http://lorempixel.com/500/500/nature/3);
background-size: cover;
}
<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
<div class='circle image'>Hello!</div>
Using Radial Gradients:
This is also a possible approach but has very low browser support and hence it is not recommended but the idea could be of use elsewhere. Essentially what is done is that a radial-gradient (circular shaped) is added to the element such that it leaves a transparent or a solid colored gap (extra border) between the solid background color and the actual border.
.circle{
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
color: white;
border-radius: 50%;
border: 2px solid brown;
background: radial-gradient(circle at center, brown 66.5%, transparent 68%);
}
.circle.white{
background: radial-gradient(circle at center, brown 66.5%, white 68%);
}
/* Just for demo */
div{
float: left;
margin-right: 10px;
transition: all 1s;
}
div:hover{
height: 250px;
width: 250px;
}
body{
background: url(http://lorempixel.com/500/500/nature/3);
background-size: cover;
}
<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
Another approach would be to use the background-clip property. It wont allow you to choose the color of the innner border but it will show the background in that gap :
div {
width: 150px;
height: 150px;
padding:2px;
border-radius: 50%;
background: #DD4814;
border: 2px solid #DD4814;
background-clip: content-box;
margin:0 auto;
}
/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}
<div></div>
Note that you control the gap size with the padding value.
Here is a fiddle where I draw one circle with a border and box-shadow to create the outer circle effect https://jsfiddle.net/salientknight/k18fmepL/1/
Tested and works in Chrome, Safari and Opera -- Fails in Firefox if text gets too large Good for about 3 characters font size 1em then height and width get out of sync -- will work in FireFox with a fixed size height and width...
<!-- Inside H1 -->
<h1><p class='circleBlue'>10000%</p></h1>
<!-- Regular -->
<p class='circleBlue'>10000%</p>
p.circleBlue{
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #159fda;
border: 5px Solid #fff;
color: #fff;
min-width: 1em;
border-radius: 50%;
vertical-align: middle;
padding:20px;
box-shadow: 0px -0px 0px 3px #159fda;
-webkit-box-shadow: 0px -0px 0px 3px #159fda;
-moz-box-shadow: 0px -0px 0px 3px #159fda;
margin:5px;
}
p.circle:before{
content:'';
float: left;
width: auto;
padding-bottom: 100%;
}
update I could not get this to work with a variety of text sizes and in all browsers so I added some js. I'm pasting it here so their is one complete solution all together. changesSizes is a function that makes sure that height and width always match... first checking which is bigger and then setting the value of both to the larger of the two (yes one of these assignments is redundant but it gives me peace of mind). The final effect is that I can add content of many shapes and sizes. The only real limitation I have found is taste.
changeSizes(".circleBlue");
//changeSizes(".circleGreen");
//changeSizes(".circleOrange");
---------
function changeSizes(cirlceColor){
var circle = $(cirlceColor);
circle.each(function(){
var cw = $(this).width();
var ch = $(this).height();
if(cw>ch){
$(this).width(cw);
$(this).height(cw);
}else{
$(this).width(ch);
$(this).height(ch);
}
});
}
Example: