RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 07:57:47 +00:00
Code Issues Activity Actions

Base: Add background-image + border-radius HTML examples

Browse source
This commit is contained in:
MacDue 2022-06-15 21:26:40 +01:00 • committed by Linus Groh
parent 4e8e1492f9
commit 51899751d7
2 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

35
Base/res/html/misc/border-radius.html
View file

@ -180,6 +180,29 @@
border: 1px solid black; border: 1px solid black;
background-color: transparent; background-color: transparent;
} }
.nut {
width: 220px;
height: 180px;
background-size: 220px 180px;
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
background-image: url('old-computer.png');
}
.screenshot {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url("serenity-screenshot.png");
}
.rounded-image {
background-image: url("90s-bg.png");
background-repeat: repeat;
border-radius: 20px;
width: 150px;
height: 100px;
}
</style> </style>
</head> </head>
@ -239,6 +262,18 @@
<br> <br>
<br> <br>
<p>These boxes have (rectangular) background images, that are clipped by the border radius</p>
<em>In a nutshell</em>
<div class="nut"></div>
<br>
<em>In a circle</em>
<div class="screenshot"></div>
<br>
<em>Rounded</em>
<div class="rounded-image"></div>
<br>
<br>
<p>The boxes are 50x50px</p> <p>The boxes are 50x50px</p>
<em>All round 10px</em> <em>All round 10px</em>
<div class="box box-1"></div> <div class="box box-1"></div>

BIN
Base/res/html/misc/old-computer.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 462 KiB