Këshilla për Krijimin e Filigramit të Historisë në një Faqe Web

Ekzekutoni teknikën me CSS

Nëse po hartoni një faqe interneti, mund të jeni të interesuar të mësoni se si të krijoni një imazh të caktuar fikse ose ujëra në një faqe uebi. Ky është një trajtim i zakonshëm i dizajnit që ka qenë i popullarizuar në internet për mjaft kohë. Është një efekt i dobishëm që të keni në trungun tuaj të dizajnit të internetit.

Nëse nuk e keni bërë këtë më parë ose keni provuar më parë pa fat, procesi mund të duket frikësues, por në të vërtetë nuk është aspak shumë e vështirë. Me këtë tutorial të shkurtër, ju do të merrni informacionin që ju nevojitet për të zotëruar teknikën në një çast minuta duke përdorur CSS.

Fillimi

Imazhet ose filigranët e sfondit (të cilat janë me të vërtetë imazhe të prapme të lehta) kanë një histori në dizajn të shtypur. Dokumentet kanë përfshirë prej kohësh filigranë mbi to për të parandaluar kopjimin e tyre. Përveç kësaj, shumë fletushka dhe broshura përdorin imazhe të mëdha të sfondit si pjesë e dizajnit për copën e shtypur. Dizajni i uebit ka stilet e huazuara të gjata nga imazhet e shtypura dhe të sfondit janë një nga këto stile të huazuara.

Këto imazhe të mëdha të sfondit janë të lehta për tu krijuar duke përdorur këto tre karakteristika të stilit CSS :

Background-Image

Ju do të përdorni imazhin e sfondit për të përcaktuar imazhin që do të përdoret si ujëra e juaj. Ky stil thjesht përdor një rrugë të skedarit për të ngarkuar një imazh që keni në faqen tuaj, ndoshta në një direktori të quajtur "imazhe".

background-image: url (/images/page-background.jpg);

Është e rëndësishme që vetë imazhi të jetë më i lehtë ose më transparent sesa një imazh normal. Kjo do të krijojë pamjen "ujëra", në të cilën gjendet një imazh gjysmë transparente prapa tekstit, grafikut dhe elementeve të tjera kryesore të faqes së internetit. Pa këtë hap, imazhi i sfondit do të konkurrojë me informacionin në faqen tuaj dhe do ta vështirësojë leximin.

Ju mund të përshtatni imazhin e sfondit në çdo program redaktimi siç është Adobe Photoshop.

Background-Përsëriteni

Pronësia e përsëritjes së sfondit vjen pas. Nëse dëshironi që imazhi juaj të jetë një grafik i madh me ujëra, ju do ta përdorni këtë pronë për ta bërë atë pamje vetëm një herë.

përsëritje e sfondit: jo-përsëritje;

Pa pronën "jo-përsëritet", parazgjedhja është se imazhi do të përsëritet pa pushim në faqe. Kjo është e padëshirueshme në hartimin më modern të faqeve të internetit, kështu që ky stil duhet të konsiderohet thelbësor në CSS-në tuaj.

Background-Attachment

Sfondi-bashkëngjitje është një pronë që shumë designers harrojnë. Duke përdorur atë mban imazhin tuaj të sfondit të fiksuar në vend kur përdorni pronën "fikse". Është ajo që e kthen atë imazh në një ujëra që është fiksuar në faqe.

Vlera e parazgjedhur për këtë pronë është "lëviz". Nëse nuk specifikoni një vlerë të bashkëngjitur të sfondit, sfondi do të lëvizë së bashku me pjesën tjetër të faqes.

background-attachment: fikse;

Background-Size

Sfondi i madhësisë është një pronë e re CSS. Kjo ju lejon të përcaktoni madhësinë e një sfondi të bazuar në pamjen në të cilën është duke u shikuar. Kjo është shumë e dobishme për faqet e internetit të përgjegjshme që do të shfaqen në madhësi të ndryshme në pajisje të ndryshme .

background-size: mbuluar;

Dy vlera të dobishme që mund të përdorni për këtë pronë përfshijnë:

Shtimi i CSS në faqen tuaj

Pasi ta kuptoni pronat e mësipërme dhe vlerat e tyre, ju mund t'i shtoni këto stile në faqen tuaj te internetit.

Shtoni në vijim në krye të faqes tuaj të internetit nëse jeni duke bërë një faqe me një faqe. Shtojeni atë në stilet CSS të një fletëjeje të jashtme të stilit nëse jeni duke ndërtuar një faqe me shumë faqe dhe doni të përfitoni nga fuqia e një fletëje të jashtme.