I want to design the following for displaying profile picture. I tried using border-style: dashed, but that's not what I want; I want only three lines (dashes) in the border. How can I accomplish this?
Here's what I tried:
#circle {
border-radius: 100%;
width: 100px;
height: 100px;
border: 5px dashed;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<body>
<div id="circle"></div>
</body>
</html>
The effect I desire:
Here is an idea with multiple background:
#circle {
border-radius: 100%;
width: 100px;
height: 100px;
border: 5px solid transparent; /* Control the thickness*/
background:
url(https://picsum.photos/id/100/200/200) center/cover content-box,
linear-gradient(blue,blue) top /100% 20% border-box,
linear-gradient(blue,blue) bottom left /35% 50% border-box,
linear-gradient(blue,blue) bottom right/35% 50% border-box;
background-repeat:no-repeat;
}
<div id="circle"></div>
If you want space between image and border add an extra layer:
#circle {
border-radius: 100%;
width: 100px;
height: 100px;
border: 5px solid transparent; /*Control the thickness*/
padding:3px; /*control the space*/
background:
url(https://picsum.photos/id/100/200/200) center/cover content-box,
linear-gradient(white,white) padding-box,
linear-gradient(blue,blue) top /100% 20% border-box,
linear-gradient(blue,blue) bottom left /35% 50% border-box,
linear-gradient(blue,blue) bottom right/35% 50% border-box;
background-repeat:no-repeat;
}
<div id="circle"></div>
I tried something like that, not sure if entirely fit your needs..but give it a try, maybe it's a good starting point for you. Play with the numbers from css file and maybe you got exactly what you need.
Codesandbox here: https://codesandbox.io/s/vibrant-glade-uo7bg
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: gray;
position: relative;
}
#shadow-1 {
position: absolute;
top: -1px;
left: -1px;
width: 85px;
height: 85px;
transform: rotate(-20deg);
border-radius: 50%;
box-shadow: 5px 5px 0 -4px blue;
}
#shadow-2 {
position: absolute;
top: -5px;
left: -2.5px;
transform: rotate(-40deg);
width: 85px;
height: 85px;
border-radius: 50%;
box-shadow: 5px -5px 0 -4px blue;
}
#shadow-3 {
position: absolute;
top: -1px;
left: -4px;
width: 85px;
height: 85px;
transform: rotate(20deg);
border-radius: 50%;
box-shadow: -5px 5px 0 -4px blue;
}
<h1>Hello Circle!</h1>
<div>
<div class="circle">
<div id="shadow-1"></div>
<div id="shadow-2"></div>
<div id="shadow-3"></div>
</div>
</div>
Related
I have 3 layers div, image, div containing circles. I need to add black opacity background to image and add circles top of it. Circles suppose to show non black opacity applied image. Please see the image below
.
I tried to do this using box shadows but shadows kept stacking. I also looked for clip-path but needed black opacity background and clip-path did not allow me to that. Could you point me to correct css property?
.main {
width: 500px;
height: 55px;
position: absolute;
}
.circle-1{
width: 50px;
height: 50px;
border-radius: 50%;
border-style: solid;
border-width: 2px;
border-color: white;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}
.circle-2{
position: relative;
left: 150px;
width: 50px;
height: 50px;
border-radius: 50%;
border-style: solid;
border-width: 2px;
border-color: white;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}
.circle-3{
position: relative;
left: 150px;
width: 50px;
height: 50px;
border-radius: 50%;
border-style: solid;
border-width: 2px;
border-color: white;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}
<div class="main">
<div class="circle-1"/>
<div class="circle-2"/>
<div class="circle-3"/>
</div>
Add mix-blend-mode: overlay to the circles, and use filter: brightness(0.7) on the <img> to make the overlay.
.img-container {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
}
.img-container .circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
border-radius: 50%;
background: #fff;
mix-blend-mode: overlay;
}
<div class="img-container">
<img src="https://i.imgur.com/0hRbRO2.jpeg" alt="Egg Awarma" loading="lazy" />
<!-- image source: https://imgur.com/gallery/0hRbRO2 -->
<div class="circle"></div>
</div>
JS Fiddle demo.
Can anyone please help with this? How to achieve the attached button with CSS only(no image)?
This is my code so far:
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
<div class="triangle-up"></div>
Use pseudo element where you apply a radial-gradient:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background:green;
border-radius:50px;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:50%;
width:60px;
height:25px;
transform:translateX(-50%);
background:
radial-gradient(farthest-side at top left , transparent 98%,green 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,green 100%) right;
background-size:50.2% 100%;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box">more and more text here</div>
<div class="box">2 lines <br>of text</div>
Another idea in case you want any kind of coloration:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background-image:linear-gradient(60deg,yellow,purple,green,blue);
background-size:100% calc(100% + 25px);
background-position:bottom;
border-radius:50px;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
bottom:0;
left:0;
right:0;
height:calc(100% + 25px);
background-image:inherit;
-webkit-mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
-webkit-mask-size:30px 25px;
mask-size:30px 25px;
-webkit-mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box" style="
background-image:linear-gradient(160deg,white,red,black,orange);">more and more text here</div>
<div class="box" style="
background-image:linear-gradient(180deg,blue 20%,violet 20%,black);">2 lines <br>of text</div>
you can use the shadow on both rounded pseudos
.bubble {
position: relative;
background: #00aabb;
border-radius: 0.4em;
width: 200px;
height: 100px;
}
.bubble:after,
.bubble:before {
content: "";
position: absolute;
height: 3em;
width: 3em;
border-radius: 50%;
top: 100%;
margin: -1px;
}
:after {
left: 50%;
box-shadow: -0.8em -1.4em 0 -0.5em #00aabb
}
:before {
right: 50%;
box-shadow: 0.8em -1.4em 0 -0.5em #00aabb;
}
<div class='bubble'></div>
to understand how it works, give a background to the pseudo and another color to the shadows. You'll be able to reproduce for the sides or the top. It's a matter of the circle size and shadow's size and direction.
One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.
In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::after.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
overflow: hidden;
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: white;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
Here is a more visual demonstration of what the code is actually doing. The ::before and ::after elements are represented by the red circles. I've reduced the transparency of their fill to 50% so you can see which portion of the .point div they're cutting off.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: rgba(255,255,255,0.5);
border: 1px solid red;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
I am able to make a normal square div and a triangle div in CSS. But I don't know how to make such a shape with a single div. Can anyone help me out ?
Also I want this to spread to the entire width of it's parent but border properties don't support percentages. ( eg border-left: 160px solid transparent; )
.container{
width: 100%;
position: relative;
}
.v-div {
width: 0;
height: 0;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
border-top: 100px solid #f00;
}
.box{
height: 80px;
width: 320px;
background: red;
}
<div class="container">
<div class="box">
</div>
<div class="v-div">
</div>
</div>
you can use clip path css property
#clippedDiv{
width:200px;
height:200px;
background-color:red;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0
}
<div id="clippedDiv"></div>
for more shapes you can visit http://bennettfeely.com/clippy/
you can do it with :after pseudo classes. If you uncomment the :before in this example you get a hexagon
#hexagon{
position: relative;
height:100px;
width:50%;
color: white;
background: green;
padding-bottom: 15%;
overflow:hidden;
background-clip: content-box;
}
#hexagon:after {
content: "";
position: absolute;
top:100px;
left: 0;
background-color:green;
padding-bottom: 50%;
width: 57.7%;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
<div id="hexagon"></div>
use :after css selector.
.container{
width: 100%;
position: relative;
margin-top: 100px;
}
.box {
width: 100px;
height: 55px;
background: red;
position: relative;
}
.box:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
<div class="container">
<div class="box">
</div>
</div>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /></svg>
I need to draw vertical lines inside a semi-circle which is present inside the egg shaped div.
HTML
<body>
<div id="white">
<div id="yolk">
</div>
<div id="verticalLine1">
</div>
</div>
</body>
CSS
body {
background-color: #98FDF5;
position: relative;
}
#white {
display: block;
width: 180px;
height: 240px;
background-color: #ffffff;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#white #yolk {
position: absolute;
width: 140px;
height: 70px;
z-index: 2;
top: 130px;
left: 20px;
border-radius: 0 0 80px 80px;
border: 0.08em solid black;
padding-bottom: -50px;
}
#verticalLine1 {
border-top: 0.08em solid black;
z-index: 4;
padding-top: 10%;
}
Fiddle for my work.
How about using a repeating-linear-gradient to do the job. Browser support is not that bad.
Can i use CSS Repeating Gradients.
You can easily rotate the lines if you wish.
body{
background-color:#98FDF5;
position:relative;
}
#white {
display:block;
width: 180px;
height: 240px;
background-color: #ffffff;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#white #yolk {
position: absolute;
width: 140px;
height: 70px;
z-index:2;
top:130px;
left:20px;
border-radius: 0 0 80px 80px;
border:0.08em solid black;
padding-bottom:-50px;
background-image:repeating-linear-gradient(90deg, white -14px, white 27px, black 27px, black 29px);
}
#verticalLine1 {
top:100px;
border: thick solid black;
}
<body>
<div id="white">
<div id="yolk">
</div>
<div id="verticalLine1">
</div>
</div>
</body>
I will suggest a simple solution
-Add <hr> tag to your HTML Code
Give your tag a class="line"
In your css class add this
transform: rotate(90deg);
Then you can margin it where ever you want.
Edited*
If the <hr> dissapears then try give it a
possition: absolute
Would this be a start? Simple and browser support down to IE9.
body{
background-color:#98FDF5;
position:relative;
}
#white {
display:block;
width: 180px;
height: 240px;
background-color: #ffffff;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#white #yolk {
position: absolute;
width: 140px;
height: 70px;
z-index:2;
top:130px;
left:20px;
border-radius: 0 0 80px 80px;
border:0.08em solid black;
padding-bottom:-50px;
text-align: center;
overflow: hidden;
}
.verticalLine1 {
display: inline-block;
position: relative;
width: 8px;
height: 100%;
border: 0px solid black;
border-width: 0 4px;
margin: 0 2px;
}
<div id="white">
<div id="yolk">
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
</div>
</div>
I am trying to achieve this:
I couldn't find anything like it, but here is my failed attempt:
#one {
width: 200px;
height: 100px;
background-color: white;
box-shadow: 0px 0px 20px #2D8DBD;
left: 50px;
display: inline-block;
margin-right: -100px;
}
#two {
width: 200px;
height: 100px;
background-color: white;
box-shadow: 0px 0px 20px #B22D2D;
left: -50px;
display: inline-block;
margin-left: -50px;
z-index: -1;
}
<center>
</br>
</br>
<div id="one"></div>
<div id="two"></div>
</center>
jsFiddle demo.
I am using bootstrap, so I don't think just making another "gradient" image would be simpler.
Also, I have tried compromising for this: http://designposts.net/fresh-free-css3-and-html5-tutorials/ but my image is circled, and so it turns out as a cut square.
You can fake one, using background gradient and a box-shadow, as well as a css pseudo element to mask the border. Note that if you change the background color of the surrounding content you have to change every instance of #444
.outer {
box-sizing: border-box;
padding: 25px;
height: 200px;
width: 200px;
box-shadow: 0px 0px 10px 10px #444 inset;
border-radius: 50%;
background: linear-gradient(to bottom right, rgb(250,50,50), rgb(50,150,250));
}
.outer::before {
content: "";
display: block;
position: relative;
left: -26px;
top: -26px;
height: 202px;
width: 202px;
border-radius: 50%;
border: 3px solid #444;
box-sizing: border-box;
}
.inner {
position:relative;
top: -204px;
left: -3px;
border-radius: 50%;
background: linear-gradient(to bottom right, #ee2135, #6279ff);
padding: 2px;
height: 150px;
width: 150px;
box-shadow: 0px 0px 30px -5px black;
}
.content {
height: 100%;
width: 100%;
background: #444;
border-radius: 50%;
}
/* Styling only past here */
html, body {
text-align: center;
padding: 0px;
margin: 0px;
height: 100%;
background: #444;
}
body::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.outer {
display: inline-block;
vertical-align: middle;
}
<div class="outer">
<div class="inner">
<div class="content">
</div>
</div>
</div>
As I understand your request, you need a border on the element that is filled with a gradient effect.
That could be get with a border-image, but then the border-radius wouldn't work.
If your inner background is black solid, that can be achieved setting different backgrounds, and playing with the zone affected by each one (with background-clip and background-origin)
In the snippet, 2 examples, one with radial gradients and the other with linear gradients
The best about that solution is that the border is still a border. You can set the width, the radius, and so on, the usual way
.test {
width: 250px;
height: 200px;
display: inline-block;
margin: 5px;
border-radius: 20px;
border: solid 10px transparent;
}
#test1 {
background: linear-gradient(black, black),
radial-gradient(circle at left top, red 30px, transparent 150px),
radial-gradient(circle at right top, blue 30px, transparent 150px),
cyan;
background-clip: content-box, border-box, border-box, border-box;
background-origin: content-box, border-box, border-box, border-box;
}
#test2 {
background: linear-gradient(black, black),
linear-gradient(to bottom right, red 30px, transparent 150px),
linear-gradient(to bottom left, blue 30px, transparent 150px),
cyan;
background-clip: content-box, border-box, border-box, border-box;
background-origin: content-box, border-box, border-box, border-box;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You may be able to do this with a single element, in conjunction to a pseudo element to act as the border. This may have a higher browser compatibility than border-image.
mock up demo
html,
body {
margin: 0;
padding: 0;
}
html {
background: #222;
}
div {
height: 200px;
width: 200px;
background: gray;
position: relative;
border-radius: 10px;
margin: 20px auto;
}
div:before {
content: "";
position: absolute;
top: -5%;
left: -5%;
border-radius: inherit;
height: 110%;
width: 110%;
z-index: -1;
background: linear-gradient(to bottom right, rgba(250, 50, 50, 0.5), rgba(50, 150, 250, 0.5)), linear-gradient(to bottom left, blue 30px, transparent 150px);
box-shadow: inset 0 0 10px 5px #222;
}
<div></div>
This is done with just CSS Grid, no JavaScript. Check it out and see if this is what you are looking for
https://codepen.io/dszlauer/pen/RLjwZq?editors=1100#
<html>
<body>
<div class="grid">
<div class="blurBox"></div>
<div class="inputBox">
<div class="fName">f</div>
<div class="lName">l</div>
</div>
</div>
</body>
</html>
body {
background-color: black;
color: white;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-gap: 20px;
//border: 1px solid white;
}
.blurBox {
grid-row: 1 / 1;
grid-column: 1 / 1;
background: linear-gradient(-45deg, red, blue);
filter: blur(5px);
border-radius: 5px;
}
.inputBox {
grid-row: 1 / 1;
grid-column: 1 / 1;
margin: 7px;
background: black;
border: 1px solid white;
border-radius: 5px;
z-index: 1;
}
.fName {
margin: 20px;
border: 1px solid white;
}
.lName {
margin: 20px;
border: 1px solid white;
}