For all of you that don't know how this works and want to put something inside of it, it's very simple: First thing to do, put something inside the div: Some random text here Second, in the css file you don't need .box::after, but don't remove it, you should change just 1 thing: from .box::after replace the "::after" with " .box_content", resulting in .box .box_content, if you used a different class name for the content inside the .box, just replace the one I used and it will work
I'm having trouble with this and I think due to the following: I'm trying this out on an existing page/project so, I'm not using the body properties you use. Everything else I've used and this doesn't work yet. Do I have to use the body properties (flex) in order for this to work? I'm not using using the asterisk properties, by the way. =).
@@bn5055 The asterisk/wildcard properties would affect the other elements on page. As I said, I'm not trying this as a standalone project, just mixing it with others on one page. I think re-classing the properties should be the only way to get this to work, right? =).
@@bn5055 I used a class for the body properties and this still doesn't work. It did make some changes but not working as this does. The only property I'm left to play with is the wildcard but I don't know how to apply this in the HTML. I think the box-sizing property is causing issue. =).
@@afriend8961 I would like to help, but it's easier to see the problem instead of reading it, right now I can't see the problem without seeing where you want to apply the border and what can be affecting it
content Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veritatis cupiditate voluptatibus obcaecati sunt. Magnam, modi rem, error corrupti aut rerum necessitatibus eos dicta ea harum dolorem placeat eum delectus!
Put something inside the div, for example: Hello World, and instead of using ".box::after", just use ".box .box_content" with the same properties, and it should work
For all you ctrl + c lovers out there:
.box::before{
content: '';
position: absolute;
width: 180px;
height: 140%;
background-color: white;
box-shadow: 0 0 20px rgb(8, 8, 8);
animation: animate 4s linear infinite;
}
.box::after{
content: '';
position: absolute;
inset: 10px;
background-color: rgb(4, 75, 97);
border-radius: 16px;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
😂thanks bro
Thanks buddy 😂
Thanks
Roll of after?????
Ma soch raha tha likhna para ga and you come like a batmen
Nice Design
For all of you that don't know how this works and want to put something inside of it, it's very simple:
First thing to do, put something inside the div: Some random text here
Second, in the css file you don't need .box::after, but don't remove it, you should change just 1 thing: from .box::after replace the "::after" with " .box_content", resulting in .box .box_content, if you used a different class name for the content inside the .box, just replace the one I used and it will work
ruclips.net/video/dIUOWdwwZBw/видео.html
Full ctrl + c:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(4, 75, 97);
}
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
overflow: hidden;
border-radius: 20px;
}
.box::before{
content: '';
position: absolute;
width: 180px;
height: 140%;
background-color: white;
box-shadow: 0 0 20px rgb(8, 8, 8);
animation: animate 4s linear infinite;
}
.box::after{
content: '';
position: absolute;
inset: 10px;
background-color: rgb(4, 75, 97);
border-radius: 16px;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
thanks bro
how did the white spaces appeared? i didnt understand that
cool video)
I'm having trouble with this and I think due to the following: I'm trying this out on an existing page/project so, I'm not using the body properties you use. Everything else I've used and this doesn't work yet. Do I have to use the body properties (flex) in order for this to work? I'm not using using the asterisk properties, by the way. =).
The body classes they're using are centering the card on the page. And...why aren't you using the asterisk properties?
@@bn5055 The asterisk/wildcard properties would affect the other elements on page. As I said, I'm not trying this as a standalone project, just mixing it with others on one page. I think re-classing the properties should be the only way to get this to work, right? =).
@@bn5055 I used a class for the body properties and this still doesn't work. It did make some changes but not working as this does. The only property I'm left to play with is the wildcard but I don't know how to apply this in the HTML. I think the box-sizing property is causing issue. =).
@@afriend8961 I would like to help, but it's easier to see the problem instead of reading it, right now I can't see the problem without seeing where you want to apply the border and what can be affecting it
Bhai me phone se speed 1s pr bahut aacha animated ho raha h
Why the inner white box looking like rotate in the background. Didnt move through corner
How can i put a photo inside the box
Please answer
muy bueno gracias
Bhai 5 color ek saath kaise round kare
Thank you
CTRL + C
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: rgb(0, 75, 97);
}
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 20px;
background-color: rgb(0, 0, 0);
z-index: 1;
}
.box::before {
content: '';
position: absolute;
width: 180PX;
height: 140%;
background-color: rgb(255 255 255);
box-shadow: 0 0 20PX rgb(8, 8, 8);
animation: animate 4s linear infinite;
z-index: 1;
}
.box::after {
content: '';
position: absolute;
inset: 10px;
background-color: rgb(4, 75, 97);
border-radius: 16px;
z-index: 1;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
**Note**You can add content...
Document
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 20px;
border: 1px solid black;
z-index: 1;
}
.box::before {
content: '';
position: absolute;
width: 88%;
height: 140%;
background-color: rgb(255, 74, 74);
animation: animate 14s linear infinite;
z-index: 1;
}
.box::after {
content: '';
position: absolute;
inset: 10px;
background-color: rgb(194, 239, 255);
border-radius: 16px;
z-index: 1;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.innder-box {
display: block;
z-index: 2;
padding: 20px;
text-align: justify;
text-align: center;
}
content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veritatis cupiditate voluptatibus obcaecati
sunt. Magnam, modi rem, error corrupti aut rerum necessitatibus eos dicta ea harum dolorem placeat eum
delectus!
cool but try with some tex inside
Put something inside the div, for example: Hello World, and instead of using ".box::after", just use ".box .box_content" with the same properties, and it should work
thx
How can I insert a text in the box?
add a this is a text tag inside the div simple
@@Nexaman18 I've tried it before, and even now, but the text goes outside of the box
@@davidbulambo6332your ishu still not solve?
@@Yadav_niharnot yet
change the z-index 0f the box @@davidbulambo6332
HTML
CSS
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 20px;
border: 1px solid black;
z-index: 1;
}
.box::before{
content: '';
position: absolute;
width: 180px;
height: 140%;
background-color: white;
box-shadow: 0 0 20px rgb(8, 8, 8);
animation: animate 4s linear infinite;
}
.box::after{
content: '';
position: absolute;
inset: 10px;
background-color: BLACK; // cambia a tu color favorito
border-radius: 16px;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
like
provide the code bro in the comment section