This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 2 years ago.
I'd like to implement graphics with css of a photo-like image (not a button) but I'm not sure how to put the gradation of the border.
Can someone explain to me?
width: 50px;
height: 50px;
background: linear-gradient(-135deg, #27c4f3 0%,#9dd2ff 100%);
border-radius:42px;
border:4px solid;
display:inline-block;
cursor:pointer;
border-image:linear-gradient(#27c4f3 0%,#9dd2ff 100%);
I was able to achieve something similar by:
using an outer and inner circle
making the outer larger
positioning the inner in the center of the outer
making the background of the outer a gradient
.button {
background: linear-gradient(#0000ff 0%, #ff00ff 100%);
border-radius: 50%;
cursor: pointer;
display: grid;
height: 100px;
place-items: center;
width: 100px;
}
.button__body {
background: #fff;
border-radius: 50%;
display: grid;
place-items: center;
height: 80px;
width: 80px;
}
<div class="button">
<div class="button__body">Hey</div>
</div>
Related
This question already has answers here:
CSS 3 rotateY() and rotateX() not working as expected
(2 answers)
Closed 3 months ago.
I am trying achieve a movie-seat-booking project. a div box named screen that is as big movie screen in cinema.
How to achieve that my screen look same as the screen of example. thank you
/*this is my code*/
/*<div class="screen"></div>*/
.screen{
width: 180px;
height: 100px;
background-color: whitesmoke;
border-radius: .3125rem;
margin-left: 70px;
/* X-axis - counter-clockwise. */
transform: rotateX(-20deg);
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}
You can use perspective css property.Setting the property on a parent container gives its children a 3D space.
.wrapper {
display: flex;
justify-content: center;
perspective: 1000px;
}
.square {
width: 500px;
height: 200px;
transform: rotateX(320deg);
background: rebeccapurple;
}
<div class="wrapper">
<div class="square"></div>
</div>
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 4 months ago.
now i was doing a project. for fun with my friends wanted to do a circle where it rotates in the Z axis but i needed a gradient so did some research how to put a gradient on a border found this did it but my border radius went missing what do you guys recommend?
Take a look at this thread here: Is it possible to create a gradient border on a CIRCLE with css3?
Because you cannot use that with the border property, you have to add the linear gradient to the background. Then you must add a new element inside the circle to "cut out" the inner circle (and just leave a "border" showing"
Here is and example:
.circle {
--circle-size: 200px;
--circle-border-width: 10px;
background: -webkit-linear-gradient(top left, crimson, blue, pink);
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
padding: var(--circle-border-width);
}
.content {
width: var(--circle-size);
height: var(--circle-size);
background: white;
border-radius: 50%;
}
<div class="circle">
<div class="content"></div>
</div>
.circle {
background-image:linear-gradient(red,green);
padding:10px;
width:300px;
height:300px;
border-style: solid;
border-color:transparent;
border-radius: 50%;
border-width:1px;
padding:1px;
}
.circle > div {
background:lightyellow;
height: 299px;
width: 299px;
border-style: solid;
border-color:transparent;
border-radius: 50%;
border-width:1px;
}
<div class="circle">
<div></div>
</div>
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 12 months ago.
I am currently making a website and I want to make the border for a div a linear gradient. I tried to do it the way you put a gradient on a background but that doesn't work
.box {
width: 300px;
height: 300px;
border-radius: 20px;
border: solid linear-gradient(45deg, #2e01f8, #40c239) 5px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
background: grey;
}
<div class="box"></div>
Help would be appreciated.
You can use the border-image css property:
border-width: 4px;
border-style: solid;
border-image: linear-gradient(to bottom, cyan, blue) 1;
Tutorial on how it works: https://codyhouse.co/nuggets/css-gradient-borders#:~:text=How%20to%20create%20gradient%20borders%20in%20CSS.%20To,linear-gradient%20%28to%20right%2C%20darkblue%2C%20darkorchid%29%201%20%3B%20%7D
I have a box that has a border with a gradient on it, basically, it is a gradient box with a dark background box on it. Then I have another gradient box on it and I need to cut out some part of it to see the content below it - make it transparent. What would be the best approach to get this done right? Please see the screenshot to better understand what is needed.
I think this is how you can set the border of your inner component. Thanks to not touching the background properties, it is perfectly transparent.
.inner {
border: 10px solid;
border-image-source: linear-gradient(
45deg,
rgb(0, 143, 104),
rgb(250, 224, 66)
);
border-image-slice: 1;
}
For the position of the elements, I would do it with grid or with position absolute (up to you).
Regarding the background and borders: set the background of the bigger element, leaving the other element without background. Same border for both elements.
.container {
display: grid;
width: 225px;
height: 150px;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.big,
.small {
grid-column: 1;
grid-row:1;
border: 10px solid;
border-image: linear-gradient(red, orange) 1;
}
.big {
width: 100%;
height: 100%;
background: linear-gradient(to right, black, gray);
}
.small {
width: 70%;
height: 70%;
justify-self: center;
align-self: end;
margin-bottom: -20px;
margin-right: -20px;
}
<div class="container">
<div class="big"></div>
<div class="small"></div>
<div>
Keep in mind that you might want to choose a raster image or an SVG for these graphic elements.
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
SVG with radialGradient not work in browsers
(1 answer)
Closed 2 years ago.
In following code I expect both divs to be round. But the first one with border-image applied is square. How can I fix that and make it round too?
div {
float: left;
width: 130px;
height: 130px;
margin: auto;
border: 30px solid transparent;
border-radius: 50%;
border-image: linear-gradient(45deg, red, blue) 30;
}
div + div {
margin-left: 1em;
border-image: none;
border-color: green;
}
<div></div>
<div></div>
It is not possible to combine them. The W3 Spec says:
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
However, you can achieve the same effect by using a multiple elements and a CSS gradient
#cont{
background: -webkit-linear-gradient(left top, crimson 0%, blue 100%);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: white;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
You can use radial-gradient background-image. And you can mask it with mask-image. border-image does not work with border-radius.
div {
float: left;
width: 190px;
height: 190px;
margin: auto;
/* border: 30px solid transparent;
border-radius: 50%;
border-image: linear-gradient(45deg, red, blue) 30;*/
border-radius: 50%;
background: linear-gradient(45deg, red, blue);
-webkit-mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
}
div+div {
margin-left: 1em;
border-image: none;
border-color: green;
}
<div></div>
<div></div>