What we do with the box-shadows-CSS Tutorial-php.cn

What we do with the box-shadows

Linda Hamilton

Release： 2024-12-29 14:29:11

Original

801 people have browsed it

Every now and then I get a "CSS phase". The latest one started when I discovered CSSBattle. This website has daily challenges where you need to reproduce an image with CSS with the least amount of characters. I am horrible, extremely verbose, but I must say I got obsessed.

One of my favorite things is looking at other people's solutions, and this was how I discovered that my other fellow css-battlers uses box-shadow a lot there, and then I got super curiours about it. They basically use this property to replicate one retangle forever and ever. I'll show how.

The box-shadow property

There are lots of arrangements for this property, according to the documentation. But the one we use here is top left color. So, for example:

What we do with the box-shadows

(CSSBattle daily target for 16/11/2024)

In this image we see only one div; the other ones are shadows. So, the html will be:

<html>
   <body>
       <div></div>
   </body>
</html>

Copy after login

The CSS will be:

* {
   background: #6592CF;
   position: absolute;
 }

div {
   top: 52px;
   left: 52px;
   width: 70px;
   height: 30px;
   background: #EEB850;
   box-shadow:
       0 75px #243D83, 0 150px #EEB850,
       105px 0 #243D83, 210px 0 #EEB850,
       105px 75px #EEB850, 210px 75px #243D83,
       105px 150px #243D83, 210px 150px #EEB850;
}

Copy after login

Note that the top and left properties are in px, and the distances are relative to the first one.

Maybe I'm the only one, but I think that this is very interesting. I'll continue my studies in CSS and I'll let you if I find other cool things.

The above is the detailed content of What we do with the box-shadows. For more information, please follow other related articles on the PHP Chinese website!