Volite web dizajn?
Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.
Efekt matiranog stakla
Danas ćemo vam pokazati kako napraviti ovaj zgodan efekt (slika 1 – DEMO)
slika 1
Efekt se sastoji u tome da body u backgroundu ima jednu veliku fotografiju , a container ima istu tu fotografiju ali puno svjetliju i zamućenu poput mat stakla .
Ako bi željeli da je container-bg transparentno bijeli te da se kroz njega vidi pozadinska slika, to bismo postigli pomoću Css-a:
container{background-color: #ffffff; filter: Alpha(opacity=70); opacity: .7;}
no obzirom da želimo i blur efekt za container-bg ćemo koristiti drugu sliku. Zamućena pozadina pogodnija je od oštre i zbog bolje čitljivosti teksta.
Dakle, otvorimo željenu sliku u photoshopu (mi smo koristili fotografiju koju je nedavno snimila Silwia ) i smanjimo je na veličinu 1688 x 1028 px . Nakon toga je nazovemo “1.jpg” i spremimo u mapu “images” (slika 2)
slika 2
Dupliciramo taj layer i zamutimo ga – filter / blur / gaussian blur (slika 3)
slika 3
Zatim otvorimo treći layer na vrhu i na njega izlijemo bijelu boju te mu smanjimo opacity na 65 % (ili po želji) nazovemo je “2.jpg” te i tu sliku spremimo u istu mapu (slika 4)
slika 4
Zatim napravimo HTML dokument :
<html >
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div id=”container”>
<p>Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
i Css dokument :
*{ margin: 0; padding: 0; }
body
{
background: url(images/1.jpg) no-repeat fixed;
}
#container
{ width: 600px;
margin: 100px auto;
background: url(images/2.jpg) no-repeat fixed;
border: 2px solid white;
padding: 30px;
}
Originalan kod preuzela sam sa stranice http://css-tricks.com/blurry-background-effect/, isprobala sam ga i izmjenila par redaka koda.
Naime, prilikom korištenja njihovog koda dešavalo se da se body-bg slika može scrollati ako je veća od rezolucije monitora , a za to vrijeme je container-bg ostajala na mjestu te se slike nisu preklapale.
Imajte na umu da je potrebno nekoliko sekundi da se učitaju dvije velike slike te da ih zato treba optimizirati za web što je više moguće. Alternativno se mogu koristiti i slike manjeg formata u kombinaciji sa bojom.
Ispravljeni kod možete skinuti na : http://www.weberica.net/download.html
Slični sadržaj:
- Višestruke teksture u pozadini body layera (Jako slično)
- Web safe fonts, font-family, tipovi fontova itd... (Jako slično)
- Search box instalacija - kako ga pokrenuti? (Jako slično)
- Specijalni simboli ♪ ★ ➡ HTML special characters ★ ♥ ☝✿ ☀ ☼ ☁ ☂ (Jako slično)
- Open source CMS rješenja (Jako slično)
Još nema komentara, Vi možete biti prvi!
Ostavite komentar
Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.