LV16.

SJWP LV16: CSS pozadine i uređivanje

Petar Lovaković, Filip Marangunić 3.A

PRIPREMA

1. RGBA boje:

- RGBA predstavlja kombinaciju četiri komponente boje: crvena (Red), zelena (Green), plava (Blue) i alfa (Alpha) kanal.

- Crvena (R), zelena (G) i plava (B) komponenta određuju osnovnu boju i mogu imati vrijednosti u rasponu od 0 do 255, gdje 0 označava nikakvu prisutnost boje, a 255 označava potpunu zasićenost boje.

- Alfa (A) kanal predstavlja prozirnost boje i može imati vrijednosti od 0 (potpuno prozirno) do 1 (potpuno neprozirno). Ova komponenta omogućava kontrolu transparentnosti boje.

2. Zadavanje boja u CSS pravilima:

- Imenovane boje: CSS podržava nekoliko predefiniranih imenovanih boja poput "red", "green", "blue" itd.

- HEX vrijednosti: Boje se mogu zadavati i putem HEX vrijednosti. HEX vrijednost se sastoji od šesteroznamenkastog koda koji predstavlja kombinaciju crvene, zelene i plave komponente.

Primjer: `#FF0000` za crvenu boju.

- RGB funkcija: Boje se mogu definirati pomoću RGB funkcije koja koristi vrijednosti crvene, zelene i plave komponente.

Primjer: `rgb(255, 0, 0)` za crvenu boju.

- RGBA funkcija: Kao dodatak RGB funkciji, može se koristiti RGBA funkcija za dodavanje alfa kanala i kontrolu prozirnosti.

Primjer: `rgba(255, 0, 0, 0.5)` za poluprovidnu crvenu boju.

- HSL i HSLA funkcije: CSS također podržava definiranje boja pomoću HSL (hue, saturation, lightness) i HSLA funkcija (dodajući alfa kanal).

Primjer: `hsl(0, 100%, 50%)` za crvenu boju putem HSL.

Uz ove metode, CSS pravila omogućuju detaljno prilagođavanje boja kako bi se postigao željeni vizualni izgled na web stranicama.

<!DOCTYPE html>

<head>

<title>Citati</title>

</head>

<body>

<p>"Budi promjena koju želiš vidjeti u svijetu." - Mahatma Gandhi</p>

</div>

<p>"Život je ono što se dogodi dok ti praviš planove." - Allen Sanders</p>

</div>

<p>"Budite nezadovoljni sa zadovoljavajućim." - Elizabeth Holmes</p>

</div>

<p>"Jedini način da uradimo velike stvari je da volimo ono što radimo." - Steve Jobs</p>

</div>

<p>"Samo onaj tko se nikada ne boji napraviti grešku, neće nikada postići nešto originalno." - Albert Einstein</p>

</div>

<p>"Borba za slobodu mora biti neprestana, jer sloboda nikada nije konačno osvojena. Svaki naraštaj mora je osvojiti ponovno." - Nelson Mandela</p>

</div>

<p>"Život nije mjerenjem broja udisaja koje uzmemo, već trenucima koji nam oduzmu dah." - Maya Angelou</p>

</div>

<p>"Život nije mera vremena koje provedemo, već trenuci koji nas ostavljaju bez daha." - Hilary Cooper</p>

</div>

</body>

</html>

CSS

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

}

.citat1 {

background-color: #ff0;

border: 2px solid purple;

padding: 25px;

margin-bottom: 20px;

border-radius: 10px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.citat1 p {

margin: 0;

font-size: 16px;

color: #333;

}

.citat2 {

background-color: green;

border: 4px solid red;

padding: 12px;

margin-bottom: 15px;

border-radius: 20px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.citat2 p {

margin: 0;

font-size: 16px;

color: #333;

}

.citat3 {

background-color: red;

border: 2px solid blue;

padding: 10px;

margin-bottom: 20px;

border-radius: 7px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.citat3 p {

margin: 0;

font-size: 16px;

color: #333;

}

.citat4 {

background-color: lightblue;

border: 1px solid black;

padding: 20px;

margin-bottom: 10px;

border-radius: 15px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.citat4 p {

margin: 0;

font-size: 16px;

color: #333;

}

.citat8 {

background-color: pink;

border: 5px solid blue;

border-style: dotted;

padding: 15px;

margin-bottom: 5px;

border-radius: 30px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.citat8 p {

margin: 0;

font-size: 16px;

color: #333;

}

.citat5 {

background-color: purple;

border: 3px solid yellow;

border-style: dotted;

padding: 10px;

margin-bottom: 20px;

border-radius: 5px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.citat5 p {

margin: 0;

font-size: 16px;

color: #333;

}

.citat6 {

background-color: orange;

border: 2px solid green;

border-style: dotted;

padding: 20px;

margin-bottom: 15px;

border-radius: 10px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.citat6 p {

margin: 0;

font-size: 16px;

color: #333;

}

.citat7 {

background-color: lightgreen;

border: 6px solid darkblue;

border-style: dotted;

padding: 12px;

margin-bottom: 20px;

border-radius: 13px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.citat7 p {

margin: 0;

font-size: 16px;

color: #333;

}