<!DOCTYPE html>
<html>
<head>
<title>programowanie - CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
#div1 {
background-color: Pink;
height: 100px;
width: max(5vw, 100px);
}
#div2 {
background-color: PaleVioletRed;
height: 100px;
width: max(25vw, 100px);
}
#div3 {
background-color: LightSalmon;
height: 100px;
width: max(50vw, 100px);
}
</style>
</head>
<body>
<p>Zmniejsz oraz powiększ stronę żeby zobaczyć efekt.</p>
<div id="div1">Przykładowy tekst...</div>
<div id="div2">Przykładowy tekst...</div>
<div id="div3">Przykładowy tekst...</div>
<br />
<img src="grafika/buzia.png" style="width: max(10vw, 150px);" alt="buzia" />
<img src="grafika/buzia.png" style="width: max(20vw, 150px);" alt="buzia" />
<img src="grafika/buzia.png" style="width: max(30vw, 150px);" alt="buzia" />
<div style="width: max(200px, 1fr); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(400px, 1fr); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(400px, 30%); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(400px, 60%); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(30%, 400px); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(70%, 400px); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(100px, max-content); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(min-content, 400px); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(max-content, auto); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(auto, 300px); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(min-content, auto); background-color: Pink;">Przykładowy tekst...</div>
<div style="width: max(30%, 300px); background-color: Pink;">Przykładowy tekst...</div>
</body>
</html>
|
|