Totul despre background in CSS3

postat acum 6 ani de Stefanescu Mihai in categorie iNoob

Background-ul unui website poate schimba total design-ul tau, scopul acestui ghid este sa te ajute sa intelegi cum functioneaza acest background si cum sa folosesti diverse tehnici. Pentru acest ghid voi folosi Notepad++, PhotoShop pentru a creea niste imagini de fundal si Google Chrome, dar voi puteti folosi orice aplicatii doriti.

Setarea

Pentru inceput avem nevoie de documentele HTML si CSS, pentru a face asta porniti Notepad++ (sau ce editor folositi) si creeati 2 documente, salvati-le ca index.html si celalalt main.css si salvati-le in acelasi folder (sau pe desktop).In primul fisier scrie structura unui fisier html standard si fa legatura cu main.css

Acum deschide fisierul main.css si adauga codul urmator:

[cc name=”css1″]

Culori Solide

Ce-a mai simpla metoda este sa alegi o culoare ca si fundal. Pentru a face asta modifica-ti tag-ul body precum mai jos:

[cc name=”css2″]

acum daca deschizi index.html in browser pagina va avea background-ul negru.Si daca nu te multumesti cu acest mod de a alege o culoare pentru fundal mai avem si alte metode, precum:

Poti opta pentru versiunea hex:

[cc name=”csshex”]

Poti opta pentru versiunea rgb:

[cc name=”cssrgb”]

Sau poti opta pentru versiunea HSL:

[cc name=”csshsl”]

Dar totusi, o culoare de fundal nu este atat de impresionanta, un gradient sau o imagine ar fi mai potrivita, dar asta depinde de tipul de website pe care il creezi.

Imagine de fundal

In continuare va voi arata cum sa folositi o imagine .jpg pe post de fundal.Cand folosesti o imagine de fundal trebuie sa te asiguri ca este destul de mare astfel incat sa nu se vada urat pe monitoarele cu rezolutie mare.

Prima metoda pe care o putem folosi este sa setam imaginea ca fundal si sa o plasam in coltul din stanga sus al browser-ului.

[cc name=”css3″]

Evident, trebuie sa fie numele imaginii voastre in loc de “image.jpg” si locatia corecta in functie de locatia fisierului CSS. Daca ne uitam ce am facut pana acum arata bine, dar mai avem o problema….daca imaginea este prea mica?

Pai, imaginea se repeta pana cand umple complet fundalul browserului, dar asta nu este exact ce ne-am dorit….

Ce-a mai buna metoda pentru a seta o imagine ca fundal este urmatoarea:

[cc name=”css4″]

Folosind acest mod imaginea va fi mereu in centul ecranului si indiferent de marimea acesteia nu se va repeta ci va fi marita pentru dimensiunea browser-ului.

Fundal repetitiv

Exista momente in care repetarea unei imagini este foarte folositoare, nu doar creeaza un efect minunat dar ajuta la incarcarea mai rapida a site-ului.

Pentru aceasta parte a ghidului voi folosi o imagine de la Subtle Patterns pe care am descarcat-o si am folosit urmatorul cod:

[cc name=”css5″]

In imaginea urmatoare nu vedeti decat o imaginea destul de mica repetandu-se de cate ori este nevoie pentru a umpla fundalul browserului.

Dar daca vreau sa repet imaginea doar pe orizontala? Pentru asta am sa folosesc imaginea urmatoare –http://www.caletaparaisoowners.info/BlueToWhiteGradient.jpg

[cc name=”css6″]

si acum, daca doriti sa se repete pe verticala? Pentru asta voi folosi: http://qbi-lab.org/images/background-gradient-overlay.png si codul:

[cc name=”css7″]

Ce mai putem face? Putem pune o imagine mai mica si restul sa umplem cu o culoare.

Pentru acest lucru am sa folosesc aceasta imagine http://www.pptbackground.net/plog-content/images/powerpoint/transportation-backgrounds/yellow-gradient-ppt-templates.jpg si voi folosi acest cod:

[cc name=”css8″]

Fundalul containerului

Poate fi folositor si un fundal pus unui div, iar pentru a face asta am sa creez un container si sa aplic o culoare solida ca background.

Pentru inceput voi creea un div in main.css adaugand urmatorul cod chiar dupa } de la body:

[cc name=”css9″]

si acum ne vom indrepta atentia catre fisierul HTML, unde vom creea un div.

Acum, daca deschizi browser-ul poti observa ca nu am creeat doar un container, dar l-am facut si transparent! Cum am facut asta? Ei bine, cand am specificat culoarea background-ului:

[cc name=”css10″]

Ultimul cod este in rgba scris, presupun ca deja ati observat ca avem o a 4-a valoare care este defapt opacitatea.

Mai multe imagini de fundal

Interesul meu este sa aplic mai mult decat un background, sa aplic 2. De exemplu voi lua un gradient (http://www.monitortests.com/gradient.png) si o imagine repetitiva (http://subtlepatterns.com/patterns/noise_lines.zip).

[cc name=”css11″]

Cu asta am incheiat….cam atat am avut de spus despre background-uri in CSS3, sper ca v-am fost de ajutor intr-o oarecare masura.

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!

Comentariu postate de minecraft free download pc la data de 15.05.2019
Hello there! Do you know if they make any plugins to help with Search Engine Optimization? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good results. If you know of any please share. Thanks!
Comentariu postate de minecraft free la data de 15.05.2019
hello!,I love your writing so much! proportion we keep in touch more about your post on AOL? I need an expert on this space to resolve my problem. Maybe that is you! Taking a look ahead to look you.
Comentariu postate de mojang minecraft download la data de 16.05.2019
What's up friends, how is everything, and what you want to say regarding this paragraph, in my view its in fact remarkable in support of me.
Comentariu postate de minecraft free download pc la data de 17.05.2019
Thank you for sharing your info. I truly appreciate your efforts and I am waiting for your further post thank you once again.
Comentariu postate de download minecraft la data de 17.05.2019
Do you mind if I quote a few of your posts as long as I provide credit and sources back to your weblog? My blog is in the exact same area of interest as yours and my users would certainly benefit from a lot of the information you provide here. Please let me know if this ok with you. Thank you!
Comentariu postate de minecraft pc download la data de 17.05.2019
Very soon this web page will be famous among all blogging and site-building users, due to it's pleasant posts