Documente Academic
Documente Profesional
Documente Cultură
Obiectele (regulile) CSS : selector, clasa si identificator. Componentele unui obiect CSS
Etichete HTML si stiluri CSS Definirea selectorilor Crearea etichetelor HTML personalizate Definirea de reguli similare Definirea etichetelor in context (imbricate) Cresterea prioritatii unei definitii Determinarea ordinii cascadei Adaugarea comentariilor la CSS
3 - Configurarea fonturilor
Stabilirea fontului Stabilirea dimensiunii fontului Text inclinat Grosimea fontului Majuscule mici Valori multiple pentru font
4 - Configurarea textului
Spatiul intre litere Spatiul dintre cuvinte Spatiul intre linii Marimea (tipul) literelor Alinierea textului Alinierea pe verticala a textului Formarea paragrafelor Aplicarea elementelor decorative Spatiile albe
Configurarea fundalului o Culoarea fundalului o Imaginea de fundal o Repetarea imaginii de fundal o Controlul imaginii de fundal o Pozitia imaginii de fundal o Stabilirea simultana a proprietatilor fundalului Stabilirea culorii din prim-plan
Latimea si inaltimea unui element Marginile unui element Chenarul unui element Adaugarea spatiului in interior in jurul elementului Elemente float Anularea plasarii unui element in spatiul eliberat de "float" Afisarea si ascunderea elementelor
7 - Controale de pozitionare
Stabilirea modului de pozitionare o Pozitionarea statica o Pozitionarea relativa o Pozitionarea absoluta o Pozitionarea fixa Pozitionarea in raport cu latura de sus, respectiv stanga Pozitionarea in raport cu latura de jos, respectiv dreapta Pozitionarea in spatiul 3D Includerea unui element absolut intr-un element relativ Includerea unui element relativ intr-un element absolut
Stabilirea vizibilitatii unui element Stabilirea suprafetei vizibile a unui element Definirea pozitiei depasirii Aspectul indicatorului de mouse
9 - Pseudo-clasele
10 - Pseudo-elemente
In aceasta lectie invatati ce sunt si ce fac pseudo-elementele after, before, first-letter, first-line
CSS3 opacity
Setare opacitate si transparenta la elementele HTML cu proprietatea CSS opacity.
CSS3 Transformari 2D
Transformare elemente HTML in plan 2D (mutare, rotire, redimensionare, distorsie), folosind proprietatea "transform" si metodele: translate(), rotate(), scale(), skew().
CSS3 transition
Adauga un efect de animatie cand se modifica proprietatile CSS ale unui element HTML, schimband gradual de la un stil la altut.
Introducere
Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML si crearea unor imagini ducand la realizarea de pagini web de o complexitate medie. Odata cu dezvoltarea internetului, site-urile au devenit din ce in ce mai complexe, cu un numar mai mare de pagini, cerintele privind grafica si elementele din pagina au devenit mai pretentioase si astfel proiectarea paginilor web a devenit o sarcina ceva mai dificila. O problema importanta cand avem un site cu multe pagini este atunci cand dorim sa facem anumite schimbari in elementele pagini: fondul, grafica sau fontul textelor din pagini. Prin utilizarea CSS (Cascading Style Sheets), in traducere "foi de stil in cascada", acest lucru nu
mai este o problema, realizandu-se relativ usor, prin schimbarea sau adaugarea unor elemente in codul CSS, ne fiind nevoi sa lucram la fiecare pagina sau la fiecare element din pagina. CSS se ocupa in general cu aspectul si controlul grafic al elementelor din pagina, cum ar fi: textul, imaginile, fondul, culorile si asezarea acestora in cadrul ferestrei paginii. CSS foloseste stiluri, acestea inglobeaza, sub un anumit nume, atribute de formatare care se aplica asupra unui element individual din pagina, asupra unui grup de elemente sau la nivelul intregului document. CSS functioneaza cu HTML, insa nu este HTML. El extinde functionalitatile HTML, permitand redefinirea etichetelor HTML existente. Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element individual din interiorul sau, poate fi controlat mult mai usor. Stilurile pot fi aplicate asupra unui element, a unui document sau chiar asupra unui intreg site web. Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele HTML sunt afisate ca si cum CSS n-ar exista, dar cele mai cunoscute si utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer, Opera, si altele, sunt compatibile CSS.
Acest curs prezinta elementele de baza CSS si modul de lucru cu "foile de stil", va invata cum sa adaugati si sa folositi CSS in paginile dv. web. Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de exemplu Mozilla Firefox, care este gratuit Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare exemplu si proprietate explicata. Retineti ca acest curs reprezinta un punct de plecare, ne fiind prezentate aici toate proprietatile si elementele CSS. Pentru o cunoastere mai amanuntita a acestora, vizitati site-ul www.w3.org, la sectiunile despre CSS.
} </style> </head> <body> ... Continut ... </body> </html> - Observati sintaxa codului CSS. Perechile proprietate:valoare se scriu intre acoladele obiectului CSS pe care-l definesc, intre "proprietate" si "valoare" trebuie sa fie un caracter douapuncte (:) iar la sfarsitul perechii se adauga un caracter punct-si-virgula (;) - Cand este adaugat intr-un fisier extern ".css", codul CSS se scrie la fel, dar nu se mai adauga tag-ul <style>.
- "nume_clasa", poate fi orice nume dorim. - Apoi in interiorul codului CSS, clasa trebuie definita prin adaugarea unui caracter punct (.) inaintea numelui clasei, ca in exemplu urmator: .nume_clasa { font-family:"Arial"; font-size:15px; } Numele aceleasi clase poate fi atribuit mai multor etichete HTML din aceeasi pagina, si toate vor prelua acelasi stil css. - Identificator
Obiectele de tip identificator (ID) sunt asemanatoare cu clasele. Pot fi aplicate oricarei etichete HTML, dar spre deosebire de clase, numele unui identificator trebuie atribuit numai unei singure etichete HTML dintr-o pagina, pentru alta eticheta se adauga un ID cu nume diferit. Ca si clasa, identificatoru trebuie intai creat in interiorul etichetei HTML. Modul de creare este simplu, prin specificarea cuvantului id si numele clasei, ca in exemplu de mai jos:
- "nume_id", poate fi orice nume dorim. In interiorul codului CSS, identificatorul este definit prin adaugarea unui caracter diez (#) inaintea numelui, ca in exemplu urmator: #nume_id { font-family:"Arial"; font-size:15px; } In urmatoarea lectie va fi explicat mai amanuntit modul de definire si rolul acestor obiecte CSS .
Selectorii - identifica un obiect; pot fi selectori de etichete HTML, clase sau identificatori. Proprietatile - identifica o proprietate a obiectului; se refera in special la aspect. Valorile - sunt atributele unei proprietati; pot fi cuvinte cheie, valori numerice sau procentuale, tipul valorii depinzand de proprietate.
Proprietatile si valorile constituie definitia regulii (obiectului) CSS. Acestea se regasesc sub forma de perechi,despartite de caracterul doua puncte :, fiecare pereche se termina cu un caracter punct si virgula ";". Etichetele HTML nu sunt sensibile la diferenta intre majuscule si litere mici. Dar odata cu aparitia limbajului XHTML, acesta face distinctie intre majuscule si minuscule, astfel ca toate etichetele si toti selectorii trebuie scrisi cu litere mici.
stiluri ale elementului respectiv sau de a da elemente grafice de stil doar etichetei respective. Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:
CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli trebuie scris in sectiunea de antet (head) a documentului, in cadrul tag-ului <style>. Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei <head> </head>, este urmatoarea:
<style type="text/css"> selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... } ... selector_n {proprietate1:valoare1; proprietate2:valoare2; ... } </style>
- Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei pagini. Iata un exemplu practic de cod css: <style type="text/css"> h1 { font-family:Arial; font-size:15px; font-weight:bold; color:#1111ff; } p {font-family:Arial; font-size:12px; color:blue; } </style> Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel, trebuie creata o foaie de stil externa intr-un fisier separat, de preferat cu extensia ".css", care poate fi inclus in pagina HTML prin doua procedee: legatura sau import. Crearea unei foaie de stil externe se face scriind codul CSS intr-un fisier text cu ajutorul unui editor de texte simplu (de exemplu Notepad in Windows), sau specializat in acest sens (precum Notepad++). In fisierul extern creat se adauga reguli CSS, fara insa ca aceste reguli sa fie incadrate in etichete STYLE. Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un document HTML utilizand urmatoarea sintaxa, in interiorul tag-ului <head> </head>:
- Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite transmit navigatorului tipul de legatura ("rel" legatura cu o foaie de stil, "type" - tipul codului din fisier) si locatia inspre fisierul ce contine codul CSS ("href" calea si numele complet al fisierului, inclusiv extensia). O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind comanda @import. Sintaxa pentru importul unei foi de stil externe este urmatoarea:
Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului HTML eticheta STYLE. In cadrul acestei etichete este adaugata instructiunea "@import" de mai sus, unde "nume_fisier.css" reprezinta calea si numele fisierului ce contine regulile CSS definite. Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate definiti si selectori suplimentari. Legatura la un fisier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca si cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea HEAD a documentului HTML.
2. Definirea selectorilor
- Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu eticheta HTML la care se refera, avand urmatoarea forma generala:
Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor fi modificate automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se adauga altele noi. Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Sintaxa generala de definire a unei clase CSS este:
Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate fi folosita doar cu eticheta HTML respectiva. Pentru a defini o clasa care sa afecteze in mod direct un anume selector HTML, se foloseste urmatoarea sintaxa:
Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase e recomandat sa fie diferit de cuvantele rezervate JavaScript. - Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagina. Sintaxa generala de definire a unui identificator este:
Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singura data in cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel poate fi manipulat si cu ajutorul functiilor JavaScript. Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate JavaScript.
Daca mai multi selectori folosesc aceleasi definitii css, acestia pot avea aceeasi lista de elemente, fiind scrisi separat prin virgule. Sintaxa generala pentru definirea unei liste cu mai multi selectori este urmatoarea:
Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele. Dezavantajul ar fi ca in momentul in care este modificata o valoare a unei proprietati incluse in definitie, valoarea respectiva se va modifica in toate etichetele reprezentate de acesti selectori.
- Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil. Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista este cel care primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor. Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identificatori sau selectori HTML. Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o eticheta parinte care le inconjoara. De cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor parinte (exista insa cazuri in care proprietatile nu sunt mostenite de etichetele imbricate). Acest mecanism se numeste mostenirea stilurilor. Prin redefinirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in cazul in care acestea sunt modificate. Astfel proprietatile mostenite pot fi anulate prin redefinirea acestora in lista de definitii a etichetei imbricate.
1. Regulile CSS scrise in interiorul paginii HTML, in cadrul etichetei "style" din sectiunea "head" au o prioritate mai mare decat cele scrise intr-un fisier extern, iar regulile scrise in interiorul etichetelor au o prioritate mai mare decat cele din cadrul etichetei "style" din sectiunea "head". 2. Existenta atributului !important confera prioritate maxima la afisare definitiei in care este utilizat. 3. Sursa regulilor exista numeroase navigatoare care permit utilizatorului sa-si defineasca propriile foi de stil. Totusi, foile de stil ale autorului le anuleaza pe cele ale vizitatorului daca acestea din urma nu au valoarea "!important". 4. Specificitate cu cat o regula dispune de mai multi selectori HTML, de clasa si de identificator, cu atat prioritatea ei creste. ID-urile au valoarea 100, clasele au valoarea 10, iar selectorii HTML au valoarea 1. 5. Momentul aparitiei cu cat un stil apare mai tarziu, cu atat importanta lui este mai mare. Astfel, definitiile unei etichete copil au prioritatea mai mare si anuleaza toate stilurile precedente cu care intra in conflict.
In cazul in care comentariul se intinde pe un singur rand este suficienta folosirea perechii de caractere // urmata de comentariu. In cazul in care comentariul contine mai multe linie, trebuie plasat intre /* care deschide zona de comentariu si */ care indica sfarsitul comentariului.
In cazul folosirii comentariilor cu // se pot adauga oricate slash-uri, minimul fiind de doua. Iata un exemplu in care puteti vedea cum pot fi adaugate comentariile: /* Comentariu, pe mai multe linii */ .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... } // Comentariu pe o singura linie #div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
Configurarea fonturilor
Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web este importanta, poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea clasica prin scris
normal, aldin sau cursiv nu este folosita corespunzator. CSS include facilitati de control asupra aspectului fonturilor, prin posibilitatea de a stabili familia de fonturi, atributele ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii. Exista cinci familii de fonturi de baza:
serif au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie speciala. Sunt folosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici. Nu sunt indicate pentru afisarea textelor pe ecran. sans serif sunt fonturi care nu folosesc serife, fiind indicate pentru continut text general. monospace fonturile monospatiate pot avea serife, ele se deosebesc prin faptul ca fiecare litera ocupa aceeasi cantitate de spatiu. Sunt cele mai indicate pentru textele care trebuie citite cu exactitate, ca de exemplu liniile de program. cursive imita scrisul de mana, intr-o maniera stilizata. Sunt indicate in scopuri decorative, nefiind recomandate pentru scrierea unor texte mai lungi. fantasy nu se incadreaza in nici una dintre categoriile de mai sus, fiind fonturi care au un caracter predominant ornamental (reprezentand ilustratii sau pictograme).
1. Stabilirea fontului
Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea "font". Pentru definirea fontului in cadrul unei reguli, trebuie specificata, dupa selectorul din cadrul foii de stil, proprietatea font-family urmata de numele fontului sau a fonturilor (despartite prin virgula). Este bine ca numele fonturilor sa fie incadrate intre ghilimele simple sau duble, mai ales daca numele acestora contine spatii. Forma generala fiind urmatoarea:
- Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: "serif", "sans-serif", "cursive", "monospace" sau "fantasy". Includerea unei asemenea valori este optionala, insa recomandata. Iata un exemplu practic: h1 { font-family:"Arial", "Helvetica", sans-serif } Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca primul font din lista, daca nu este gasit parcurge lista pana in momentul in care intalneste un font instalat. Daca nu exista fonturi echivalente, textul va fi afisat cu fontul prestabilit de browser. Daca este specificat un nume generic, textul va fi afisat cu un font apartinand aceluiasi stil, in cazul in care fonturile specificate in lista nu sunt disponibile. Exista posibilitatea folosirii unei palete largi de fonturi in crearea paginilor web, nu doar a celor din lista limitata a fonturilor compatibile cu navigatoarele. Solutia consta in inglobarea fontului in cadrul paginii si trimiterea lui in mod automat in calculatorul vizitatorului, adica, descarcarea si folosirea lui automata. Pentru a ingloba un font intr-o pagina si a-l descarca, se foloseste intructiunea @font-face. Aceasta trebuie sa includa proprietatea font-family, urmata de numele fontului si apoi trebuie
indicata locatia pe server de unde poate fi descarcat fontul respectiv. Codul CSS este urmatorul:
Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format. Totusi, problema este ca nu exista un format valabil pentru toate navigatoarele, de exemplu Internet Explorer foloseste fonturi in format "eof" (obtinute cu ajutorul unui program numit WEFT), iar Mozilla foloseste un format "otf".
- unitate de masura - exprimata in pixeli, puncte, inci sau centimetri - expresie absoluta - xx-small, x-small, small, medium, large, x-large si xx-large - expresiile smaller sau larger, ca raport cu elementul parinte - procent - un numar exprimat in procente (cu %), care indica marimea textului in raport cu dimensiunea elementului parinte
selector { font-size:valoare }
Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca ca unitati de masura punctele, cm sau mm. Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, pentru afisarea pe ecran, constituie o masura mai sigura decat dimensiunea in puncte. Iata un exemplu practic exprimat in pixeli: h1 { font-size:15px; }
3. Text inclinat
Atributul "font-style" permite scrierea textelor inclinate in doua moduri: "cursiv" si "oblic". Notiunile pot fi confundate, insa cursivul se refera la versiunea unui font a carui caractere au o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta. Pentru a crea caractere cursive in cadrul unei reguli trebuie precizata proprietatea font-style, astfel:
selector { font-style:valoare }
Unde "valoare" poate fi unul din urmatoarele cuvinte: normal, italic sau oblique Iata un exemplu: h1 { font-style:italic; } Valoarea normal se poate folosi pentru a sterge formatarea cu caractere inclinate atunci cand aceasta este mostenita.
4. Grosimea fontului
Ingrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. CSS confera mai multa flexibilitate in utilizarea textului ingrosat decat elementul HTML <b>, prin posibilitatea introducerii unei valori proprietatii font-weight, dupa cum urmeaza:
bold scrie fontul folosind caractere ingrosate bolder - mareste grosimea fontului relativ la grosimea curenta lighter micsoreaza grosimea fontului fata de grosimea curenta - o valoare cuprinsa intre 100 si 900 (multiplu de 100) reprezinta valoarea ingrosarii, bazata pe versiunile alternative disponibile ale fontului normal elimina formatarea cu caractere aldine (ingrosate)
In cazul folosiri valorii cuprinse intre 100 si 900, 400 reprezinta valoarea corespunzatoare textului normal, iar 700 valoarea ingrosarii pentru stilul aldin. Majoritatea fonturilor nu dispun de noua ponderi, astfel ca daca este specificata o valoare care nu este disponibila, va fi folosita o alta pondere. Forma generala pentru stabilirea grosimii fontului este urmatoarea:
selector { font-weight:valoare }
5. Majuscule mici
Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute prin convertirea literelor mici in majuscule cu o dimensiune mai mica decat majusculelor normale. Astfel se obtin cuvinte in care toate literele sunt scrise cu majuscule insa prima litera este mai inalta decat celelalte. Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea proprietatii font-variant cu valoarea small-caps. Prin folosirea valorii normal, vor fi anulate celelalte valori mostenite ale proprietatii font-variant. Forma generala este urmatoarea:
selector { font-variant:valoare }
Iata cum formatam un text dintr-o eticheta "h1" cu valoarea "small-caps": h1 { font-variant:small-caps; }
Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita. Iata si un exemplu practic de folosire a mai multor valori in aceeasi definitie: h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }
Configurarea textului
Textele alcatuiesc o buna parte din paginile web. Metodele de afisare a textelor prin controlul nu numai a fontului, dimensiunii si culorilor, ci si prin alte elemente, pot imbunatati aspectul pagini si pot atrage atentia asupra anumitor elemente din text.
selector { letter-spacing:valoare }
Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite (fara modificari suplimentare). Daca se utilizeaza o valoare exprimata in em atunci dimensiunea rezultata va fi calculata in raport cu cea a elementului parinte. Exemplu: h1 { letter-spacing:1,5em; } - Puteti folosi si pixeli (px)
selector { word-spacing:valoare }
O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar o valoare negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci spatiul dintre cuvinte este fixat la valoarea prestabilita, neproducand de fapt nici un efect, fiind similar cu valoarea normal. Iata un exemplu in care marim spatiul intre cuvintele din eticheta "h2" cu 8 pixeli: h2 { word-spacing:8px; }
- un numar care inseamna multiplicarea dimensiunii fontului cu numarul respectiv pentru a obtine valoarea spatierii; - o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura folosita in CSS, care indiferent de dimensiunea stabilita a fontului, inaltimea liniei va avea o valoare exacta; - un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din dimensiunea fontului folosit pentru scrierea textului.
selector { line-height:valoare }
Iata un exemplu in care marim inaltimea liniei cu 50% din dimensiunea fontului: h1 { line-height:150%; }
Inaltimea liniei poate de asemenea fi definita si in cadrul proprietatii "font-size", prin introducerea caracterului "/" urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului. Exemplu: h1 { font-size:12px/28px; }
Pentru a schimba tipul literelor dintr-un text, proprietatea text-transform va fi urmata de o valoare care poate fi:
capitalize pentru ca primul caracter din fiecare cuvant sa fie scris cu majuscula; uppercase pentru ca toate caracterele sa fie scrise cu majuscule; lowercase - pentru ca toate caracterele sa fie scrise cu litere mici; none pentru ca textul sa fie afisat asa cum este.
selector { text-transform:valoare }
Iata un exemplu in care toate literele vor fi afisate cu majuscule: h1 { text-transform:uppercase; } Proprietatea "text-transform" este utila atunci cand textele sunt create in mod dinamic (de exemplu, in cazul in care ele provin dintr-o baza de date sau form HTML).
5. Alinierea textului
Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini (stanga-dreapta). Proprietatea text-align ofera posibilitatea controlului asupra alinierii textului. Definirea alinierii se face specificand dupa proprietatea text-align una din valorile: left, right, centersau justify. Forma generala este:
selector { text-align:valoare }
Proprietatea poate fi aplicata numai elementelor la nivel de bloc (DIV, UL, Hx, p), valoarea sa implicita fiind in majoritatea cazurilor stabilita la valoarea "left". Iata un exemplu in care textul din eticheta "h2" este aliniat "stanga-dreapta": h2 { text-align:justify; } - In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si a literelor se schimba pentru a se obtine linii de aceeasi lungime.
selector { vertical-align:valoare }
Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:
super pentru scrierea textului in stil exponent, deasupra liniei de baza; sub - pentru scrierea textului in stil indice, sub linia de baza; baseline pentru scrierea textului pe linia de baza; - una din valorile: "top", "middle", "bottom", "text-top", "text-bottom" pentru a alinia textul relativ la alinierea parintelui acestuia; - valoare procentuala care ridica sau coboara linia de baza a elementului proportional cu dimensiunea fontului elementului parinte.
Iata un exemplu in care textul din eticheta <span> va aparea ca exponent fata de textul din stanga-dreapta lui: span { vertical-align:super; }
7. Formarea paragrafelor
Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la inceputul primei linii de text dintr-un paragraf. Pentru aceasta, proprietatea text-indent este urmata de o valoare exprimata intr-o unitate de masura (pixeli sau em) sau in procente (proportional cu latimea paragrafului). Sintaxa generala este:
selector { text-indent:valoare }
Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile negative determina o indentare inspre argine, fiind necesar sau marirea umplerii (padding) sau marirea marginilor. Iata un exemplu de cod CSS in care va fi determinat un spatiu de 20 pixeli la inceputul paragrafului din eticheta <p>: p { text-indent:20px; } Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi relativ la dimensiunea fontului elementului asupra caruia se aplica. Pentru eliminarea decalarii se utilizeaza valoarea 0.
underline pentru a sublinia textul overline pentru a trasa o linie deasupra textului line-through pentru a taia textul cu o linie blink pentru a face textul sa apara si dispara intermitent
selector { text-decoration:valoare }
Pentru a elimina decoratiile se foloseste valoarea "none". Prin folosirea acestei valori se elimina si sublinierile link-urilor, chiar daca navigatorul are prestabilit sa le arate subliniat. Iata un exemplu de cod in urma caruia link-urile nu vor mai fi afisate subliniat: a:link { text-decoration:none; }
Elementul decorativ "blink" a prezentat probleme, fiind de curand eliminat de unele navigatoarelor.
9. Spatiile albe
Intreruperile de linie si spatiile albe dintr-un document HTML sunt tratate ca un singur spatiu sau sunt ignorate, daca nu este utilizata eticheta <pre>. CSS permite afisarea acestor spatii, precum si a intreruperilor textului, utilizand proprietatea white-space, urmata de valoarea "pre". Forma generala este:
selector { white-space:valoare }
In locul cuvantului "valoare" poate fi adaugat: "pre", "nowrap" sau "normal" Utilizarea valorii "nowrap" impiedica trecerea la linia urmatoare. Valoarea "normal" permite navigatorului sa decida asupra modului de tratare a spatiilor. De obicei, acestea vor fi transformate intr-un singur spatiu. Iata un exemplu in urma caruia spatiile albe si trecerea la linia noua vor fi afisate asa cum au fost scrise: p { white-space:pre; } Spre deosebire de eticheta <pre> care schimba fontul cu unul monospatiat, valoarea "pre" a proprietatii white-space nu are nici un efect asupra fontului elementului la care se aplica.- Lectia 4
1. Configurarea fundalului
Se poate schimba fundalul (background) intregii pagini, sau pentru un anumit element din pagina, fie el de tip DIV, paragraf, imagine, tabel sau formular. a) Culoarea fundalului Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de o
valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa. Sintaxa generala este:
selector {background-color:valoare }
Daca se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a elementului parinte. Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body". Iata un exemplu in care culoarea de fundal a paginii este schimbata in albastru: body { background-color:#0000ff; } b) Imaginea de fundal Puteti utiliza pentru fundal si o imagine, pentru aceasta se foloseste proprietatea backgroundimage, urmata de adresa URL a locatiei imaginii. Sintaxa generala este:
selector { background-image:url('adresa_URL'); }
Unde "adresa_URL" este calea si numele imaginii care va fi folosita Daca in locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o imagine. Iata un exemplu in care pentru fundalul paginii este folosita o imagine: body { background-image:url('cale/imagine.gif'); } c) Repetarea imaginii de fundal Pe langa posibilitatea afisarii unui element grafic ca fundal, CSS ofera si un mod de repetare a acestuia. Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, urmata de o valoare care poate avea una din urmatoarele optiuni:
repeat pentru a repeta imaginea pe toata suprafata elementului respectiv; repeat-x pentru a repeta imaginea numai pe orizontala; repeat-y pentru a repeta imaginea numai pe verticala; no-repeat pentru a afisa imaginea o singura data, fara repetare.
selector { background-repeat:valoare }
Iata un exemplu de cod in care imaginea folosita pentru fundalul paginii se va repeta pe verticala pe toata inaltimea documentului: body { background-repeat:repeat-y; } d) Controlul imaginii de fundal
CSS poate defini modul de tratare a fundalului la derularea paginii, pentru aceasta se foloseste proprietatea background-attachment cu optiunea "fixed", pentru a lipi imaginea de fundal de fereastra navigatorului sau optiunea "scroll", pentru a permite derularea imaginii de fundal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina. Sintaxa generala este:
selector { background-attachment:valoare }
Iata un exemplu practic aplicat imaginii folosita pentru fundalul paginii: body { background-attachment:scroll; } e) Pozitia imaginii de fundal Pentru a pozitiona imaginii de fundal in functie de coltul din stanga-sus al elementului se utilizeaza proprietatea background-position urmata de doua valori (coordonate x si y) separate prin spatiu, 'x' pentru pozitia orizontala si 'y' pentru cea verticala. Forma generala a acestei proprietati este:
selector { background-position:valoare }
Coordonatele x si y pot fi exprimate ca valori absolute sau ca procente. Se pot folosi si cuvintele cheie: "left", "center" sau "right" pentru coordonata x; respectiv "top", "center" sau "bottom" pentru coordonata y. Iata un exemplu in care imaginea de fundal a paginii este pozitionata la 10 pixeli (x si y) relativ la coltul din stanga-sus: body { background-position:10px 10px; } f) Stabilirea simultana a proprietatilor fundalului Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background. Se poate stabili simultan printr-o lista de valori proprietatile fundalului, enumerate in orice ordine si separate prin spatiu. Cand se utilizeaza proprietatea background, nu este necesar sa fie specificate toate proprietatile, cele nespecificate fiind stabilite la valoare lor implicita. Sintaxa generala este:
Valoarea implicita a proprietatii background-color este "transparent". Valoarea implicita a proprietatii background-image este "none". Valoarea implicita a proprietatii background-attachment este "scroll". Valoarea implicita a proprietatii background-position este "top left". Iata si un exemplu in care sunt aplicate mai multe proprietati pentru background, in aceeasi definitie: div { background:#e8e8fe url('imagine.jpg') 50% repeat }
- DIV-ul va avea culoarea de fndal "#e8e8fe", cu o imagine pozitionata la jumatatea distantei X, Y si care se repeta.
selector { color:valoare }
numele culorii - una din cele 16 culori predefinite (red, green, blue, white, silver, ...) valoare in hexa - sub forma #rrggbb valoare RGB - sub forma rgb(r, g, b), unde r, g, b pot fi reprezentate prin numere intregi cuprinse intre 0 si 255 sau procente de rosu, verde si albastru cu valori intre 0% si 100%.
Iata un exemplu de cod CSS in care culoarea textului din eticheta "h3" este definita verde: h3 { color:green; }
- un procent, care stabileste o valoare proportionala in functie de cea a elementului parinte; - valoarea auto, care foloseste latimea si inaltimea calculata de navigator, si care reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru afisarea intregului continut.
Iata un exemplu in care elementul cu id="un_id" va avea latimea de 300 pixeli si inaltimea de 500 pixeli: #un_id { width:300px; height:500px; }
selector { margin:valoare/valori; }
- o valoare de tip lungime (numerica) care poate fi si negativa; - o valoare procentuala (procent) creaza o margine proportionala cu latimea elementului parinte; - valoarea auto lasa controlul marginilor la decizia navigatorului.
Iata un exemplu in care etichetele DIV vor avea distanta pentru marginea de sus 10 pixeli, dreapta 5 pixeli, jos 8 pixeli si in stanga 15 pixeli: div { margin:10px 5px 8px 15px; } Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, fara a tine cont de celelalte margini. Pentru aceasta sunt folosite proprietatile margin-top, margin-bottom, margin-left si margin-right cu aceleasi valori ca si in cazul proprietatii margin, dupa cum puteti vedea mai jos.
Unde
- prima valoare (val_grosime) reprezinta grosimea chenarului si poate fi una din urmatoarele tipuri: - o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului); - un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune relativa. - a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului (valoarea "none" anuleaza afisarea chenarului); - ultima valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa sau valoare RGB.
o
Iata un exemplu in care div-urile vor avea o bordura groasa de 1 pixel, solid si culoare albastra: div { border:1px solid blue; } - Pot fi folosite si proprietati separate pentru fiecare: "border-width", "border-style" si "bordercolor"; prezentate in continuare. Un atribut care poate fi folosit in configurarea chenarului este border-width, acesta furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unei casete. Sintaxa generala este:
selector { border-width:valoare; }
Daca specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca specificati doar o valoare, ea va fi aplicata tuturor marginilor. Daca folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor opuse lor in caseta. Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat celor patru margini si este definit astfel:
selector { border-style:valoare; }
Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt acceptate de catre navigator, in locul lor se va folosi valoarea cu linie plina. Un alt atribut care poate fi utilizat in configurarea chenarului este border-color, acesta stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste pentru valoarea ei un singur cuvant cheie exprimat in cod hexa, valoare RGB sau numele culorii. Sintaxa generala este:
selector { border-color:valoare; }
Fiecare latura a chenarului poate avea valori configurate in mod separat (prin care se stabilesc stilul si culoarea fiecarei borduri din jurul elementului) dupa cum este prezentat mai jos:
selector { border-top:grosime stil culoare; } selector { border-bottom:grosime stil culoare; } selector { border-left:grosime stil culoare; } selector { border-right:grosime stil culoare; }
- o valoare de tip lungime - o valoare procentuala creaza umplerea in raport cu latimea elementului parinte.
Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii. Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse. Iata un exemplu in care etichetele DIV vor avea distanta padding: sus 4 pixeli, dreapta 2 pixeli, jos 3 pixeli si in stanga 2 pixeli: div { padding:4px 2px 3px 2px; } Fiecare latura a chenarului poate avea proprietatea padding configurata separat:
5. Elemente float
CSS ofera posibilitatea de a "infasura" anumite elemente in jurul altora. Acest lucru se face prin intermediul proprietatii float, care determina o mutare fortata a elementului in directia data de valoarea mentionata, lasand loc liber in spatiul opus directiei, care va fi ocupat de urmatorul element din codul HTML. Sintaxa generala pentru utilizarea acestei proprietati este:
selector { float:valoare; }
Unde "vaoare" poate fi" left, right si none Valoarea "none" permite elementului sa fie plasat acolo unde este posibil, iar celelalte valori forteaza plasarea elementului in stanga sau in dreapta ecranului, textul din exteriorul etichetei HTML respective va fi plasat in partea opusa, in jurul elementului. Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in dreapta celorlaltor elemente: #un_id { float:right; }
selector { clear:valoare; }
Unde "valoare" specifica latura in jurul careia este interzisa infasurarea textului si poate lua valoarea: left, right sau both. Se poate folosi si valoarea "none", ceea ce are ca efect anularea altor atribute ale proprietatii clear. De exemplu, daca aveti un DIV pozitionat fortat in dreapta, un paragraful care urmeaza dupa el va fi afisat in stanga DIV-ului respectiv. Pentru a anula acest lucru, ca paragraful sa fie afisat sub DIV, se foloseste proprietatea "clear", precum in exemplul urmator: #un_div { float:right; } p { clear:both; }
selector { display:valoare; }
list-item plaseaza in prima linie a textului un indicator pentru articole de tip lista, dar si un salt deasupra si dedesubtul articolului; block defineste eticheta ca fiind de tip bloc si plaseaza un salt la linie noua deasupra si dedesubtul ei; inline defineste eticheta ca o eticheta in linie si elimina caracterele de salt la linie noua; none determina ascunderea elementului si neafisarea lui de catre navigator; codul acestuia este incarcat insa continutul sau nu e afisat in pagina.
Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu id="un_id" va fi ascuns in pagina: li { display:inline; } #un_id { display:none; }
Proprietatea display nu trebuie confundata cu visibility. Spre deosebire de visibility care nu afiseaza elementul dar lasa liber spatiu pentru element, sintaxa display: none elimina complet elementul din pagina.
Controale de pozitionare
Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid. Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o fereastra
sau in raport cu alte elemente. Fereastra navigatorului este suprafata in care sunt afisate toate elementele. Ea poate fi redimensionata sau pozitionata pe ecran, sau poate fi divizata in alte ferestre prin intermediul cadrelor. Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.
selector { position:static }
- Un element static nu poate fi repozitionat in mod explicit. b) Pozitionarea relativa Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul ferestrei sau a elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el. Sintaxa pentru specificarea pozitionarii relative este:
selector { position:relative }
- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si "left" sau "bottom" si "right". c) Pozitionarea absoluta Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului, plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul coordonatelor x si y, indiferent de pozitiile altor elemente. Sintaxa pentru specificarea pozitionarii absolute este:
selector { position:absolute }
- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al ferestrei sau al obiectului in care este inclus elementul pozitionat absolut. d) Pozitionarea fixa Pozitionarea fixa a unui element este aproximativ la fel cu cea absoluta, cu diferenta ca la derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula. Sintaxa pentru specificarea pozitionarii fixed este:
selector { position:fixed }
- o valoare de tip numeric, care defineste distanta dintre laturile ferestrei sau a elementului parinte si laturile elementului; - o valoare procentuala, care semnifica deplasarea fata de laturile ferestrei sau a elementului parinte; - valoarea auto, care permite navigatorului sa calculeze el insusi valoarea.
Pot fi utilizate proprietatile top si left sau bottom si right, de asemenea pot lua si valori negative. In cazul in care este vorba despre elemente imbricate, acestea vor fi deplasate solidar cu elementul parinte daca acesta are position:relative. Iata un exemplu in care o eticheta <h1> este pozitionata la o distanta de 10 pixeli fata de marginile sus si stanga ale unui DIV in interiu caruia se afla: <style type="text/css"> div { position:relative; } h1 { top:10px; left:10px; } </style> <div> <h1>Text...</h1> </div>
Definirea marginilor fata de latura de jos, respectiv din dreapta se face cu ajutorul proprietatilor bottom si right; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot fi combinate cu acestea. Forma generala este:
In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left" cat si "bottom / right", rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top si left.
4. Pozitionarea in spatiul 3D
Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu altele. Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte. Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index. Valoarea acestei proprietati fiind relatia tridimensionala a elementului in raport cu alte elemente din fereastra. Sintaxa generala pentru proprietatea z-index este:
selector { z-index:valoare; }
Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ. In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic. Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui sau cu atatea niveluri cu cate indica indexul z.
Pentru a face o pozitionare absoluta a elementului inclus (care are class="absolut") in elementul parinte (care are class="relativ"), caruia ii definim o pozitionare relativa; scriem in foaia de stil urmatorul cod: .relativ {position:relative; top:30px; left:50px; } .absolut {position:absolute; top:15px; left:0px; }
selector { visibility:valoare }
hidden ascunde elementul de la afisarea pe ecran; visible afiseaza elementul; inherit vizibilitatea elementului este mostenita de la elementul parinte.
Iata un exemplu in urma caruia textul din interiorul etichetei <h1> va fi invizibil:
h1 { visibility:hidden; }
Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza formula display:none;
- Valorile construesc un patrulater, definesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile. Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz" va fi cea incadrata de valorile atributului rect: #viz { clip: rect(25 300 125 100); } Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii vizibile la 100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara.
selector { overflow:valoare; }
- Unde "valoare" stabileste unde va fi plasata depasirea, folosind una din valorile:
visible extinde caseta elementului astfel incat sa incapa tot continutul sau, ignorand delimitarea suprafetei vizibile. Este optiunea prestabilita. hidden ascunde continutul care nu incape in caseta elementului, si impiedica aparitia barei de derulare. scroll adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa tot continutul elementului. auto barele de derulare apar doar atunci cand este necesar.
Iata un exemplu in care toate elementele cu class="extradim" vor avea bare de scroll: .extradim { overflow:scroll; }
Pentru definirea proprietatii "overflow" doar pentru una din directii: orizontala sau verticala; adica bara de derulare sa fie disponibila sau nu doar pentru una din aceste directii, se poate folosi o alta varianta a acestei proprietati, si anume:
selector { cursor:valoare; }
- Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator folosit.
Pseudo-clase
Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi selector, id sau clasa. De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o clasa, continutul din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa definiti un stil diferit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut definit de aceeasi clasa, puteti realiza asta folosind pseudo-clasele. De asemenea, acestea pot modifica stilul grafic al elementelor cand mouse-ul actioneaza asupra lor. Pentru a functiona in Internet Explorer 7+ este necesar declararea <!DOCTYPE>, care se adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasiti Aici. Sintaxa pentru utilizarea pseudo-clasei este urmatoarea: element:pseudo-clasa { proprietate:valoare; } - unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din expresiile urmatoare:
active - Adauga un stil unui element cand acesta este activat (actionat prin click pe el) first-child - Adauga un stil unui element care este primul din acel tip de elemente focus - Folosit pentru input-urile de formulare, le adauga un stil cand acestea sunt active (dupa click si cursorul de text in ele) hover - Adauga un stil unui element cand mouse-ul se afla deasupra lui lang(cuvant) - Adauga un stil unui element care are atributul lang="cuvant" (nu e suportat de Safari si IE mai mic de 8) last-child - Adauga un stil unui element care este ultimul din acel tip de elemente link - Adauga un stil unui link nevizitat visited - Adauga un stil unui link vizitat
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-clasele, studiati exemplele care sunt prezentate in continuare.
1. Pseudo-clase cu selector
Selectoarele fac referire la tag-urile HTML pe care le denumesc (de ex.: p pentru <p>, li pentru <li>, div pentru <div>, etc.). In exemplul urmator este folosit "first-child" pentru paragraf: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 1</title> <style type="text/css"> p:first-child { color:blue; } </style> </head>
<body> <p>Un text din primul paragraf</p> <p>Continut din al doilea paragraf</p> <p>Textul din al treilea paragraf</p> </body> </html> - Rezultatul va fi urmatorul, primul paragraf va avea textul albastru. Un text din primul paragraf Continut din al doilea paragraf Textul din al treilea paragraf
Iata si un exemplu cu "hover" pentru <li> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 2</title> <style type="text/css"> li:hover { background-color:#88fe88; } </style> </head> <body> <ul> <li>Text list 1 ...</li> <li>Text list 2 ...</li> <li>Text list 3 ...</li> </ul> </body> </html> - Cand pozitionati mouse-ul deasupra fiecarui LI, acesta va avea background verde, testati mai jos
2. Pseudo-clase si clase
Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea fiind cele care fac referire la valoarea atributului "class" si in CSS se adauga dupa un caracter punct (.).
Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" (pt. IE incepand cu versiunea 8) sl "last-child" la o clasa ".test' <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 3</title> <style type="text/css"> .test:last-child { background-color:#88fe88; } .test:lang(da) { color:blue; } </style> </head> <body> <ul> <li class="test">Text in list cu class 1 ...</li> <li class="test" lang="da">Text in list cu class 2 ...</li> <li class="test">Text in list cu class 3 ...</li> </ul> </body> </html> - Observati ca stilul definit pentru ".test:last-child" va fi aplicat doar ultimului element care are clasa "test", iar "lang(da)" se aplica numai elementului care pe langa class="test" are si lang="da". - Rezultatul este acesta:
Text in list cu class 1 ... Text in list cu class 2 ... Text in list cu class 3 ...
Iata un alt exemplu in care sunt combinate o clasa (test), un selector (tag <i>) si "first-child": <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 4</title> <style type="text/css"> .test i:first-child { font-weight:bold }
</style> </head> <body> <p class="test"><i>Paragraf</i> cu mai multe tag-uri I: <i>text oblic</i>, alt test <i>oblic</i></p> <p class="test">Alt paragraf: <i>sir inclinat si bold</i>, alt sir <i>italic</i></p> </body> </html> - Stilul CSS va fi aplicat primelor tag-uri <i> din fiecare clasa ".test", dupa cu puteti vedea mai jos Paragraf cu mai multe tag-uri I: text oblic, alt test oblic Alt paragraf: sir inclinat si bold, alt sir italic - Daca doriti ca stilul sa fie aplicat tuturor etichetelor <i> din prima clasa, scrieti: .clasa:firstchild i - Daca vreti sa fie aplicat numai primului <i> din prima clasa, scrieti: .clasa:first-child i:firstchild
</form> </body> </html> - Stilul CSS definit in acest exemplu face ca atunci cand mouse-ul se afla deasupra butonului (care are id="unid") acesta sa isi schimbe culoarea de fundal, iar cand se da click pe zonele de text din formular (care au class="test"), la fel se modifica culoarea background. - Rezultatul este urmatorul formular.
Pseudo-elemente
Pseudo-elementele permit adaugarea de stiluri CSS anumitor parti din continutul unui element HTML. De exemplu, cand definiti un stil pentru un anumit tag HTML (sau pentru o clasa), tot continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa adaugati un stil CSS diferit primei litere sau primlui rand dintr-un paragraf, se folosesc pseudo-elemente. Sintaxa pentru utilizarea pseudo-elementelor este urmatoarea: obiect_css:pseudo-element { proprietate:valoare; } - unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este una din expresiile urmatoare:
after - Adauga continut dupa un element HTML (nu e suportat de versiuni IE mai mici de 8) before - Adauga continut inaintea unui element HTML (nu e suportat de versiuni IE mai mici de 8) first-letter - Adauga un stil css primului caracter dintr-un text first-line - Adauga un stil primei linii dintr-un text
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata cateva exemple cu fiecare in parte.
1. after
Pentru a adauga un anumit continut (text, imagine, sunet .wav) prin CSS, se foloseste proprietatea content si valoarea ce reprezinta continutul respectiv: text se adauga intre ghilimele, iar imagine sau sunet .wav se adauga folosind ca valoare url(adresa_fisier) In urmatorul exemplu va fi adaugat un continut text dupa fiecare element <h4>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-elemente - Ex. 1</title> <style type="text/css"> h4:after {
content:"MarPlo"; color:blue; } </style> </head> <body> <h4>Continutul din primul tag H4 ... </h4> <h4>Un alt text din alt element H4</h4> </body> </html> - Rezultatul va fi cel de jos. - Observati cum este adaugat cuvantul "MarPlo", imediat dupa ultimul caracter al fiecarui element <h4>, ca si cum ar face parte din textul initial, dar putand avea stil propriu. Continutul din primul tag H4 ... MarPlo Un alt text din alt element H4MarPlo - In loc de selector puteti folosi si ID sau clasa. -
2. before
Before este similar cu "after", continutul se adauga la fel, dar la inceputul elementului. Pentru o mai mare difersitate, puteti combina pseudo-clasele cu pseudo-elemente folosind sintaxa: obiect_css:pseudo-clasa:pseudo-element { proprietate:valoare; } - Pseudo-clasele sunt explicate in lectia anterioara. Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4 din exemplul precedent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-elemente - Ex. 2</title> <style type="text/css"> h4:first-child:before { content:"MarPlo- "; color:blue; } </style> </head> <body>
<h4>Continutul din primul tag H4 ... </h4> <h4>Un alt text din alt element H4</h4> </body> </html> - De data aceasta continutul "MarPlo- " este adaugat imediat in fata si doar primului element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai jos: MarPlo- Continutul din primul tag H4 ... Un alt text din alt element H4 - Daca vreti sa adaugati in loc de continut text o imagine, de exemplu .gif, scrieti codul CSS astfel: h4:first-child:before { content:url(imagine.gif); }
3. first-letter
First-letter aplica un stil CSS doar primului caracter dintr-un text. In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul fiecarui element definit printr-o clasa "test".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-elemente - Ex. 3</title> <style type="text/css"> .test:first-letter { font-size:25px; color:red; } </style> </head> <body> <p class="test">Textul din paragraf ...</p> <div class="test">Alt continut int-un tag DIV, dar cu aceeasi clasa.</div> </body> </html> - Dupa cum puteti vedea in rezultatul de mai jos, prima litera din continutul fiecarui tag ce are class="test" este de culoare rosie si marime 25px.
Paragraf cu mai multe linii A doua linie ... Alta linie din acelasi paragraf.
Continut pe doua linii intr-un tag DIV A doua linie din DIV.
Meniu Orizontal-Vertical
In acest tutorial puteti invata cum sa creati Meniu Dublu cu CSS (orizontal si vertical). Meniu dublu inseamna ca lista meniului contine inca un Meniu cu alte link-uri (denumit si SubMeniu). In general, Meniurile sunt create folosind tag-urile <ul> (sau <ol>) si <li> tags. - Presupunand ca deja stiti CSS si HTML, aplicati /adaptati codurile prezentate mai jos, personalizandu-le si cu alte elemente CSS, dupa cum doriti sa creati designul (colturi rotunjite, imagini pt. fundal, etc.).
- Codul HTML si CSS de mai jos creaza acest meniu (Proprietatile CSS trebuie adaugate in zona <head>, sau intr-un fisier ".css"):
<style><!-#menuv { width:200px; border:1px solid blue; background-color:#daedfe; padding:2px; } /* Proprietati pentru primul nivel din meniul vertical */ #menuv li { margin:1px 0; background-color:#f0f1fe; padding:1px; list-style-type:none; font-weight:600; text-align:left; } #menuv li a { display:block; margin:0; font-weight:normal; } #menuv li a:hover { background-color:#fefefe; text-decoration:none; font-style:oblique; } /* Proprietati pentru nivelul doi din meniul vertical */ #menuv li:hover ul { display:block;
} #menuv li ul { display:none; position:relative; margin:-1px 0 -2px 0; padding:1px 0; } #menuv li ul li { margin:2px 0 0 20px; background-color:#edfeed; padding:1px 0; border:1px dotted yellow; } --></style> <ul id="menuv"> <li><a href="/" title="Pagina personala">Pagina personala</a></li> <li> + Tutorialle CSS <ul> <li><a href="http://www.marplo.net/curs_css/css3-background-proprietatinoi.html" title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li> <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li> </ul> </li> <li> + Tutoriale HTML <ul> <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li> <li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li> <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li> </ul> </li> <li><a href="http://www.marplo.net/coment/contact.php" title="Contact">Contact</a></li> </ul>
- "Smecheria" la acest Meniu este acest cod (ceea ce face a doua lista UL vizibila cand mouse-ul e deasupra listei LI parinte):
#menuv li:hover ul { display:block; }
<style><!-#menuv { position:relative; width:160px; border:1px solid blue; background-color:#daedfe; padding:2px; } /* Proprietati pentru primul nivel din meniul vertical */ #menuv li { margin:1px 0; background-color:#f0f1fe; padding:1px; list-style-type:none; font-weight:600; text-align:left; } #menuv li a, #menuv li span { display:block; margin:0; font-weight:normal; } #menuv li a:hover { background-color:#fefefe; text-decoration:none; font-style:oblique; } /* Proprietati pentru nivelul doi din meniul vertical */ #menuv li:hover ul { display:block; } #menuv li ul { display:none; position:absolute; z-index:9998; width:100%; left:151px; margin:-20px auto 0 auto; background-color:#daedfe; border:1px dashed blue; padding:1px; } #menuv li ul li { margin:1px; background-color:#edfeed; padding:1px 0 1px 2px; } --></style> <ul id="menuv"> <li><a href="/" title="Pagina personala">Pagina personala</a></li> <li><span> + Tutorialle CSS</span> <ul>
<li><a href="http://www.marplo.net/curs_css/css3-background-proprietatinoi.html" title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li> <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li> </ul> </li> <li><span> + Tutoriale HTML</span> <ul> <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li> <li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li> <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li> </ul> </li> <li><a href="http://www.marplo.net/coment/contact.php" title="Contact">Contact</a></li> </ul>
- Sub-meniul (#menuv li ul) trebuie sa aibe urmatoarele proprietati CSS, ca sa-l ascunda si sa nu afecteze celelalte liste cand e descoperit (proprietatea z-index:9998; il face sa fie afisat peste celelalte liste).
display:none; position:absolute; z-index:9998;
- In codul CSS al acestui Meniu este important ca selectorul #menu sa aibe definita proprietatea "position" (relative, absolute). Aceasta e necesar ca sa functioneze z-index:9998; (in #menuv li ul) in Internet Explorer.
Meniu Orizontal-Vertical
Meniul orizontal-vertical este un meniu cu lista afisata pe o linie orizontala, iar fiecare lista poate sa contina un alt meniu cu liste verticale, care este initial ascuns, si afisat cand mouse-ul e pe textul /imaginea din lista orizontala. - Demonstratie (mutati cursorul mouse-ului peste Menu):
- Codul sursa:
<style><!-#menuv { position:relative; padding:2px;
} /* Proprietati pentru lista orizontala */ #menuv li { float:left; margin:1px 8px; border:1px solid blue; background-color:#daedfe; padding:1px 2px; list-style-type:none; font-weight:600; text-align:left; text-decoration:nderline; } /* Proprietati pentru listele verticale */ #menuv li:hover ul { display:block; } #menuv li ul { display:none; position:absolute; margin:1px auto 1px -8px; background-color:#f0f1fe; border:1px dashed blue; padding:1px; } #menuv li ul li { position:relative; clear:both; width:99%; margin:1px 0; border:none; background-color:#edfeed; padding:1px; } /* Link-uri in sub-menu */ #menuv ul li a { display:block; margin:0; font-weight:normal; padding:1px; } #menuv ul li a:hover { background-color:#fefefe; text-decoration:none; font-style:oblique; } --></style> <ul id="menuv"> <li><a href="/" title="Pagina personala">Pagina personala</a></li> <li>Tutorialle CSS <ul>
<li><a href="http://www.marplo.net/curs_css/css3-background-proprietatinoi.html" title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li> <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li> </ul> </li> <li>Tutoriale HTML <ul> <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li> <li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li> <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li> </ul> </li> <li><a href="http://www.marplo.net/coment/contact.php" title="Contact">Contact</a></li> </ul>
In codul CSS al acestui Meniu sunt importante urmatoarele proprietati: - #menuv li trebuie sa contina aceasta proprietate ca sa aseze listele pe linie orizontala:
float:left;
- Sub-meniul (#menuv li ul) trebuie sa aibe aceste proprietati CSS, ca sa-l ascunda si sa nu afecteze celelalte liste cand e afisat.
display:none; position:absolute;
- Listele din sub-meniu (#menuv li ul li) trebuie sa aibe aceste proprietati CSS, care anleaza efectul lui: float:left; mostenit de la lista LI parinte, si sa aibe o lungime corespunzatoare:
position:relative; clear:both; width:99%;
vertical: top, center, bottom (sus, centru, jos); sau orizontal: left, center, right (stanga, centru, dreapta). Este indicat ca inaltimea imaginii (sau lungimea, in functie de cum sunt pozitionate butoanele in imagine) sa se imparta exact la 3. Apoi, in CSS setati proprietatile width si height ale link-ului cu aceeasi valoare ca lungimea si inaltimea butonului desenat in imagine. Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate vertical, precum acestea:
Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0; 0, 50%; si 0, 100% (sau: top, center, bottom); pt fiecare conditie (normal, hover, active). Folosind valori in procente, ofera un control mai bun al pozitionarii. - Iata un exemplu (lungimea imaginii exte 125 pixeli, inaltimea 120 pixeli; cu butoanele desenate vertical. Inaltimea butonului /link-ului este 40px):
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Exemplu link /buton folosind o singura imagine si CSS</title> <style type="text/css"><!-#addnew { width: 125px; height: 40px; display: block; background: url('button_img1.gif'); background-position: 0 0; background-repeat: no-repeat; border: none; text-indent: -9999px; /* Sa nu se afiseze textul din link */ } /* Cand cursorul de mouse e deasupra butonului */ #addnew:hover { background-position: 0 50%; } /* Cand butonul /link-ul e apasat */ #addnew:active { background-position: 0 100%; } //--> </style> </head> <body>
Rezultat (pozitionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa vedeti starea "active"): CoursesWeb.net Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate orizontal, precum acestea:
- Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0; 50% 0; si 100% 0 (sau: left, center, right); pt fiecare conditie (normal, hover, active). - Iata un exemplu cu butoanele desenate orizontal:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Exemplu link /buton folosind o singura imagine si CSS</title> <style type="text/css"><!-#addnew { width: 125px; height: 40px; display: block; background: url('button_img2.gif'); background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; /* Sa nu se afiseze textul din link */ } /* Cand cursorul de mouse e deasupra butonului */ #addnew:hover { background-position: 50% 0; } /* Cand butonul /link-ul e apasat */ #addnew:active { background-position: 100% 0; } //--> </style> </head> <body> <a href="http://www.marplo.net/" title="Cursuri Jocuri Anime" id="addnew">MarPlo.net</a> </body> </html>
Rezultat: MarPlo.net
<style type="text/css"><!-/* Seteaza imaginea pt butoanele din link-uri si proprietatile comune in #menu */ #menu a { width: 125px; height: 40px; display: block; background: url('buttons.gif'); background-repeat: no-repeat; text-indent: -9999px; /* Sa nu se afiseze textul din link */ } /* Butonul din imagine pt Primul link */ #menu #addnew { background-position: 0 0; } /* Primul link hover */ #menu #addnew:hover { background-position: 48% 0; } /* Primul link cand e apasat */ #menu #addnew:active { background-position: 100% 0; } /* Butonul din imagine pt al Doilea link */ #menu #delete { background-position: 0 32%; } /* al Doilea link hover */ #menu #delete:hover { background-position: 48% 32%;
} /* al Doilea link cand e apasat */ #menu #delete:active { background-position: 100% 32%; } /* Butonul din imagine pt al Treilea link */ #menu #accept { background-position: 0 66%; } /* al Treilea link hover */ #menu #accept:hover { background-position: 48% 66%; } /* al Treilea link cand e apasat */ #menu #accept:active { background-position: 100% 66%; } /* Butonul din imagine pt al patrulea link */ #menu #cancel { background-position: 0 99%; } /* al patrulea link hover */ #menu #cancel:hover { background-position: 48% 99%; } /* al patrulea link cand e apasat */ #menu #cancel:active { background-position: 100% 99%; } //--> </style> <nav id="menu"> <a href="#" title="Add New" id="addnew">Add New</a> <a href="#" title="Delete" id="delete">Delete</a> <a href="#" title="Accept" id="accept">Accept</a> <a href="#" title="Cancel" id="cancel">Cancel</a> </nav>
Rezultat (pozitionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa vedeti starea "active"): Add New Delete Accept Cancel
CSS3 contine trei proprietati noi pt. background: background-size, background-origin, si background-clip, de asemenea, puteti adauga mai multe imagini pentru fundalul unui element, si chiar sa folositi culori gradient, cu linear-gradient.
background-size
Proprietatea background-size permite determinarea marimii imaginii de background. Astfel, puteti folosi aceeasi imagine in mai multe elemente cu dimensiuni diferite. - Valori (puteti specifica dimensiunile in pixeli (px) sau in procente (%)):
auto - e valoarea predefinita (default). Redimensioneaza laturile imaginii astfel incat se mentine aspectul imaginii, daca ambele valori sunt auto, imaginea apare la dimensiunile ei. procente - Redimensioneaza lungimea si inaltimea pozei pt. background, in procente relative la elementul parinte (nu la imagine). Prima valoare reprezinta lungimea, a doua inaltimea. Daca se specifica numai o valoare, cealalta e setata "auto". pixeli - Redimensioneaza lungimea si inaltimea la marimile specificate. Daca se specifica numai o valoare, cealalta e setata "auto". cover - Poza pt. background e marita (sau micsorata) astfel incat sa acopere toata suprafata de fundal. contain - Poza pt. background e marita (sau micsorata) astfel incat sa fie cuprinsa in zona de continut.
Proprietatea background-size e recunoscuta in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+. - Exemplu:
<style type="text/css"><!-#id1 { width:200px; height:100px; border:1px solid blue; background:url('css3.jpg'); background-size:100px 60px; background-repeat:no-repeat; } #id2 { width:300px; height:120px; border:1px solid #01da02; background:url('css3.jpg'); background-size:contain; background-repeat:no-repeat; } #id3 { width:300px; height:120px; border:1px solid silver; background:url('css3.jpg');
background-size:cover; } --></style> <div id="id1">Curs CSS gratuit - dimensiuni in pixeli</div> <div id="id2">www.coursesweb.net - valoare contain</div> <div id="id3">www.marplo.net - valoare cover</div>
Rezultat:
Culoare Gradient
Proprietatea background poate primi o valoare speciala care defineste o culoare gradient. Sintaxa pentru codul ce defineste gradient-ul difera de la un browser la altul, de aceea trebuie specificata pentru fiecare din navigatoarele web majore, dupa cum se vede in exemplul urmator.
<style type="text/css"><!-#id1 { width:300px; height:120px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda', endColorstr='#0308fe'); /* IE 7, 8 */ background-image: -ms-linear-gradient(top left, #01fe02, #0102fe); /* IE10 */ background: -moz-linear-gradient(top left, #1f1, #fff, #11f); /* Mozilla Firefox */ /* Safari, Chrome */ background-image: -webkit-gradient(linear, left top, right bottom, colorstop(0, #0f1), color-stop(0.5, #fff), color-stop(1, #01f)); background-image: -o-linear-gradient(top left, #01fe02, #0102fe); /* Opera 11.1+ */ background: linear-gradient(top left, #1f1, #fff, #11f); /* W3C Markup */ } --></style> <div id="id1">Curs gratuit CSS<br /> www.marplo.net</div>
Directia culori gradient si distanta pe care culorile o iau poate fi controlata. Daca doriti ca directia gradient-ului sa inceapa de sus, folositi doar top, in loc de "top left"; pentru stanga adaugati doar left. Ca sa setati distanta culorii in gradient, adaugati o valoare de tip procent dupa culoare (sau o valoare intre 0 si 1 pt. browsere Webkit). - Exemplu:
<style type="text/css"><!-#id1 { width:300px; height:120px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda', endColorstr='#0308fe'); /* IE 7, 8 */ background-image: -ms-linear-gradient(top, #01fe02 0%, #0102fe 99%); /* IE10 */ background: -moz-linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%); /* Mozilla Firefox */ /* Safari, Chrome */ background-image: -webkit-gradient(linear, left top, left bottom, colorstop(0, #0f1), color-stop(0.6, #fff), color-stop(1, #01f)); background-image: -o-linear-gradient(top, #01fe02 0%, #0102fe 99%); /* Opera 11.1+ */ background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%); /* W3C Markup */ } --></style>
background-origin
Proprietatea background-origin specifica zona de pozitionare a imaginii in background. Poate lua trei valori diferite:
padding-box - pozitia e relativa la coltul din stanga-sus unde incepe padding. border-box - pozitia e relativa la coltul din stanga-sus a bordurii. content-box - imaginea pt. background e pozitionata de la coltul stanga-sus unde incepe continutul.
background-origin e recunoscut in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+. - Exemplu:
<style type="text/css"><!-#id1 { width:350px; height:120px; padding:20px; border:3px solid blue; background:url('css3.jpg'); background-repeat:no-repeat; background-color:#bcfede; background-origin:content-box; } #id2 { width:350px;
height:120px; padding:20px; border:3px solid blue; background:url('css3.jpg'); background-repeat:no-repeat; background-color:#bcfede; background-origin:border-box; } --></style> <div id="id1">Pozitioneaza imaginea in background incepand de la continut</div> <div id="id2">Pozitionare relativa la bordura</div>
background-clip
Proprietatea background-clip specifica zona de colorare a fundalului, e folosita pentru a determina daca background-ul se extinde sau nu pana in margini. Primeste una din aceste trei valori:
border-box - culoarea de fundal se extinde pana in margini. padding-box - culoarea de fundal e fixata la padding. content-box - culoarea de fundal e fixata la zona continutului.
/* Safari */
/* Safari */
CSS3 contine caracteristici noi care permit crearea de colturi rotunjite, umbre la chenare si folosirea unei imagini pentru aspectul bordurii.
height:120px; border:2px solid blue; border-radius:28px; } --></style> <div id="id1"> Curs CSS - www.marplo.net</div>
Rezultat: Curs CSS - www.marplo.net Colturile rotunjite pot fi create si independent, folosind cele patru proprietati individuale: bordertop-left-radius, border-top-right-radius, border-bottom-right-radius, si border-bottom-left-radius. Exemplu:
<style type="text/css"><!-#id1 { width:300px; height:120px; background-color:#bbfeda; border:2px solid blue; border-top-left-radius:20px; border-bottom-right-radius:38px; } --></style> <div id="id1"> Curs CSS - www.marplo.net</div>
- elm - este elementul HTML la care se aplica aceasta proprietate. - X_offset - este pozitia /distanta umbrei pe latura orizontala. Sunt permise si valori negative. - Y_offset - este pozitia /distanta umbrei pe latura verticala. Sunt permise si valori negative. - blur - defineste distanta "blur" (optionala, 0 sau nespecificata inseamna fara "blur"). - marime - marimea umbrei (optionala). - culoare - culoarea umbrei (optionala, negru daca nu e specificata). - inset - schimba umbra din exterior sa apara in interior. Primele doua valori trebuie adaugate, restul sunt optionale. Daca "blur" sau marime nu sunt specificate, se considera 0. Exemplu:
<style type="text/css"><!-#id1 { width:300px; height:120px; background-color:#bbfeda;
box-shadow: 11px 11px 5px #7878da; -webkit-box-shadow: 11px 11px 5px #7878da; } --></style>
/* Safari si Chrome */
Rezultat:
- url_img - adresa si numele imaginii folosita pt. bordura. - slice - specifica distanta pentru zona din imagine folosita in cele patru margini. - width - lungimea bordurii cu imaginea. - outset - specifica distanta fata de marginea chenarului, de unde incepe bordura cu imagine. - repeat - specifica daca partea de imagine trebuie repetata, rotunjita ca incadrare, sau intinsa (poate avea aceste valori: stretch, repeat, round). border-image nu e recunoscut in Internet Explorer. Firefox foloseste proprietatea -moz-border-image. Safari si Chrome suporta -webkit-border-image.
Rezultat:
- Lectia 14 CSS3 - Background proprietati ... <<-- Anterior ----------- Urmator -->> CSS3 - text-shadow, word-wrap, ..
CSS3 text-shadow
Proprietatea text-shadow introdusa in CSS3 permite adaugarea unui efect de umbra care sa fie aplicat la textul dintr-un element HTML. Umbra apare in jurul literelor. Sintaxa:
text-shadow: offset_X offset_Y blur culoare;
- offset_X - specifica pozitia umbrei pe orizontala. Sunt permise si valori negative. - offset_Y - specifica pozitia umbrei pe verticala. Sunt permise si valori negative. - blur - defineste distanta pentru valoarea "blur" (optional). - culoare - defineste culoarea umbrei (optional). Daca nu e specificata, se foloseste negru. text-shadow e recunoscut in principalele browsere, cu exceptia Internet Explore. Dar incepand cu versiunea 8 a Internet Explorer puteti folosi o proprietate filter pentru a crea efecte de umbra pt. text si in IE. Sintaxa:
filter:progid:DXImageTransform.Microsoft.Shadow(color=val, direction=val, strength=val);
- color - specifica culoarea umbrei. - direction - poate avea una din aceste valori numerice: 0=top, 45=top right, 90=right, 135=bottom right, 180=bottom, 225=bottom left, 315=top left. - strength - reprezinta cantitatea de "blur". Exemplu:
<style type="text/css"><!-h2 { /* pt. IE8+ */ filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a1fe, direction=135, strength=5); text-shadow: 2px 3px 3px #a0a1fe; } --></style> <h2>Text cu text-shadow</h2>
Rezultat:
Text cu text-shadow
Se pot adauga mai multe umbre la acelasi text, prin adaugarea mai multor liste de umbre in proprietatea text-shadow, separate prin virgula.
Urmatorul cod amesteca o culoare verde cu una albastra ca sa creeze un efect de umbra cu aceste culori:
<style type="text/css"><!-h2 { /* pt. IE8+ */ filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a0fe, direction=135, strength=5); text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px rgba(0,0,181,0.2); } --></style> <h2>Text cu doua culori pt. text-shadow</h2>
- Observati ca s-a folosit formula rgba(Rosu, Verde, Albastru, Alpha) la definirea culorii, adaugand si transparenta (Alpha) in acelasi timp. Rezultat:
"valoare" poate fi: - normal - Nu rupe cuvintele intregi (valoarea prestabilita). - break-word - Permite ruperea cuvintelor intregi. Cuvintele sunt rupte la nivel de caracter, nu in silabe. Exemplu:
<style type="text/css"><!-#id1 { width:100px; border:1px solid blue; word-wrap:break-word; } --></style> <div id="id1">Curs CSS gratuit - word-wrap un_cuvant_mai_lung.</div>
CSS3 text-overflow
Cu proprietatea text-overflow puteti determina ce sa se intample cu textul, cand acesta depaseste lungimea elementului. text-overflow este suportat in majoritatea navigatoarelor web, in afara de Firefox. Sintaxa:
text-overflow: valoare;
"valoare" poate fi: - clip - taie textul (valoarea prestabilita). - ellipsis - afiseaza trei-puncte ("") in locul textului taiat. In general, proprietatea text-overflow se foloseste impreuna cu white-space:nowrap; si overflow:hidden;. Exemplu:
<style type="text/css"><!-#id1 { width:230px; border:1px solid blue; white-space:nowrap; overflow:hidden; /* "overflow" valoarea trebuie sa fie diferita de "visible" */ text-overflow:ellipsis; } #id2 { width:230px; border:1px solid green; white-space:nowrap; overflow:hidden; text-overflow:clip; } --></style> <div id="id1">CSS Tutorial - un text lung pe o singura linie, alte cuvinte.</div> <div id="id2">Site web www.marplo.net - alt text lung intr-un singur rand.</div>
Rezultat: CSS Tutorial - un text lung pe o singura linie, alte cuvinte. Site web www.marplo.net - alt text lung intr-un singur rand. - Lectia 15 CSS3 - Border proprietati ... <<-- Anterior ----------- Urmator -->> CSS3 opacity
CSS3 opacity
Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei elementului. IE8 si versiuni anterioare folosesc o varianta alternativa, proprietatea filter. - Sintaxa:
filter: alpha(opacity=X); opacity: X; /* pt. IE */
- X - reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta). 1) Exemplu, un <div> cu o transparenta CSS de 40%:
<style type="text/css"><!-#dv {
/* pt. IE */
Rezultat:
/* pt. IE */
4) Continut intr-un DIV care la mouseover este acoperit cu un alt <div> transparent (DIV-ul transparent trebuie sa fie gol, adaugat in primul, si setat cu: position:absolute;):
<style type="text/css"><!-#trans { display:none; position:absolute; top:2%; left:2%; width:96%; height:95%; background-color:#07fe08; filter:alpha(opacity=50); /* pt. IE */ opacity:0.5; } #cnt { position:relative; background:#e7e8fe; width:300px; height:200px; border:1px solid blue; padding:20px; } #cnt:hover #trans { display:block; } --></style> <div id="cnt"> <div id="trans"></div> Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate. <img src="css3.jpg" alt="CSS3 opacity" width="160" height="98" /> </div>
Rezultat: Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
- Lectia 16 CSS3 - text-shadow, word-wrap, ... <<-- Anterior ----------- Urmator -->> CSS3 Transformari 2D
CSS3 transformari 2D
Cu proprietatea CSS transform se poate modifica forma, marimea si pozitia elementelor HTML. Se pot transforma elementele HTML in plan 2D sau 3D. - Sintaxa:
transform: metoda(valori);
- Acest tutorial prezinta metodele de transformare in plan 2D: translate(), rotate(), scale(), skew() . Internet Explorer 9 foloseste: -ms-transform . Firefox foloseste: -moz-transform . Chrome si Safari folosesc: -webkit-transform . Opera foloseste: -o-transform .
Metoda translate()
Metoda translate() muta elementul de la pozitia initiala, in functie de parametri dati pentru pozitionare de la Stanga (axa-X) si de Sus (axa-Y) . - Sintaxa:
transform: translate(X, Y);
Exemplu. Cand utilizatorul plaseaza cursorul mouse-ului pe un anumit Div, ii muta pozitia cu 20 pixeli de la stanga si 15 pixeli din partea de sus.
<style type="text/css"> #idv { width:90px; height:90px; background:#b0b1fe; font-size:17px; } #idv:hover { transform: translate(20px, 15px); -ms-transform: translate(20px, 15px); /* IE 9 */ -webkit-transform: translate(20px, 15px); /* Safari si Chrome */ -o-transform: translate(20px, 15px); /* Opera */ -moz-transform: translate(20px, 15px); /* Firefox */ } </style> <div id="idv">Pozitionati mouse-ul aici.</div>
CSS rotate()
Metoda rotate() roteste elementul HTML, in sensul orelor de ceas daca valoarea e pozitiva, in sens invers orelor de ceas daca valoarea e negativa. - Sintaxa:
transform: rotate(grade);
Metoda scale()
Metoda scale() mareste sau micsoreaza marimea elementului HTML (inclusiv continutul din el), in functie de parametri pentru Lungime (axa-X) si Inaltime (axa-Y). - Sintaxa:
transform: scale(Lungime, Inaltime);
- Valorile pentru Lungime si Inaltime sunt in procente. De exemplu, 1.5 inseamna 150% din marimea originala. Exemplu. Transforma lungimea sa fie de 2 ori marimea originala, si inaltimea 1.5 ori inaltimea originala.
<style type="text/css"> #idv3 { width:90px; height:90px; background:#b0b1fe; font-size:17px;
} #idv3:hover { transform: scale(2, 1.5); -ms-transform: scale(2, 1.5); /* IE 9 */ -webkit-transform: scale(2, 1.5); /* Safari si Chrome */ -o-transform: scale(2, 1.5); /* Opera */ -moz-transform: scale(2, 1.5); /* Firefox */ } </style> <div id="idv3">Pozitionati mouse-ul aici.</div>
CSS skew()
Metoda skew() distorsioneaza elementul HTML pe orizontala (axa-X) si verticala (axa-Y), incluzand si continutul din el. - Sintaxa:
transform: skew(Xdeg, Ydeg);
Demo: www.coursesweb.net Cele 4 metode de transformare pot fi utilizate si intr-o singura definitie transform, separate prin spatiu. - Sintaxa:
- Puteti adauga doar acele metode pe care doriti sa le folositi in transformare. Exemplu, muta elementul cu 50 pixeli de la stanga si 25 pixeli din partea de sus, il roteste cu 20 grade in sens invers orelor de ceas, transforma lungimea de 2 ori cea originala si inaltimea 1.5 ori, distorsioneaza elementul cu 15 grade pe orizontala si 20 grade pe verticala.
<style type="text/css"> #idv5 { width:90px; height:90px; background:#00da01; font-size:17px; transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); -ms-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* IE 9 */ -webkit-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Safari si Chrome */ -o-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Opera */ -moz-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Firefox */ } </style> <div id="idv5">Continut oarecare...</div>
Demo: Continut oarecare... - Lectia 17 CSS3 opacity <<-- Anterior ----------- Urmator -->> CSS3 transition
CSS3 transition
CSS3 transition poate fi utilizat pentru a anima proprietatile CSS, adaugand un efect de animatie cand se modifica proprietatile CSS ale unui element HTML, schimband gradual de la un stil la altut. CSS3 transition are 4 componente:
transition-property - Specifica numele proprietatii (sau proprietatilor) la care transition trebuie aplicat (precum: width, color, font-size, etc.). CSS3 transition poate fi utilizat cu proprietatile prezentate aici: Proprietati CSS ce pot fi animate transition-duration - Specifica durata tranzitiei (animatiei), in sesunde (s), milisecunde (ms), (implicit 0). transition-timing-function - Defineste tipul vitezei efectului in timpul transformarii: ease (implicit), linear, ease-in, ease-out, ease-in-out
transition-delay - Defineste timpul de asteptare pana cand incepe efectul "transition" (implicit 0)
Pentru a folosi CSS3 transition, trebuie specificate aceste doua lucruri: 1. Proprietatea CSS la care se aplica efectul ( transition-property ). 2. Durata efectului ( transition-duration ). - Ultimele doua componente ( transition-timing-function si transition-delay ) sunt optionale. - Internet Explorer recunoaste "CSS3 transition" incepand cu IE 10. Exemplu. Cand mouse-ul e deasupra unui anumit Div, se schimba gradual lungimea.
<style type="text/css"> #iddv { width:80px; height:80px; background:#b8b9fe; font-size:17px; transition-property: width; transition-duration: 1.4s; /* Firefox 4 */ -moz-transition-property: width; -moz-transition-duration: 1.4s; /* Safari si Chrome */ -webkit-transition-property: width; -webkit-transition-duration: 1.4s; /* Opera */ -o-transition-property: background-color, color; -o-transition-duration: 1.4s; } #iddv:hover { width:200px; } </style> <div id="iddv">Pozitionati mouse-ul pe acest patrat.</div>
Demo (Cand cursorul mouse-ului iese din zona elementului, revine gradual la stilul initial): Pozitionati mouse-ul pe acest patrat.
Exemplu: Schimba gradual "font-size" (in 0.4 secunde, cu viteza "ease-out") cand mouse-ul e deasupra unui element cu class="clse".
<style type="text/css"> .clse {
width:150px; font-size:13px; transition: font-size 0.4s ease-out; -moz-transition: font-size 0.4s ease-out; /* Firefox 4 */ -webkit-transition: font-size 0.4s ease-out; /* Safari si Chrome */ -o-transition: font-size 0.4s ease-out; /* Opera */ } .clse:hover { font-size: 16px; } </style> <ul> <li class="clse"><a href="http://www.marplo.net/curs_css/" title="Curs CSS gratuit">Curs CSS gratuit</a></li> <li class="clse"><a href="http://www.marplo.net/html/" title="Curs HTML">Curs HTML</a></li> <li class="clse"><a href="http://www.coursesweb.net/" title="Cursuri Programare Web">Cursuri Programare Web</a></li> </ul>
Se pot adauga mai multe proprietati pt efect "transition" intr-o singura definitie, separate prin virgula. Exemplu. Adaugare efect la: background, opacity si transform:
<style type="text/css"> .dv1 { width:115px; height:100px; position:relative; font-size:17px; text-align:center; padding-top:18px; } .clsdv { width:120px; height:100px; position:absolute; top:0; left:0; background:#b8b9fe; transition: background 1.3s, opacity 1.8s, transform 1.4s; -moz-transition: background 1.3s, opacity 1.8s, -moz-transform 1.4s; /* Firefox 4 */ -webkit-transition: background 1.3s, opacity 1.8s, -webkit-transform 1.4s; /* Safari si Chrome */
-o-transition: background 1.3s, opacity 1.8s, -o-transform 1.4s; */ } .clsdv:hover { background: #00da01; filter:alpha(opacity=50); /* pt IE */ opacity:0.5; transform:rotate(180deg); -moz-transform:rotate(180deg); /* Firefox 4 */ -webkit-transform:rotate(180deg); /* Safari si Chrome */ -o-transform:rotate(180deg); /* Opera */ } </style> Puneti mouse-ul deasupra acestui dreptunghi. <div class="dv1"> <div class="clsdv"></div> Text oarecare, ascuns </div>
/* Opera
4. Cerc si Oval 5. Poligoane (Paralelogram, Pentagon, Hexagon, Octogon) 6. Forme Stea (cu 5, 6, 8 si 12 varfuri) 7. Butoane 8. Diamant 9. Ecran TV 10. Clepsidra 11. Ou cu CSS 12. Yin-Yang 13. Inima cu CSS 14. Alte forme complexe cu DIV si CSS (Prezentare Mesaj, Infinit, Insigna Panglica, Blazon, Vapor)
48. Rezultat:
49. Curs CSS: www.CoursesWeb.net 50. - Lectia 20 51. Stiluri si Coduri CSS ... <<-- Anterior ----------- Urmator -->> Forma Romb cu CSS
Rezultat: MarPlo - Lectia 21 Forma Trapez cu CSS <<-- Anterior ----------- Urmator -->> Triunghiuri cu CSS
Triunghiuri cu CSS
Triunghi in jos Triunghi stanga Triunghi stanga-sus Triunghi dreapta-sus Triunghi jos-dreapta
Mai multe triunghiuri cu CSS, create doar cu un tag DIV si cateva proprietati CSS.
Triunghi in sus
Cod:
<style type="text/css"> #triangleup { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } </style> <div id="triangleup"><br/><br/><br/>>Sus</div>
Rezultat:
Sus
Triunghi in jos
Cod:
<style type="text/css"> #triangledown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid blue; } /* Continut in triunghi */ #triangledown div{ margin:-85px 0 0 -20px; } </style> <div id="triangledown"><div>JOS</div></div>
Rezultat: JOS
Triunghi stanga
Cod:
<style type="text/css"> #triangleleft { width: 0;
height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid blue; } /* Continut in triunghi */ #triangleleft div{ margin:-10px 0 0 25px; } </style> <div id="triangleleft"><div>Stanga</div></div>
Rezultat: Stanga
Triunghi dreapta
Cod:
<style type="text/css"> #triangleright { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid blue; } /* Continut in triunghi */ #triangleright div{ margin:-10px 0 0 -85px; } </style> <div id="triangleright"><div>Dreapta</div></div>
Rezultat: Dreapta
Triunghi stanga-sus
Cod:
<style type="text/css"> #triangletopleft { width: 0; height: 0; border-top: 100px solid blue; border-right: 50px solid transparent; } </style> <div id="triangletopleft">...</div>
Rezultat: ...
Triunghi dreapta-sus
Cod:
<style type="text/css"> #triangletopright { width: 0; height: 0; border-top: 100px solid blue; border-left: 50px solid transparent; } </style> <div id="triangletopright">...</div>
Rezultat: ...
Triunghi jos-stanga
Cod:
<style type="text/css"> #trianglebottomleft { width: 0; height: 0; border-bottom: 100px solid blue; border-right: 50px solid transparent; } </style> <div id="trianglebottomleft">...</div>
Rezultat: ...
Triunghi jos-dreapta
Cod:
<style type="text/css"> #trianglebottomright { width: 0; height: 0; border-bottom: 100px solid blue; border-left: 50px solid transparent; } </style> <div id="trianglebottomright">...</div>
Rezultat: ... - Lectia 22 Forma Romb cu CSS <<-- Anterior ----------- Urmator -->> Cerc si Oval cu ...
Cerc si Oval create cu un singur tag HTML (DIV) si cateva proprietati CSS.
Cerc
<style type="text/css"> #circle { width: 180px; height: 180px; background: #abcdef; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; padding:15px; } </style> <div id="circle"><br/><br/>Cursuri online:<br/>MarPlo.net</div>
Rezultat:
Forma Ovala
- Raza trebuie sa fie jumatate din lungime si inaltime, la care se adauga valoarea padding-ului (in acest exemplu: (240 / 2) + 15 = 135, si (120 / 2) + 15 = 75).
<style type="text/css"> #oval { width: 240px; height: 120px; background: #89f899; -moz-border-radius: 135px / 75px; -webkit-border-radius: 135px / 75px; border-radius: 135px / 75px;padding:15px; } </style> <div id="oval"><br/>Cursuri Programare Web:<br/>http://CoursesWeb.net</div>
Rezultat: Cursuri Programare Web: http://CoursesWeb.net - Lectia 23 Triunghiuri cu CSS <<-- Anterior ----------- Urmator -->> Poligoane cu CSS
Poligoane cu CSS
Pentagon Hexagon
Octogon Cateva forme de poligoane, create doar cu un singur tag DIV si proprietati CSS.
Paralelogram
- Continutul din paralelogram e distorsionat in functie de forma paralelogramului. Cod:
<style type="text/css"> #parallelogram{ margin:5px 0 5px 20px; width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: #abcdef; } </style> <div id="parallelogram">Cursuri Jocuri Anime<br/>www.MarPlo.net</div>
Pentagon
Cod:
<style type="text/css"> #pentagon { margin:70px 0 5px 20px; position: relative; width: 110px; border-width: 100px 36px 0; border-style: solid; border-color: #abefcd transparent; } #pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -170px; left: -36px; border-width: 0 90px 70px; border-style: solid; border-color: transparent transparent #abefcd; } /* Content in pentagon */ #pentagon div{ position:absolute; top:-50px;
Rezultat: MarPlo.net
Hexagon
Cod:
<style type="text/css"> #hexagon { width: 100px; height: 55px; background: #cdabef; position: relative; } #hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #cdabef; } #hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #cdabef; } </style> <div id="hexagon">MarPlo.net</div>
Rezultat: MarPlo.net
Octogon
Cod:
<style type="text/css"> #octagon { width: 100px; height: 100px; background: #a0e8a1;
position: relative; } #octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid #a0e8a1; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid #a0e8a1; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } </style> <div id="octagon"></div>
Rezultat: - Lectia 24 Cerc si Oval cu ... <<-- Anterior ----------- Urmator -->> Forme Stea cu CSS
Stea 5 varfuri
Cod:
<style type="text/css"> /* http://css-tricks.com/examples/ShapesOfCSS/ */ #star5 { margin: 50px 0; position: relative; display: block; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #05ed08;
border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star5:before { border-bottom: 80px solid #05ed08; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content:""; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star5:after { position: absolute; display: block; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #05ed08; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content:""; } </style> <div id="star5"></div>
Rezultat:
Stea 6 varfuri
Cod:
<style type="text/css"> #star6 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #05ed08; position: relative; } #star6:after {
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #05ed08; position: absolute; content: ""; top: 30px; left: -50px; } </style> <div id="star6"></div>
Rezultat:
Stea 8 varfuri
Cod:
<style type="text/css"> #star8 { background: blue; width: 80px; height: 80px; position: relative; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); } #star8:before { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: blue; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } </style> <div id="star8"></div>
Rezultat:
Stea 12 varfuri
Cod:
<style type="text/css"> #star12 { background: blue; width: 80px;
height: 80px; position: relative; } #star12:before, #star12:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: blue; } #star12:before { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); } #star12:after { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); } </style> <div id="star12"></div>
Rezultat: - Lectia 25 Poligoane cu CSS <<-- Anterior ----------- Urmator -->> Butoane cu CSS
Butoane cu CSS
Buton Pulse Buton Rotunjit Stanga Buton Inima-Sageata Buton 3D-Umbra Buton Rotunjit Dreapta
Butoane cu CSS, create numai cu proprietati CSS / CSS3, fara a folosi fisier cu imagine.
Buton Simplu
<style type="text/css"> .buttons { display: inline-block; background-color: #ddd; border: 1px solid #444; background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); border-radius: 8px;
-moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; padding: 6px 10px; font-weight: bold; } .buttons:link, .buttons:visited, .buttons:hover, .buttons:active { text-decoration: none; color: #00f; } .buttons:hover { background-color: background-image: background-image: background-image: background-image: color: yellow; } #BBB; -webkit-linear-gradient(top, #DDD, #AAA); -moz-linear-gradient(top, #DDD, #AAA); -o-linear-gradient(top, #DDD, #AAA); linear-gradient(top, #DDD, #AAA);
.buttons:active { background: #CCC; } </style> <a href="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> <a href="http://www.marplo.net/curs_css/" title="Curs CSS" class="buttons">Curs CSS</a>
Buton Pulse
<style type="text/css"> .buttons { display: inline-block; background-color: #ddd; border: 1px solid #444; background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; padding: 6px 10px; font-weight: bold; } .buttons:link, .buttons:visited, .buttons:hover, .buttons:active { text-decoration: none; color: #00f; -webkit-animation: "pulse" 1s ease-in-out 0 infinite alternate; -moz-animation: "pulse" 1s ease-in-out 0 infinite alternate;
animation: "pulse" 1s ease-in-out 0 infinite alternate; box-shadow: 0px 0px 4px #00ACE6; } @-webkit-keyframes pulse { 0% { box-shadow: 0px 0px 4px #00ACE6; } 100% { box-shadow: 0px 0px 12px #00ACE6; } } @-moz-keyframes pulse { 0% { box-shadow: 0px 0px 4px #00ACE6; } 100% { box-shadow: 0px 0px 12px #00ACE6; } } @keyframes pulse { 0% { box-shadow: 0px 0px 4px #00ACE6; } 100% { box-shadow: 0px 0px 12px #00ACE6; } } .buttons:hover { background-color: #BBB; background-image: -webkit-linear-gradient(top, #DDD, #AAA); background-image: -moz-linear-gradient(top, #DDD, #AAA); background-image: -o-linear-gradient(top, #DDD, #AAA); background-image: linear-gradient(top, #DDD, #AAA); 'box-shadow: 0px 0px 4px #0001E6;' color: yellow; } .buttons:active { background: #CCC; } </style> <a href="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> <a href="http://www.marplo.net/ajax/" title="Curs Ajax" class="buttons">Curs Ajax</a>
Buton 3D-Umbra
<style type="text/css"> /* http://www.marplo.net/curs_css/ */ .buttons { -moz-text-blink: none; -moz-text-decoration-color: -moz-use-text-color; -moz-text-decoration-line: none; -moz-text-decoration-style: solid; background-color: #FEFEFE; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; box-shadow: 2px 3px 4px #6789DA inset; color: red;
margin-bottom: 1px; margin-left: 5px; margin-right: 5px; margin-top: 1px; padding-bottom: 2px; padding-left: 8px; padding-right: 8px; padding-top: 2px; } .buttons:hover { -moz-text-blink: none; -moz-text-decoration-color: -moz-use-text-color; -moz-text-decoration-line: underline; -moz-text-decoration-style: solid; background-attachment: scroll; background-clip: border-box; background-color: yellow; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto auto; box-shadow: 2px 3px 4px #A0A0DA; color: #0408FE; } </style> <a href="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> <a href="http://www.marplo.net/curs_css/" title="Curs CSS" class="buttons">Curs CSS</a>
background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD); background-image: -moz-linear-gradient(top, #00A0F0, #007EBD); background-image: -o-linear-gradient(top, #00A0F0, #007EBD); background-image: linear-gradient(top, #00A0F0, #007EBD); border-color: #0000CC; color: #FFF; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; border-right-width: 0; } .buttons:hover { background-color: #08aded; background-image: -webkit-linear-gradient(top, #00A0F0, #08aded); background-image: -moz-linear-gradient(top, #00A0F0, #08aded); background-image: -o-linear-gradient(top, #00A0F0, #08aded); background-image: linear-gradient(top, #00A0F0, #08aded); text-decoration: none; color: #ff1; } .buttons:active { background: #007EBD; } </style> <a href="http://www.marplo.net/html/" title="Curs HTML" class="buttons">Curs HTML</a> <a href="http://www.marplo.net/curs_css/" title="Curs CSS" class="buttons">Curs CSS</a>
background-image: -o-linear-gradient(top, #66CC33, #8cc99e); background-image: linear-gradient(top, #66CC33, #8cc99e); border-color: #0000CC; color: #FFF; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; border-left-width: 0; } .buttons:hover { background-color: #08A009; background-image: -webkit-linear-gradient(top, #66CC33, #08A009); background-image: -moz-linear-gradient(top, #66CC33, #08A009); background-image: -o-linear-gradient(top, #66CC33, #08A009); background-image: linear-gradient(top, #66CC33, #08A009); text-decoration: none; color: #ff1; } .buttons:active { background: #08A009; } </style> <a href="http://www.marplo.net/html/" title="Curs HTML" class="buttons">Curs HTML</a> <a href="http://www.marplo.net/curs_css/" title="Curs CSS" class="buttons">Curs CSS</a>
Buton Inima-Sageata
<style type="text/css"> .buttons { display: inline-block; background-color: #ddd; border: 1px solid #444; background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; padding: 6px 10px; font-weight: bold; } .buttons:link, .buttons:visited, .buttons:hover, .buttons:active { background-color: #007EBD; background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD); background-image: -moz-linear-gradient(top, #00A0F0, #007EBD); background-image: -o-linear-gradient(top, #00A0F0, #007EBD); background-image: linear-gradient(top, #00A0F0, #007EBD);
border-color: #0000CC; color: #FFF; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; border-right-width: 0; } .buttons:hover { background-color: #08aded; background-image: -webkit-linear-gradient(top, #00A0F0, #08aded); background-image: -moz-linear-gradient(top, #00A0F0, #08aded); background-image: -o-linear-gradient(top, #00A0F0, #08aded); background-image: linear-gradient(top, #00A0F0, #08aded); text-decoration: none; color: #ff1; } .buttons:active { background: #5CB82E; } .buttons:after { content: "\2192"; margin-left: 5px; } .buttons:before { content: "\2665"; margin-right: 5px; } </style> <a href="http://www.marplo.net/" title="Cursuri Jocuri Anime" class="buttons">www.MarPlo.net</a> <a href="http://www.coursesweb.net/javascript/" title="JavaScript Courses" class="buttons">JavaScript Course</a>
Rezultat: www.MarPlo.net JavaScript Course - Lectia 26 Forme Stea cu CSS <<-- Anterior ----------- Urmator -->> Diamant cu CSS
Diamant cu CSS
Doua forme tip diamant, create simplu cu un tag DIV si cateva proprietati CSS. Cod:
<style type="text/css"> #diamond { width: 0; height: 0; border: 50px solid transparent; border-bottom: 20px solid #05ed08; position: relative; top: -50px; }
#diamond:after { content: ""; position: absolute; left: -50px; top: 20px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid #05ed08; } </style> <div id="diamond"></div>
Rezultat:
Diamant 2
Cod:
<style type="text/css"> #diamond { border-style: solid; border-color: transparent transparent #0809fe transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 10px 0; } #diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: #0809fe transparent transparent transparent; border-width: 70px 50px 0 50px; } </style> <div id="diamond"></div>
Rezultat: - Lectia 27 Butoane cu CSS <<-- Anterior ----------- Urmator -->> Ecran TV cu CSS
Ecran TV cu CSS
Forma ecran TV creat doar cu un tag DIV si cateva proprietati CSS. Cod:
<style type="text/css"> #tvscreen {
position: relative; width: 200px; height: 150px; margin: 20px 10px; background: #0809fe; border-radius: 50% / 10%; color: white; text-align: center; text-indent: .1em; } #tvscreen:before { content: ""; position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%; background: inherit; border-radius: 5% / 50%; } </style> <div id="tvscreen">MarPlo.net</div>
Rezultat: MarPlo.net - Lectia 28 Diamant cu CSS <<-- Anterior ----------- Urmator -->> Forma tip Clepsidra cu ...
Forma de Ou cu CSS
Forma de Ou creat cu un tag DIV si cateva proprietati CSS (fara fisier cu imagine). Cod:
<style type="text/css"> /* http://css-tricks.com/examples/ShapesOfCSS/ */ #egg { display:block; width: 180px; height: 240px; background-color: #09fb09; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } /* Continut in egg */ #eggsp div { position:absolute; padding:89px 2px 2px 9px; } </style> <div id="egg"><div>Cursuri Online<br/>www.marplo.net</div></div></div>
Rezultat: Cursuri Online www.marplo.net - Lectia 30 Forma tip Clepsidra cu ... <<-- Anterior ----------- Urmator -->> Yin-Yang cu CSS
Yin-Yang cu CSS
Cerc Yin-Yang creat cu un tag DIV si proprietati CSS (fara fisier cu imagine). Cod:
<style type="text/css"> #yinyang { width: 100px; height: 50px; background: #fff; border-color: #000; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } #yinyang:before { content: ""; position: absolute; top: 50%; left: 0; background: #fff;
border: 18px solid #000; border-radius: 100%; width: 14px; height: 14px; } #yinyang:after { content: ""; position: absolute; top: 50%; left: 50%; background: #000; border: 18px solid #fff; border-radius:100%; width: 14px; height: 14px; } </style> <div id="yinyang"></div>
Rezultat: - Lectia 31 Forma de Ou cu ... <<-- Anterior ----------- Urmator -->> Forma Inima cu CSS
#heartsp:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } </style> <div id="heartsp"></div>
Rezultat: - Lectia 32 Yin-Yang cu CSS <<-- Anterior ----------- Urmator -->> Alte forme complexe cu ...
Cateva forme complexe create doar cu un singur DIV si proprietati CSS, fara a folosi fisier cu imagine.
Forma 1
Cod:
<style type="text/css"> /* http://www.marplo.net/curs_css/ */ #shp1 { height: 0; width: 170px; background: #b1b0fb; position: relative; border-bottom: 110px solid #08fb09; border-left: 50px solid transparent; border-right: 50px solid transparent; padding:0 3px; } #shp1:before { content: ""; line-height: 0; font-size: 0; width: 0; height: 0; border-bottom: 28px solid #b1b0fb;
border-left: 14px solid transparent; position: absolute; bottom: 0; left: -14px; } #shp1:after { content: ""; line-height: 0; font-size: 0; width: 0; height: 0; border-bottom: 28px solid #b1b0fb; border-right: 14px solid transparent; position: absolute; bottom: 0; right: -14px; } </style> <div id="shp1"><br/>Cursuri Online:<br/>http://www.marplo.net/</div>
Prezentare Mesaj
Cod:
<style type="text/css"> /* http://css-tricks.com/examples/ShapesOfCSS/ */ #talkbubble { margin: 10px 25px; width: 200px; height: 89px; background: #05fb08; position: relative; -moz-border-radius: 14px; -webkit-border-radius: 14px; border-radius: 14px; padding: 2px 5px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 28px; width: 0; height: 0; border-top: 8px solid transparent; border-right: 26px solid #05fb08; border-bottom: 13px solid transparent; } </style>
Insigna Panglica
Cod:
<style type="text/css"> #badgeribbon { position: relative; background: #08fb09; height: 100px; width: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; padding: 2px; text-align: center; } #badgeribbon:before, #badgeribbon:after { content: ""; position: absolute; margin-top: 8px; border-bottom: 70px solid #01fb02; border-left: 40px solid transparent; border-right: 40px solid transparent; top: 70px; left: -5px; -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); -ms-transform: rotate(-140deg); -o-transform: rotate(-140deg); } #badgeribbon:after { left: auto; right: -5px; -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -ms-transform: rotate(140deg); -o-transform: rotate(140deg); } </style> <div id="badgeribbon"><br/>MarPlo</div>
Rezultat: MarPlo
Infinit
Cod:
<style type="text/css"> #infinity { position: relative; width: 212px; height: 100px; } #infinity:before, #infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid blue; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } </style> <div id="infinity"></div>
Rezultat:
Blazon
Cod:
<style type="text/css"> #chevron { position: relative; text-align: center; padding: 12px; margin: 6px auto; height: 60px; width: 200px; } #chevron:before { content: ""; position: absolute; top: 0; left: 0;
height: 100%; width: 51%; background: #efabcd; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); } #chevron:after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: #efabcd; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); } </style> <div id="chevron"></div>
Vapor
Cod:
<style type="text/css"> #ship { margin:30px 0 5px 20px; position: relative; width: 200px; border-width: 50px 28px 0; border-style: solid; border-color: #ccddef transparent; font-weight: bold; } #ship:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -15px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #bbcdef; } /* Content */