Gradientas puslapio fone

Autorius: Primatas

Data: Antradienis, Vasario 24, 2009

Buvo paprašyta pamokos apie tai, kaip padaryti puslapio fone ne vientisą spalvą, bet gradientą.

Susijusios pamokos:

Gradientą puslapio fone padaryti yra gana paprasta, tereikia paveikslėlio su gradientu ir truputėlio žinių apie CSS. Paveikslėlį galite lengvai susikurti su Adobe Photoshop programa. Apie tai pamoka jau yra mūsų puslapyje, tai vardan to, kad nereiktų kartotis štai nuoroda: žiūrėti pamoką apie gradient paveiksliuko kūrimą

Kai jau turėsite paveiksliuką su gradientu, pvz:

css_gradiento_bg

Jį galėsite pakartoti išilgai puslapio viršaus, o likusią jo dalį užpildyti tokia spalva, kokia baigiasi paveikslėlis. Šioje pamokoje tai yra švelniai melsvas atspalvis, kurio kodas: #50dbdc. Visą šį darbą atlieka CSS. Pilną kodą matote žemiau.

Pabandyti pačiam (paprastas).

Pabandyti pačiam (sudėtingesnis).

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Puslapio pavadinimas</title>
<style type="text/ssc">
body {
	background-image:url('/kelias/iki/paveikslelio/paveikslelis.jpg');
	background-repeat: repeat-x;
	background-position: top;
	background-color: #50dbdc;
}
</style>
</head>
<body>
<h1>
Puslapio turinys
</h1>
<p>
Puslapio pastraipa
</p>
</body>
</html>