I've tried numerous ways using linear-gradients to create several stripes layered on top of each other and have gotten very close but seem to be stuck on the top face. I'm trying to accomplish this using gradients be it linear or radial so that I can eventually upgrade them to repeating gradients and have a nice background of cubes. I'm applying css to an empty body tag. I think it might actually be impossible, somebody please prove me wrong! This is the perspective i was going for:
/ \
|\ /|
| | |
\ /
I used the before and after pseudo-element to get the 3D cube effect. Here is the code:
<!doctype html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
margin: 20px;
background: red;
}
div::before {
display: block;
content: '';
position: absolute;
width: 71px;
height: 102px;
background: green;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg) translateX(-24px) translateY(96px) skewY(45deg);
}
div::after {
display: block;
content: '';
position: absolute;
width: 72px;
height: 100px;
background: blue;
-webkit-transform: rotateX(0) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(36px) skewY(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Welp, i fingered it out myself!
#cube
{
width:500px;
height:150px;
background:
linear-gradient(45deg,
black 0%,
black 43%,
transparent 43%,
transparent 60%,
black 60%,
black 100%
),
linear-gradient(-45deg,
black 0%,
black 43%,
transparent 43%,
transparent 60%,
black 60%,
black 100%
),
linear-gradient(90deg,
black 0%,
black 44%,
transparent 44%,
transparent 56.5%,
black 56.5%,
black 100%
),
linear-gradient(45deg,
transparent 0%,
transparent 50%,
rgba(150, 0, 0, 0.388235) 50%,
rgba(150, 0, 0, 0.388235) 100%
),
linear-gradient(-45deg,
transparent 0%,
transparent 50%,
rgb(255, 0, 0) 50%,
rgb(255, 0, 0) 100%
),
linear-gradient(90deg,
rgb(255, 0, 0) 0%,
rgb(255, 0, 0) 50%,
rgb(150, 0, 0) 50%,
rgb(150, 0, 0) 100%
),
black;
}
<!DOCTYPE html>
<html>
<body>
<div id="cube"></div>
</body>
</html>
Hi for creating a cube using css you must have to define the perspective width for box, and then rotate it to a certain angle to get its look.
here you may find how create a css cube
CSS 3D Cube
and here you may learn how Perspective property works
Perspective,
Hope it will help.
Related
I want to create a background-image with a gradient effect like below, how can I implement it?
And here is what I'm trying to do, and abviously I failed.
background:
radial-gradient(circle at 50% 0%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%),
radial-gradient(circle at 50% 100%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%);
body,
html,
* {
margin: 0;
padding: 0;
}
/* prettier-ignore */
body {
height: 100vh;
color: #fff;
background:
radial-gradient(circle at 50% 0%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%),
radial-gradient(circle at 50% 100%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%);
background-color: #fcb6f7;
}
.text-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid red;
height: 100vh;
}
(codepen)
The closest i can get, change the gradient to
background:
radial-gradient(circle closest-corner at 50% 0%, rgba(6 3 25 / 1) 105%, rgba(114 38 170 / 1) 130%, transparent 200%),
radial-gradient(circle closest-corner at 50% 100%, rgba(6 3 25 / 1) 105%, rgba(114 38 170 / 1) 130%, transparent 200%);
You can use Hex, I changed it to RGBA for experiment.
But you really need to have a vertical container to the effect to show correctly, else it will combine and look weird.
I did linear 115deg for doing 2 colors, but for the rest, I can't make them be nested gradient from top to bottom, here is my result gradient , the colors are : white and #F5F5F5 ( grey )
I want the grey that has linear also from bottom to top to be white
is that possible?
the result might like this
i did my own linear like the expected but with rgba to opacity it, using like this
background: linear-gradient(115deg, #ffffff 68vw, rgba(245, 245, 245, 0.5) 30vw);
i did this gradient for background color so i can put content inside the div
here is what i did => https://codepen.io/lpllplp222/pen/vYWPdBe
You can use clip-path to cut out the part of the gradient you want to be visible.
body {
background: black;
}
#do-linear {
width: 100%;
height: 300px;
background: linear-gradient(15deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.25));
clip-path: polygon(50% 100%, 70% 0%, 100% 0%, 100% 100%);
}
<div id="do-linear"></div>
I would like to achieve the following effect in a div box. What CSS would do the trick? Thank you in advance for your answers!
Using the linear-gradient function in CSS3, the code will be +- like this:
.box{
height: 100px;
width: 100px;
background: linear-gradient(to top, blue, white, blue)
}
as stated in the first answer, use css gradients, and combine with border-radius for your rounded corners.
.box{
height: 200px;
width: 150px;
background: linear-gradient(to top, #4690ff, #ffffff, #4690ff);
border-radius:15px 0px 0px 15px;
}
<div class="box"></div>
You can use CSS3 with linear gradient. Something like this:
.demo {
width: 150px;
height: 150px;
}
.gradient {
background: #508cf4; /* Old browsers for fallback */
background: linear-gradient(to bottom, #508cf4 0%, #ffffff 50%, #508cf4 100%);
}
<div class="gradient demo"></div>
You could also google for "css3 gradient generator" to have a GUI. For example cssgradient.io
You might test run a few css gradient tools like ColorZilla and GradientFinder to work with gradient colors.
Also, by combining a low opacity radial gradient with a linear gradient you can get a more rich look that might get closer to your original image.
.box {
display: block;
width: 182px;
height: 229px;
background:
radial-gradient(ellipse at center, rgba(252,253,255,.2) 54%,rgba(212,229,255,.2) 66%,rgba(212,229,255,.2) 66%,rgba(153,193,255,.2) 79%,rgba(153,193,255,.2) 79%,rgba(57,136,255,.2) 100%),
linear-gradient(to top, rgb(57, 136, 255) 0%, rgb(153, 193, 255) 13%, rgb(212, 229, 255) 23%, rgb(252, 253, 255) 43%, rgb(252, 253, 255) 57%, rgb(212, 229, 255) 77%, rgb(153, 193, 255) 87%, rgb(57, 136, 255) 100%);
border-radius: 16px 0 0 16px;
}
<div class="box"></div>
<p>original <img src="https://i.stack.imgur.com/OJ5Z6.png" /></p>
I want to create a shape in HTML using CSS like this
How can I create this shape in HTML using CSS. Any best solution.
Thanks
You can use CSS clip-path:
.yourclass {
width: 200px;
height: 200px;
background-color: orange;
-webkit-clip-path: polygon(20% 0%, 60% 0, 0 60%, 0 20%);
clip-path: polygon(20% 0%, 60% 0, 0 60%, 0 20%);
}
<div class="yourclass"></div>
Play around with it on Clippy.
I would like insight as to whether or not it is possible to develop a border pattern like the one displayed here through CSS code. I've considered making the pattern through a Photoshop-like program and then setting the background of the border to the url of the photoshop-made pattern. How I run into browser compatibility issues if I wish to pursue this through coding?
Able to make a pretty similar border using straight css.
First, in before, generated a box with 3 striped lines- one red, one blue, one beige. Also added the beige border to this.
Then, in the :after pseudo element, just gave the box a beige background (probably could look better with a gradient background too).
Check it out:
<!DOCTYPE html>
<html>
<head>
<style>
p.box:before{
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background:repeating-linear-gradient(
45deg,
hsl(60, 56%, 81%) 0px,
hsl(60, 56%, 81%) 4px,
red 5px,
red 14px,
hsl(60, 56%, 81%) 15px,
hsl(60, 56%, 81%) 20px,
hsla(247, 83%, 37%, 1) 21px,
hsla(247, 83%, 37%, 1) 30px
),
linear-gradient(
to bottom,
rgba(48, 26, 255, 1),
rgba(85, 66, 255, 1)
);
border: 5px solid hsl(60, 56%, 81%);
}
p.box:after{
content: '';
position: absolute;
right: -.5%;
bottom: -2.5%;
background: hsl(60, 56%, 81%);
z-index: -1;
height: 97%;
width: 97%;
}
</style>
</head>
<body>
<p class="box"></p>
</body>
</html>