Theory
Theory

PNG-24 format

PNG-24 is an excellent format. It is well suited for schematics, drawings, graphs, text, and complex multicolor images, as it supports an almost unlimited number of colors.

In photos, it is usually inferior to JPEG in terms of file size, but superior in terms of image quality. But sometimes the difference in file size is so non-critical that you can use PNG.

The most important advantage of PNG-24 is full support for semi-transparency, which is not available in any other format. Therefore, there is no alternative to PNG-24 in web development when designing complex backgrounds, graphic elements with complex shadows and so on.

Compare the kitty in PNG-8 from the previous assignment and the kitty in PNG-24 from this assignment. Especially how their edges look on the yellow block and the gradient block.

You can always use PNG-24 instead of PNG-8.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>PNG-24 format</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box box1"> <div class="block"></div> </div> <div class="box box2"> <div class="block"></div> </div> <div class="box box3"> <div class="block"></div> </div> </body> </html>

CSS

.box { width: 300px; height: 140px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .box1 { background-color: #2ecc71; } .box2 { background-color: #f1c40f; } .box3 { background-image: linear-gradient(to bottom, #2ecc71, #f1c40f); } .block { height: 134px; background-repeat: no-repeat; background-position: 50% 50%; }

GoalsCompleted

Give elements with class block background image cat_cage.png.