CSS się zmienia, ewoluuje. To co kiedyś wymagało JS dziś już często go nie potrzebuje.
Demo 1 – basic
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo 1 – Podstawy HTML i CSS</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
margin: 40px;
background: #f9f9fb;
color: #333;
}
h1 {
text-align: center;
}
section {
background: white;
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 30px;
}
h2 {
color: #444;
border-bottom: 2px solid #eee;
padding-bottom: 4px;
}
/* Efekt najechania i animacja */
.btn {
display: inline-block;
background: #0078d7;
color: white;
padding: 10px 18px;
border-radius: 8px;
transition: background 0.3s, transform 0.2s;
text-decoration: none;
}
.btn:hover {
background: #005fa3;
transform: scale(1.05);
}
/* Styl paska postępu */
progress {
width: 100%;
height: 20px;
}
/* Przykład z box-shadow i border-radius */
.card {
width: 250px;
padding: 20px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
text-align: center;
margin: auto;
background: #fafafa;
}
.card img {
width: 80px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Demo 1 – Podstawy HTML i CSS</h1>
<section>
<h2>1. <details> i <summary></h2>
<p>Elementy HTML, które pozwalają ukrywać/rozwijać treść bez JavaScript.</p>
<details>
<summary>Kliknij, by rozwinąć szczegóły</summary>
<p>To działa tylko dzięki HTML! Możesz w środku mieć tekst, obrazki, a nawet inne elementy.</p>
</details>
</section>
<section>
<h2>2. <meter> i <progress></h2>
<p>Natywne elementy pokazujące wartość liczbową w graficzny sposób:</p>
<p>Poziom baterii: <meter value="0.65">65%</meter></p>
<p>Postęp ładowania:</p>
<progress value="70" max="100">70%</progress>
</section>
<section>
<h2>3. Efekty wizualne: box-shadow, border-radius</h2>
<div class="card">
<img src="https://picsum.photos/100" alt="avatar">
<h3>Jan Kowalski</h3>
<p>Uczeń klasy 3B</p>
</div>
</section>
<section>
<h2>4. Efekty interakcji: :hover i transition</h2>
<p>Prosty efekt po najechaniu na przycisk:</p>
<a href="#" class="btn">Najedź na mnie</a>
</section>
</body>
</html>
Demo 2 – intermediate
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo 2 – Efekty CSS średnio zaawansowane</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
background: #f3f4f8;
margin: 40px;
color: #333;
}
section {
background: white;
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 30px;
}
h1, h2 { text-align: center; }
/* clip-path – wycinanie kształtów */
.clip-demo {
width: 200px; height: 200px;
background: url('https://picsum.photos/300') center/cover;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
margin: 10px auto;
}
/* filter – efekty graficzne */
.filter-demo img {
width: 250px;
filter: grayscale(80%) blur(1px);
transition: filter 0.3s;
}
.filter-demo img:hover {
filter: none;
}
/* transform – obrót i skalowanie */
.transform-demo {
display: inline-block;
background: #0078d7;
color: white;
padding: 15px;
border-radius: 8px;
transition: transform 0.3s;
}
.transform-demo:hover {
transform: rotate(8deg) scale(1.1);
}
/* nth-child – kolorowanie co drugiego wiersza */
ul:nth-child(odd) { background: none; }
li:nth-child(even) {
background: #e8f0fe;
}
/* before/after – pseudo-elementy */
.quote {
position: relative;
padding: 10px 30px;
}
.quote::before {
content: "“";
font-size: 40px;
position: absolute;
left: 5px;
top: -10px;
color: #ccc;
}
</style>
</head>
<body>
<h1>Demo 2 – Efekty CSS średnio zaawansowane</h1>
<section>
<h2>1. clip-path</h2>
<p>Wycinanie obrazu w dowolny kształt:</p>
<div class="clip-demo"></div>
</section>
<section class="filter-demo">
<h2>2. filter</h2>
<p>Efekt „starego zdjęcia” po najechaniu:</p>
<img src="https://picsum.photos/250" alt="obraz">
</section>
<section>
<h2>3. transform</h2>
<p>Obrót i powiększenie przy najechaniu:</p>
<div class="transform-demo">Najedź na mnie</div>
</section>
<section>
<h2>4. nth-child</h2>
<p>Stylowanie co drugiego elementu listy:</p>
<ul>
<li>Jabłko</li>
<li>Gruszka</li>
<li>Śliwka</li>
<li>Banan</li>
</ul>
</section>
<section>
<h2>5. ::before i ::after</h2>
<p>Dodawanie dekoracyjnych znaków bez zmiany HTML:</p>
<blockquote class="quote">To jest przykład cytatu z pseudo-elementem.</blockquote>
</section>
</body>
</html>
cdn…
Twój komentarz