Tema 6

TEMA 6: MACHETE PENTRU PAGINILE
SITE-ULUI WEB.
POSIBILITĂȚI APĂRUTE ÎN CSS3
Natalia Pleşca, lect. univ

CONȚINUT
 Elemente flotante
 Poziționarea elementelor
 Machete
 Filtre, transparență
 Gradiente de culoare
 Transformări ale elementelor
 Animații în CSS
3 SINONIME... ASOCIERI
Pentru noțiunile
 Machetare pagini web
 Responsive design
 MediaQuery
ORDINEA PREZENTĂRII
ELEMENTELOR HTML
 Ordinea prezentării elementelor în pagină este
definită de fluxul documentului HTML – fluxul normal
al elementelor
 Elementele de tip bloc – sunt prezentate în pagină
sub formă dreptunghiulară, care merg unul după altul
de sus în jos
 Elementele liniare – sunt plasate în pagină de sus în
jos și de la dreapta la stânga (simultan, dacă reușiți să
vă imaginați). La necesitate sunt trecute din rând nou
STILURI PENTRU POZIŢIONAREA
ELEMENTELOR HTML
 Proprietățile de poziționare în CSS permit gestionarea poziționării
unui element HTML
 Este posibilă plasarea unui element în spatele altuia, sau
specificarea modalității de afişare a unui anumit element care are
conţinutul foarte mare
 Elementele pot fi pozitionate utilizând proprietățile top, bottom,
left şi right
 Aceste proprietăți nu vor fi funcționale dacă proprietatea position
nu va fi setată prima
 De asemenea contează mult metoda de poziţionare
 Există patru metode diferite de poziționare
I - POZIŢIONAREA STATICĂ
position: static
Elemente HTML sunt implicit poziționate static. Un element
poziționat static, este mereu poziţionat ţinând cont de fluxul
normal al paginii
Elementele poziționate static nu vor fi afectate de proprietățile
top, bottom, left şi right
II - POZIŢIONAREA FIXĂ
position: fixed
Un element cu poziția fixată va fi poziționat în raport cu
fereastra browser-ului
Acest element nu se va mişca chiar dacă fereastra defilează
Elementele cu poziţia fixată nu ţin cont de fluxul normal de
afişare pe pagină – nu contează ce alte elemente mai sunt în
pagină
Elementele cu poziţia fixată se pot suprapune peste alte
elemente
EXEMPLU „POSITION: FIXED”
Fie în documentul web următoarea Voi defini în fișierul de stiluri stilul

secvență de cod: pentru a fixa acest bloc, pe ecran
ca el să nu defileze:
<div class="menu"> .menu{
<hr id="sus" /> position: fixed;
background-
<a href="index.html">Pagina de start</a> color: rgb(161, 111, 111);
<a href="pages/info.html">Informații utile</a> padding: 10px;
width:100%;
<a href="pages/ height: 80px;
contacte.html" target="_blank">Contacte</a> margin: 20 auto;
<hr class="bott" /> top:0;
left: 0;
</div> }
/*coboram blocurile urmatoare cu 90px */
Acum este asa - Rezultat .bottom{
margin-top: 90px;
}
III - POZIŢIONAREA RELATIVĂ
position: relative
Un element poziționat relativ este poziționat în raport cu
poziția sa normală în flux
Conținutul elementelor relativ-poziționate pot fi mutate și se
pot suprapune peste alte elemente, însă spațiul rezervat pentru
element în fluxul normal, se păstrează dupa el
Elementele poziționate relativ sunt adesea utilizate ca blocuri-
containere pentru elemente poziționate absolut
EXEMPLU POZIŢIONARE RELATIVĂ
Era:
DACĂ VOI ADĂUGA STILUL...
.container{
padding-left: 100px; position: relative;
top: 100px; left: -50px;
} - vedem cum se deplasează blocul poziționat relativ în raport cu poziția sa normală
IV - POZIŢIONAREA ABSOLUTĂ
position: absolute
Un element în poziție absolută este poziționat în raport cu primul
element de bază (părinte) care are o altă poziție decât statică
În cazul în care nu se găsește nici un astfel de element (părinte), blocul
se va poziţiona în raport cu tag-ul-rădăcină - <html>
Elementele poziționate „absolut” sunt îndepărtate din fluxul normal.
Documentul și alte elemente se comportă ca şi cum elementul
poziționat absolut nu ar exista
Elementele poziționate „absolut” se pot suprapune peste alte
elemente HTML
EXEMPLU POZIŢIONARE ABSOLUTĂ
Voi scrie următorul stil:
Pentru această secvență de cod HTML: .container{
<div class="container"> padding-left: 100px;
position: relative;
<img src="images/flowers.png" alt="O floare" class="abs" /> background-
<p>Plantele ornamentale cu flori … plantelor în încăperi. color: rgb(172, 146, 151);
}
</p> .abs{
</div> width:100px;
height: auto;
position: absolute;
bottom: 10%;
left:0; }
POZITIONAREA ABSOLUTA
 Implicit elementele “absolute” se poziționează într-un sistem de

coordonate bazat pe fereastra browserului. Însă, sistemul de
coordonate poate fi schimbat
 Dacă un anumit element-părinte al unui element poziționat
absolut, este poziționat relativ, atunci elementul-urmaș se va
poziționa în raport cu elementul-părinte
 Dacă sunt mai multe elemente-părinte poziționate relativ, atunci
elementul-urmaș poziționat absolut se va poziționa în raport cu
elementul părinte cel mai apropiat de el (părinte direct)
BLOC, POZIȚIONAT ABSOLUT
Dacă voi comenta linia cu poziționarea relativă a

blocului .container, cum se va poziționa imaginea, care are
poziționare absolută???
.container{
padding-left: 100px;
/*position: relative;*/
background-color: rgb(172, 146, 151);
}
.abs{
width:100px;
height: auto;
position: absolute;
bottom: 10%;
left:0;
}
REZULTATUL APLICĂRII ACESTUI
STIL VA FI...ÎN RAPORT CU
ELEMENTUL RĂDĂCINĂ
OBSERVAȚIE
 În practică poziționarea absolută adesea se utilizează în scopuri
decorative, atunci când este necesară plasarea într-o anumită
poziție a unor iconițe, elemente de control și alte ”frumuseți”
ELEMENTE SUPRAPUSE
 Când elementele sunt poziționate în afara fluxului normal

(pozition: absolute sau position:relative sau position: fixed) ele
se pot suprapune peste alte elemente
 Proprietatea „z-index” specifică ordinea în stivă a unui element
(elementul care ar trebui să fie plasat în față sau în spatele
celorlalte elemente)
 Un element poate avea un ordin pozitiv sau negativ în stivă
 Un element cu un ordin mai mare în stivă este întotdeauna în
fața unui element cu un ordin mai mic
 Proprietatea z-index funcționează doar pentru elementele
pozitionate absolut, relativ sau fix
EXEMPLU SUPRAPUNERE
Dacă voi scrie stilurile așa:

.container{
padding-left: 10px;
position: relative;
}
.abs{
width:100px;
height: auto;
position: absolute;
top: -20%;
left:0;
z-index:1;
}
VOI SCHIMBA ACUM VALOAREA...
.abs{
width:100px;
height: auto;
position: absolute;
top: -20%;
left:0;
z-index:-1;
}
PROPRIETATEA „FLOAT”
 Proprietatea CSS „float” specifică cum un anumit element poate

fi împins (plutind) la stânga sau la dreapta, permiţând altor
elemente să-l înconjoare
 Proprietatea „float” este foarte des folosită atunci când se
inserează imagini, dar este, utilă şi atunci când se machetează
paginile web
 Elementele „plutesc” pe orizontală, acest lucru însemnând că un
element poate fi „împins” la stânga sau la dreapta, însă nu! în sus
sau în jos
 Elementele amplasate după elementul flotant îl vor „cuprinde”
pe acesta
 Elementele din fața elementului flotant nu vor fi afectate
UNELE VALORI ALE
PROPRIETĂŢII „FLOAT”
Valoarea Descrierea
none Elementul nu va fi flotant. Este valoarea implicită
a proprietăţii
left Elementul se deplasează spre stânga
right Elementul se deplasează spre dreapta
EXEMPLU PROPRIETATE „FLOAT”
Voi specifica pentru pozele din documentul web următorul stil:

.galerie{
width: 17%;
height: 300px;
margin: 10px;
border: 3px solid rgb(214, 197, 200);
box-shadow: 3px 3px 7px rgb(90, 82, 82);
float: left;
}
Toate pozele vor migra spre stânga:
EXEMPLU CONSTRUIRE GALERIE
DE IMAGINI
La acest link
http://www.w3schools.com/css/css_image_gallery.asp
 Gasiti si codurile pentru galerie de imagini, unde se foloseste
proprietatea “float”
UN ALT EXEMPLU, APLICARE
PROPRIETATE „FLOAT”
<body>
<div class="container">
<div class="block5"></div>
</div>
</body>
STILURILE PENTRU BLOCURI
html, body{margin:0; padding:0; }

body{ width:400px; height:300px; }
.container{ width:300px; margin:0 auto; padding-top:5px; }
.container div{ margin-right:5px; margin-bottom:5px; }
.block1{ float:left; width:70px; height:220px; background:#3498db;}
.block2{ float:right; width:220px; height:70px; background:#3498db; }
.block3{ height:70px; width:70px; background:#8e44ad; }
.block4{ float:left; width:70px; height:145px; background:#e74c3c; }
.block5{ float:right; width:70px; height:145px; background:#e74c3c; }
.block6{ float:right; width:70px; height:70px; background:#f1c40f; }
.block7{ float:right; width:145px; height:70px; background:#2ecc71; }
.block8{ float:left; width:145px; height:70px; background:#2ecc71; }
PROPRIETATEA „CLEAR”
 Această proprietate, de obicei, se foloseşte împreună cu proprietatea
float
 Toate elementele care urmează după un element pentru care a fost
definită proprietatea float, îl „înconjoară”
 Clear este folosită pentru a controla comportamentul elementelor
„flotante”
Valoare Descriere
none Valoarea implicită. Permite cuprinderea elementelor flotante pe ambele părţi
left Nu va mai cuprinde elementele flotante pe partea stângă

right Nu va mai cuprinde elementele flotante pe partea dreaptă
both Nu va mai cuprinde elementele flotante nici pe dreapta nici pe stângă
EXEMPLU NEAPLICARE „CLEAR”
.fara_clear { float: left;
width: 32px;
height: 32px;
margin: 10px;
border: 3px solid #73AD21; }
.text1 { border: 1px solid red; }

EXEMPLU APLICARE „CLEAR”
.cu_clear { float: left;
width: 32px;
height: 32px;
margin: 10px;
border: 3px solid #73AD21; }
.text2 { border: 1px solid red;

clear: left; }
ALINIEREA UNUI ELEMENT SAU A UNUI
GRUP DE ELEMENTE
 Un bloc de elemente, grupate în DIV, pot fi aliniate pe centru, setând
valorile proprietăţii „margin” ca fiind „auto” pentru partea stângă și
dreapta (atenţie la utilizarea în IE8-)
 Exemplu:
div.imagine{
margin-left: auto;
margin-right: auto;
width: 50%; }
REZULTAT EXEMPLU
ALINIEREA UNUI GRUP DE ELEMENTE
 O altă modalitate de aliniere a unui grup de elemente ar fi

utilizarea poziţionării cu valoare „absolute” (pe centru)
div.imagine{
position: absolute;
left: 25%;
width: 50%; }
 O altă modalitate ar fi utilizarea proprietăţii „float” (pe
dreapta)
div.imagine{
float: right;
width: 50%; }
MODELUL „CASETĂ” ÎN CSS
 Toate elementele HTML pot fi considerate casete (cutii)
 În CSS, termenul de "model caseta" este utilizat atunci când se vorbeşte
despre design
 Modelul „casetă” reprezintă cutii plasate în jurul elementelor HTML şi
care sunt formate din: margini, borduri, câmpuri interioare şi conţinut
EXEMPLU
.galerie{
width: 20%;
height: 300px;
margin: 10px;
padding:10px;
border: 7px solid rgb(214, 197, 200);
}
PROPRIETATEA ”BOX-SIZING”
 Dimensiunile oricărui dreptunghi din pagină – înalțime și lățime se

formează din înălțimea (lățimea) propriu-zisă+câmpurile
interioare+bordura
 În CSS3 a apărut proprietatea box-sizing, care atenuează efectul definirii
dimensiunilor expuse mai sus
 Valoarea content-box, pentru proprietatea box-sizing, este valoarea
implicită și presupune că la calcularea înălțimii și lățimii se va avea în
vedere doar dimensiunea contentului – bordura, câmpurile interioare și
exterioare – nu se includ
 Valoarea border-box, pentru proprietatea box-sizing, presupune că
atunci când calculăm dimensiunile unui element în aceste dimensiuni se
vor include dimensiunile contentului, ale câmpurilor interioare și ale
bordurii, dar nu și dimensiunile câmpurilor exterioare
EXEMPLU
.im1 {
width: 100px;
height: 120px;
border: 2px solid pink; }
.im2 {
width: 100px;
height: 120px;
padding: 20px;
border: 2px solid pink; }
PROPRIETATEA BOX-SIZING
 Proprietatea box-sizing poate include,
la definirea înălțimii și lățimii, și .im1 {
bordura și câmpurile interne (padding) width: 100px;
height: 120px;
 Pentru a specifica aceeași proprietate, border: 2px solid pink;
pentru toate elementele HTML se box-sizing: border-box;
poate utiliza: }
.im2 {
* { width: 100px;
box-sizing: border-box; height: 120px;
} padding: 20px;
border: 2px solid pink;
box-sizing: border-box;
}
MACHETAREA SITE-URILOR
 Machetarea este acel proces de transformare a
desenului unei pagini web (de exemplu un
fisier .psd(PhotoShop Document)) într-un document
HTML, utilizând HTML şi CSS, care document,
interpretat va prezenta în fereastra browserului un
conținut asemănător machetei
 Suplimentar (în lb. rusă):
https://ru.wikipedia.org/wiki/%D0%92%D1%91%D1%80%D1%81%D1%82%D0%BA%D0%B0_
%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86
 La machetarea paginilor ar trebui să se respecte

minimum următoarele cerinţe:
 Să coincidă, la maximum, imaginea realizată de designer cu
rezultatul
 Prezentarea adecvată în mai multe browsere a paginii
obţinute (cross platform)
 Să se scrie codurile HTML separat de codurile CSS
MACHETARE PAGINI CU DIV (HTML) și
PROPRIETĂȚILE ”FLOAT”, ”MAX-WIDTH” și
”WIDTH”
EXEMPLU, MACHETARE SIMPLĂ
<body>
<div class="header">Logotipul si meniul</div>
<div class="left-column">Continutul de baza</div>
<div class="right-column">Coloana laterala</div>
<div class="footer">Subsolul</div>
</body>
STILURILE PENTRU DIV-URILE
PREZENTATE
html, body { margin:0px; padding: 0px; }
div { margin-bottom: 15px; padding: 10px 20px 10px 20px; }
.header { background-color: #ffb3b3;}
.left-column { width: 50%; min-height: 100px; background-color: #ddff99;
float: left;}
.right-column {
width: 25%;
min-height: 100px;
background-color: #ddff99;
float: right;}
.footer { clear: both;
background-color: #ffb3b3;}
EXEMPLU DE PE NET, CU
ACEEASI STRUCTURA
UN ALT EXEMPLU DE MACHETĂ
DEFINIREA CONTENTULUI
<body>
<div class="header block">Header</div>
<div class="menu block"> Meniu</div>
<div class="column1 block">Coloana 1</div>
<div class="footer block">Subsol</div>
</div>
</body>
DEFINIREA STILURILOR
body{ font-family:'PT Sans', sans-serif; }
.container{ max-width:100%; .column3{
margin:10px auto; } background:rgba(230, 210, 250, 0.4);
.block{ padding:10px 0px; float:right;
margin-bottom:10px; max-width:180px;
color:#CC0000; } min-height:50px; }
.header { background:rgba(230, 210, 250, 0.7);
width: 100%; } .footer{
.menu { background:rgba(230, 210, 250, 0.5); background:rgba(230, 210, 250, 0.7);
width: 100%; } max-width: 100%;
.column1{ background:rgba(230, 210, 250, 0.4); clear: both; }
float:left; max-width:180px;
min-height:50px;
margin-right:30px; }
.column2{ background:rgba(230, 210, 250, 0.4);
float:left; max-width:180px;
min-height:50px; }
Recomandare: Încercați stabilirea lățimii .container în %

UN ALT EXEMPLU – CONȚINUTUL A RĂMAS
ACELAȘI CA LA EXEMPLUL ANTERIOR, DAR
STILURILE AU FOST SCHIMBATE
STILURILE
…
float:left; max-width:30%;
min-height:50px; }
float:right; max-width: 30%;
min-height:50px;}
clear: both; margin-left: auto; margin-right: auto;
max-width: 30%;
min-height:50px; }
.footer{ background:rgba(230, 210, 250, 0.7);
max-width: 100%; }
…
Pentru restul elementelor – .container, .block, .header, .menu - stilurile

au rămas aceleași – ca și la exemplul anterior
SUPLIMENTAR
 Analizați cum se realizează machetarea cu

 display: flex;
(https://www.w3schools.com/css/css3_flexbox_container.asp) și
 display: grid; (https://www.w3schools.com/css/css_grid.asp)
 Analizați suplimentar: elementele din HTML5 pentru
machetare
https://www.w3schools.com/html/html5_semantic_elements.asp
EXEMPLE SUPLIMENTARE
 Galerie cu fotografii, folosind flex

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery
 Machetare site cu flex

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2
NECESITATEA ADAPTĂRII CONȚINUTURILOR
SITE-URILOR LA DISPOZITIVELE DE IEȘIRE
 Ponderea utilizării dispozitivelor mobile

pentru navigare în internet este în
creștere, dar, din păcate, o mare parte din
produsele web nu sunt adaptate pentru
dispozitivele mobile
 Există o multitudine de dimensiuni diferite
de ecrane ale telefoanelor, "phablets",
tablete, desktop-uri, console de jocuri,
televizoare etc.
 Dimensiunile dispozitivelor de afișare vor fi
mereu în schimbare, deci este important
ca un site/interfața unei aplicații să se
poată adapta la orice dimensiune a
ecranului
DESIGN ADAPTABIL
(HTML RESPONSIVE WEB DESIGN)
 Un website este responsive (sensibil, adaptiv) dacă are capacitatea
să-şi adapteze paginile în funcţie de mediul de vizionare (în funcţie
de rezoluţia ecranului – desktop, laptop, tabletă, telefon), fără a
suferi schimbări mari, pentru a le oferi utilizatorilor o experienţă
bună de navigare
"ONE WEB"
 Atât ideea cât și rolul la „responsive web design” au

fost discutate și descrise de World Wide Web
Consortium (W3C) în iulie 2008 în recomandarea sa
"Mobile Web Best Practices" având subtitlul "One
Web"
 Această recomandare, deși este specifică pentru
dispozitivele mobile, subliniază ca este făcută în
contextul One Web, și, prin urmare include nu numai
experiența de navigare pe dispozitive mobile (UX), ci și
pe dispozitive cu rezoluție a ecranului mai mare cum
ar fi desktop-ul
VIEWPORT – ZONA DE
VIZIBILITATE A UTILIZATORULUI
 Lățimea spațiului vizibil (VIEWPORT), pentru utilizator, variază în
funcție de dispozitiv, și va fi mult mai mică pe un telefon mobil, decât
pe un ecran de calculator
 Înaintea apariției tabletelor și telefoanelor mobile, paginile web erau
proiectate numai pentru ecrane de calculator, și era un lucru firesc ca
paginile web să aibă un design static, cu dimensiuni fixate
 Mai tarziu, când apareau dispozitive cu ecrane de diferite dimensiuni,
vizualizarea paginilor web cu dimensiuni fixe, mari, pentru ecranele
tabletelor și telefoanelor, era prea incomodă pentru suprafața de
vizualizare
 În scopul atenuării acestui neajuns, browserele acestor dispozitive
încercau să potrivească pagina pe ecranul dispozitivului. Acest lucru nu
totdeauna le reușea browserelor 
SETAREA SPAȚIUNUI VIZIBIL
PENTRU DISPOZITIV
 Se folosește tag-ul <meta>, cu specificațiile noi apărute în HTML5,
pentru a-i specifica browserului parametrii de dimensionare a
paginii
 Sintaxa utilizată pentru tag-ul meta, la setarea viewport-ului:
 <meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
 Din content="width=device-width, initial-scale=1.0", partea
width=device-width – definește lățimea paginii astfel încât să
corespundă cu lățimea ecranului dispozitivului, iar partea initial-
scale=1.0 – setează nivelul inițial al scării, pentru încărcarea inițială a
paginii în browser
Obs: Trebuie să se țină cont că utilizatorului, pentru a-i asigura comoditatea
utilizării unei resurse web (UX), îi este mult mai comod să navigheze în sus sau în
jos, decât la stânga sau la dreapta, pe pagină
DEFINIREA GRIDURILOR FLUIDE
 Orice pagină web poate fi divizată, imaginar, în 12 coloane,

care corespund lățimii întregii pagini – 100%. Unei coloane îi
revine aproximativ 8.33%
 8.33 x 12 = 99.96
EXEMPLU APLICARE GRIDURI
FLUIDE PENTRU ASIGURAREA
ADAPTIVITĂȚII CONTENTULUI
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head>
<body>
<div class="header"> <h1>Pisici VS Căței</h1></div>
<div class="row">
<div class="col-3 menu">
<ul> <li>Căței</li> <li>Pisoi</li> </ul> <img src="img/emblema.png" alt="pisoi si catel" />
</div>
<div class="col-9 content">
<h1>Animalele de companie</h1>
<p>Animalele de companie sunt des întâlnite în sau pe lângă casele oamenilor, de la noi. Cui
nu-i plac pisoii pufoși sau cațeii fideli???</p>
<p>Pe această resursă veți putea găsi mai multe informații utile pentru dvoastră peste
aceste animălute drăguțe</p>
</div>
</div>
<div class="footer"> ...
STILURILE
* { box-sizing: border-box; }
.row::after { content: ""; clear: both; display: table; }
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] { float: left; padding: 10px;}
REZULTAT
“MEDIA QUERIES” – PENTRU A
REALIZA ADAPTIVITATEA
 ”Media query” – a apărut în CSS3
 Proprietățile @media sunt folosite pentru a defini stiluri,
diferite - condiționat, pentru diverse dispozitive de ieșire
 Media queries – analizează dimensiunea ecranului
dispozitivului de ieșire, și anume:
 lățimea și înălțimea portului de vizualizare
 lățimea și înălțimea dispozitivului
 orientarea (este orientat pe verticală sau orizontală?)
 rezoluţia ecranului (dispozitivul este tableta sau telefon?)
 etc.
PROPRIETATEA @MEDIA
 Este suportată de toate browserele cunoscute

 Sintaxa:
@media not | only mediatype and (caracteristici media) {
coduri CSS;
}
Unele valori pentru mediatype:
Mai multe detalii: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Valoarea Descrierea
all Se folosește pentru a specifica toate tipurile de dispozitive pentru ieșiri de date
screen Se folosește pentru a specifica ecrane de calculatoare, tablete, smart-phones
etc.
ÎN PRIMUL RÂND INTERFAȚA GRAFICĂ
PENTRU TELEFONUL MOBIL
 ”Design for Mobile First” – presupune că mai întâi

trebuie proiectat design-ul pentru dispozitivele mobile,
apoi pentru celelalte dispozitive cu dimensiuni mai mari
- desktop sau tabletă. Aceasta va face afișajul mai rapid
al paginilor pe dispozitive mici
 În locul schimbării stilurilor, atunci când lățimea devine
mai mică decât 768px, se va proceda invers – se va
schimba designul, atunci când lățimea va atinge punctul
ce depășește valoarea 768px
EXEMPLU, ECRAN DESKTOP
EXEMPLU, ECRAN TABLETA SI
ECRAN TELEFON
Exemplu
STILURILE
@media only screen and (min-width:
HTML:
768px) {
…<meta name="viewport" content="width=device-width,
initial-scale=1.0">… /* pentru desktop
CSS: Prima și a treia secțiune - se vor întinde
…* { box-sizing: border-box;} pe 3 coloane fiecare. Secțiunea de
/* stilurile pentru dispozitivele mobile */ mijloc se va întinde pe 6 coloane.
[class*="col-"] { width: 100%; } */
@media only screen and (min-width: 600px) { .col-1 {width: 8.33%;}
/* pentru tableta .col-2 {width: 16.66%;}
Prima sectiune se va întinde pe 3 coloane, a doua se va întinde
pe 9, iar secțiunea a treia va fi afișată mai intai pe două coloane, .col-4 {width: 33.33%;}
iar apoi se va întinde pe 12 coloane */ .col-5 {width: 41.66%;}
.col-m-1 {width: 8.33%;} .col-6 {width: 50%;}
.col-m-2 {width: 16.66%;} .col-m-8 {width: 66.66%;} .col-7 {width: 58.33%;}
.col-m-3 {width: 25%;} .col-m-9 {width: 75%;} .col-8 {width: 66.66%;}
.col-m-4 {width: 33.33%;} .col-m-10 {width: 83.33%;} .col-9 {width: 75%;}
.col-m-5 {width: 41.66%;} .col-m-11 {width: 91.66%;} .col-10 {width: 83.33%;}
.col-m-6 {width: 50%;} .col-m-12 {width: 100%;} } .col-11 {width: 91.66%;}
.col-m-7 {width: 58.33%;} .col-12 {width: 100%;}
}
DEFINIREA CONTINUTULUI
<div class="col-3 col-m-3 menu">
<ul> <li>Căței</li> <li>Pisoi</li> </ul>
<img src="img/emblema.png" alt="pisoi si catel" />
</div>
<div class="col-6 col-m-9 content">
<h1>Animalele de companie</h1>
<p>Animalele de companie sunt des întâlnite în sau pe lângă casele
oamenilor, de la noi. Cui nu-i plac pisoii pufoși sau cațeii fideli???</p>
<p>Pe această resursă veți putea găsi mai multe informații utile pentru
dvoastră peste aceste animălute drăguțe</p>
</div>
<div class="col-3 col-m-12">…</div>
ADAPTIVITATEA IMAGINILOR
DIN PAGINI
 Se definește stilul pentru imagini:
img {
max-width:100%;
height: auto;
}
ADAPTIVITATEA VIDEO DIN
PAGINI
Pentru:
<video width="450" controls>
<source src="clip.ogv" type="video/ogg" />
<source src="clip.mp4" type="video/mp4" />
<p>Browserul dvoastra nu sustine formatul dat de video.</p>
</video>
Se scriu stilurile:
video {
max-width: 100%;
height: auto;
}
REZULTATUL
După micșorarea ecranului:

CREAREA EFECTULUI DE
TRANSPARENŢĂ
 Pentru a face o imagine transparentă sunt utilizate proprietăţi din
CSS3
 Proprietatea opacity asigura transparenţa imaginii în browserele IE9,
Firefox, Chrome, Opera şi Safari
 Această proprietate ia valori de la 0 la 1
 O valoare mai mică atribuită proprietăţii opacity face elementul mai
transparent
 IE8 şi versiunile anterioare foloseşte
proprietatea filter:alpha(opacity=x), unde x poate lua valori între 0 –
100
 O valoare mai mică atribuită acestei proprietăţii face elementul mai transparent
EXEMPLU
.galerie{
width: 20%;
height: 300px; .galerie:hover{
margin: 10px; opacity: 0.7;
padding:10px; filter: alpha(opacity=70);
border: 7px solid rgb(214, 197, 200); }
}
EXEMPLU DIV TRANSPARENT PE
FUNDAL CU IMAGINE
Pentru acest cod HTML:
 Foaia cu stiluri, coduri: <div class="container">
.container{
<p>Plantele ornamentale ….</p>
padding-left: 10px;
position: relative; </div>
background-image: url("../images/
flowers.png");
background-size: 20% 100%;
}
.container p{
width: 100%;
opacity: 0.7;
filter: alpha(opacity=70);
}
REZULTAT
EXEMPLE INTERNET
DEFINIREA GRADIENTULUI
PENTRU FUNDAL
 Gradientul – reprezintă trecerea unei culori într-o altă culoare sau
mai multe
 Folosind gradientul pentru definirea culorii de fundal se reduce
timpul de încărcare a paginii în browser
 În CSS3 pot fi definite două tipuri de gradient
 Linear Gradients (cu schimbarea culorilor
down/up/left/right/diagonally)
 Radial Gradients (gradientul porneşte din centru)
 Nu toate versiunile browsere-lor (mai ales cele vechi) suportă
definirea gradientului
 Din acest motiv se recomanda și definirea în mod tradițional a culorii de fundal
DEFINIREA GRADIENTULUI
LINIAR
 Pentru a crea un gradient liniar trebuie să fie definite cel puțin
două culori: culoarea iniţială şi cea finală, la care se face tranziţia
 Sintaxa: background: linear-gradient(direcţia, c1, c2, ...);
 Valoarea implicită pentru gradient va fi „Top to Bottom”
 Exemplu:
#gradient {
height: 200px; width: 300px;
background: linear-gradient(pink, white); /* Sintaxa standarda */
background: -webkit-linear-gradient(pink, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(pink, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(pink, white); /* Firefox 3.6 - 15 */
}
REZULTAT APLICARE STIL
DEFINIRE GRADIENT „LEFT TO
RIGHT”
#gradient {
height: 200px;
width: 300px;
background: linear-gradient(to right, purple, pink); /* Sintaxa standarda */
background: -webkit-linear-gradient(right, purple, pink); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, purple, pink); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, purple, pink); /* Firefox 3.6 - 15 */
}
SPECIFICAREA ȘI A UNEI CULORI ÎN FORMAT
OBIȘNUIT PENTRU BROWSERELE CARE „NU
ȘTIU” SĂ INTRPRETEZE GRADIENTUL
.grad {
height: 300px;
background: grey; /* pentru browserele ce nu suporta
gradientul */
background: linear-gradient(to bottom right, gray, black);
color: white;
}
DEFINIRE GRADIENT „GRADIENT
– DIAGONAL”
#gradient {
height: 200px; width: 300px;
background: linear-gradient(to bottom right, purple, white); /* Sintaxa standarda */
background: -webkit-linear-gradient(left top, purple, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, purple, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, purple, white); /* Firefox 3.6 - 15 */
}
UTILIZAREA MAI MULTOR
CULORI PENTRU GRADIENT
#gradient {
height: 200px;
width: 300px;
background: linear-gradient(white, purple, white); /* Sintaxa standarda */
background: -webkit-linear-gradient(white, purple, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(white, purple, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(white, purple, white); /* Firefox 3.6 - 15 */
}
DEFINIREA GRADIENTELOR
TRANSPARENTE
 Se utilizează funcţia rgba(R, G, B, α), unde α – poate lua valori de la 0 la
1 (0 – fără culoare, 1 – prezenţa culorii)
 Exemplu:
#gradient {
height: 200px;
width: 300px;
background: linear-gradient(to right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /*
Sintaxa standarda */
background: -webkit-linear-gradient(left, rgba(200,50,0,0), rgba(200,50,0,0.8)); /*
Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /* Opera
11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(200,50,0,0), rgba(200,50,0,0.8)); /*
Firefox 3.6 - 15 */
}
REZULTAT
DEFINIRE „RADIAL GRADIENT”
#gradient {
height: 200px;
width: 300px;
background: radial-gradient(pink, white, pink); /* Sintaxa standarda */
background: -webkit-radial-gradient(pink, white, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(pink, white, pink);/* Opera 11.1 - 12.0 */
background: -moz-radial-gradient(pink, white, pink); /* Firefox 3.6 - 15 */
}
TRANSFORMĂRI 2D
 Transformările permit să se efectueze asupra unui element

HTML translări, rotiri, scalări, înclinări
 Pentru crearea transformărilor 2D în CSS3 se folosește
proprietatea transform, suplimentar fiind utilizate
următoarele metode de transformare:
 translate()
 rotate()
 scale()
 skewX()
 skewY()
 matrix()
METODA TRANSLATE()
 Translează elementul din poziţia iniţială, într-o nouă poziţie,
deplasată pe x şi y
 Exemplu:
.img1:hover{
transform: translate(15px,15px);
}
METODA ROTATE()
 Utilizarea acestei metode va roti elementul cu unghiul specificat

 Exemplu:
.img2:hover{
transform: rotate(20deg);
}
METODA SCALE()
 Va creşte sau descreşte dimensiunea (lăţimea şi înălţimea) unui

element HTML specificat
 Exemplu:
.img3:hover{
transform: scale(1.3,1.3);
}
METODA SKEWX()
 Deformează un element pe orizontală (axa x)

 Exemplu:
.img4:hover{
transform: skewX(20deg);
}
METODA SKEWY() ŞI SKEW()
 Metoda skewY() deformează obiectul pe verticală
 Iar metoda skew() deformează un element şi pe X şi pe Y
 Exemplu:
.img5:hover{
transform: skew(20deg, 10deg);
}
METODA MATRIX()
 Această metodă are 6 parametri, care conţin funcţii matematice

ce permit rotirea, scalarea, translarea şi deformarea elementului
 Exemplu:
img:hover {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CREAREA EFECTELOR DE TRANZIŢIE
 Generarea acestui efect necesită specificarea

 Proprietăţilor CSS
 Durata efectului (dacă nu este specificată durata, efectul nu se va produce,
fiindcă valoarea implicită pentru durată este 0)
 Valori posibile
 transition: property duration timing-function delay
 Este forma prescurată pentru proprietățile:
 transition-property – specifică proprietatea CSS pentru care se definește
tranziția
 transition-duration – se specifică durata tranziției în secunde
 transition-timing-function – se specififică forma curbei pentru efectul de
tranziție. Valori posibile: linear|ease|ease-in|ease-out|ease-in-out|step-
start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)
 transition-delay – specifica durata pauzei de până la începerea tranziției
EXEMPLU
.img1:hover{
transform: translate(15px,15px);
transition: transform 1s;
}
Rezultat efecte
EXEMPLU 2 APLICARE TRANSITION
<div class="bloc">
<h5>Parerea dumneavoastra este foarte importanta pentru noi</h5>
<form class="form">
<input type="text" placeholder="Prenumele dvoastra"
autofocus /><br />
<input type="text" placeholder="Emailul dvoastra" /><br />
<textarea cols="30" rows="4" placeholder="Mesajul
dvoastra"></textarea><br />
<input type="submit" value="Trimite" />
</form>
</div>
STILURILE
input[type="text"], textarea {
border: 0; outline: 0; background: transparent;
border-bottom: 2px solid #5200cc;
margin: 10px; padding: 10px; color: #5200cc; }
input[type="submit"] {
background: #5200cc;
border-bottom: 1px solid #5200cc;
color: white;
margin-left: 10px; padding: 10px 30px; }
:focus {
transition: color 0.7s, text-shadow 0.7s;
-webkit-transition: color 0.7s, text-shadow 0.7s;
text-shadow: #555 1px 1px 1px; }
REZULTAT
UN ALT EXEMPLU, PENTRU MENIU
li a { display: block;
color: white;
text-align: left;
padding: 16px;
text-decoration: none;
font-size: 20px;
-webkit-transition: background 2s; /* Safari */
transition: background 2s; }
li a:hover {
-webkit-transition: background 2s; /* Safari */
transition: background 2s; }
PROPRIETATEA «FILTER»
 Definește efecte vizuale elementelor HTML- ca de exemplu

imaginilor
 Valori posibile pentru această proprietate: filter: none | blur() |
brightness() | contrast() | drop-shadow() | grayscale() | hue-
rotate() | invert() | opacity() | saturate() | sepia() | url();
 Unei imagini îi pot fi aplivate și câteva efecte vizuale – acestea
fiind separate prin spațiu
 Imagini ”frumoase” puteți prelua gratuit de pe resursa:
https://unsplash.com/?fbclid=IwAR0l4SozmaIywNKt2nem5ndE-nz0-
AvQeFVtX2eEkSf2wjaCJXoehzWVpKw
EXEMPLU APLICARE FILTRE
.original { width: 100%; height: auto; .blur {
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.2), width: 100%; height: auto;
0 12px 20px 5px rgba(0, 0, 0, 0.22); box-shadow: 0 10px 15px 0 rgba(0, 0, 0,
-webkit-transition: filter 1s; 0.2), 0 12px 20px 5px rgba(0, 0, 0, 0.22);
transition: filter 1s; } -webkit-transition: filter 1s;
img:hover { transition: filter 1s;
-webkit-transition: filter 1s; -webkit-filter: blur(3px); /* Safari */
transition: filter 1s; filter: blur(3px); }
-webkit-filter: inherit; filter: inherit; } .sepia {
.grayscale { width: 100%; height: auto;
width: 100%; height: auto; box-shadow: 0 10px 15px 0 rgba(0, 0, 0,
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.2), 0.2), 0 12px 20px 5px rgba(0, 0, 0, 0.22);
0 12px 20px 5px rgba(0, 0, 0, 0.22); -webkit-transition: filter 1s;
-webkit-transition: filter 1s; transition: filter 1s;
transition: filter 1s; -webkit-filter: sepia(70%);
-webkit-filter: grayscale(100%); filter:sepia(70%); }
filter: grayscale(100%); }
REZULTAT
Alte exemple: https://www.w3schools.com/cssref/css3_pr_filter.asp

ANIMAŢII
 Animațiile elaborate cu CSS3 permit crearea acelor animații pentru

elementele HTML, care până nu demult erau posibile doar cu
utilizarea JavaScript sau Flash
 Animația presupune schimbarea treptată de la un stil la altul a unui
element HTML
 Pot fi schimbate şi mai multe proprietăți CSS şi nu doar o singură
dată, dar chiar şi de câteva ori
 Pentru a defini animația cu CSS3, trebuie să se specifice mai întâi
câteva cadre cheie pentru plasarea animației
 Regulile de trecere pentru animaţie se specifică în @keyframes
nume
 Alte exemple vezi: http://www.w3schools.com/css/css3_animations.asp
PROPRIETĂŢILE ANIMAŢIEI ÎN CSS3
Proprietatea Descrierea
@keyframes Specifică definirea codurilor animaţiei
animation Forma prescurtată pentru definirea animaţiei, a tuturor
proprietăţilor înafara de: animation-play-state, animation-fill-mode
animation-delay Specifică o pauză până la începerea animaţiei
animation-direction Specifică dacă o animație ar trebui să se deplaseze în sens invers sau
defineşte cicluri alternative
animation-duration Specifică durata animaţiei: câte secunde sau milisecunde durează
animaţia
animation-fill-mode Specifică stilul elementului atunci când animaţia s-a terminat sau
când e în pauză
animation-iteration-count Specifică de câte ori trebuie să se producă animaţia
animation-name Specifică denumirea animaţiei @keyframes
animation-play-state Specifică dacă animaţia e activă sau întreruptă
animation-timing-function Specifică viteza curburii animaţiei
PROPRIETATEA @KEYFRAMES
Rule
@keyframes 4.0 -webkit- 10.0 16.0 4.0 – 15.0 - webkit-
5.0 – webkit- 12.10
moz- 12.0 -o-
 Se folosesc diferite denumiri ale proprietăţii pentru diferite browsere
 Sintaxa: @keyframes denumireAnimatie {
keyframes-selector {css-styles;}}
Valoarea Descrierea
denumireAnimatie Obligatoriu. Defineşte numele animaţiei
keyframes-selector Obligatoriu. Valori posibile:
•0-100% - procentul animaţiei
•from (corespunde - 0%)
•to (corespunde - 100%)
OBS: Pot fi definite câteva cadre pentru o animaţie
css-styles Obligatoriu. Defineşte una sau mai multe proprietăţi de stil
UN EXEMPLU. CONȚINUTUL HTML
<div class="head">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
</div>
</div>
STILURI
.container { width: 300px;

height: 300px;
border-radius: 8px;
position: absolute;
top: 0%;
left: 77%; }
span { display: block;
position: absolute;
width: 40%;
height: 40%;
border-radius: 50%;
box-shadow: 2px 2px 3px rgba(0,0,0,.6);
-webkit-animation: run 8s infinite ease-in-out;
animation: run 8s infinite ease-in-out;}
STILURI. II
.one { background-image: url('img6.jpg’); image-repeat: no-repeat;

background-pozition: 50% 50%; background-size: cover;
-webkit-animation-delay:6s; animation-delay: 6s; }
.two {background-image: url('img7.jpg’); image-repeat: no-repeat;
-webkit-animation-delay: 4s; animation-delay: 4s; }
.three { background-image: url('img4.jpg’); image-repeat: no-repeat;
-webkit-animation-delay: 2s; animation-delay: 2s; }
.four { background-image: url('img2.jpg’); image-repeat: no-repeat;
background-pozition: 50% 50%; background-size: cover; }
STILURI. III
@-webkit-keyframes run {
0% { transform: translate(0%); border-radius: 50%; }
25% { transform: translate(150%) scale(0.6); border-radius: 0%; }
50% { transform: translate(150%, 150%); border-radius: 50%; }
75% { transform: translate(0%, 150%) scale(0.6); border-radius: 0%; }
}
@keyframes run {
0% { transform: translate(0%); border-radius: 50%; }
25% { transform: translate(150%) scale(0.6); border-radius: 0%; }
50% { transform: translate(150%, 150%); border-radius: 50%; }
75% { transform: translate(0%, 150%) scale(0.6); border-radius: 0%; }
}
REZULTAT
Exemplu
ALT EXEMPLU
@keyframes anime1 {
<h1 class="bottom anime"> 0% {
transform:translate(5px);
Florile de cameră preferate color: rgb(223, 252, 121);
}
</h1>
50% { transform: scale(0.5); }
100% { transform: scale(1);}
Stiluri: }
.anime{ @-webkit-keyframes anime1 {
animation-duration: 2s; 0% {
animation-iteration-count: infinite; transform:translate(5px);
animation-name: anime1; color: rgb(223, 252, 121);
} }
50% { transform: scale(0.5); }
100% { transform: scale(1);}
Rezultat }
LIBRĂRII CSS3
 Pentru a adăuga efecte de animație poate fi utilizată librăria

bazată pe CSS3 animate.css, care poate fi descărcată de pe site-
ul - https://daneden.github.io/animate.css/
 După ce descarci librăria, tastând Download Animate.css, copii
coținutul într-un fișier, pe care îl numești animate.css, pe care,
apoi, îl salvezi în folder-ul css, din proiect.
 OK! Acum trebuie creată legătura cu această resursă externă
documentului nostru web. Cred ca știi deja ce linie de cod trebuie
să inserezi în fișierul index.html, care definește site-ul? Da!
 <link rel="stylesheet" href="css/animate.css" />
EXEMPLU
<html>
<link rel="stylesheet" href="css/animate.css" />
<body>
<h1 class="animated infinite pulse">HELLO!</h1>
</body>
</html>
Sau poate fi utilizată o bibliotecă suplimentară precum wow.js
(https://wowjs.uk/docs.html) împreună cu animate.css
În index.html – adăugați <script src="js/wow.min.js"></script>
Iar apoi <script>new WOW().init();</script>
Sau separați într-un fișier cu scripturi locale
!!!
 3 noţiuni noi învăţate azi

 2 întrebări/neclarităţi care au apărut
 1 sugestie pentru tema următoare

Tema 6

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tema 6

Încărcat de

Drepturi de autor:

Formate disponibile

TEMA 6: MACHETE PENTRU PAGINILE

Natalia Pleşca, lect. univ

Fie în documentul web următoarea Voi defini în fișierul de stiluri stilul

 Implicit elementele “absolute” se poziționează într-un sistem de

Dacă voi comenta linia cu poziționarea relativă a

 Când elementele sunt poziționate în afara fluxului normal

Dacă voi scrie stilurile așa:

 Proprietatea CSS „float” specifică cum un anumit element poate

Voi specifica pentru pozele din documentul web următorul stil:

html, body{margin:0; padding:0; }

left Nu va mai cuprinde elementele flotante pe partea stângă

.text1 { border: 1px solid red; }

.text2 { border: 1px solid red;

 O altă modalitate de aliniere a unui grup de elemente ar fi

 Dimensiunile oricărui dreptunghi din pagină – înalțime și lățime se

 La machetarea paginilor ar trebui să se respecte

Recomandare: Încercați stabilirea lățimii .container în %

Pentru restul elementelor – .container, .block, .header, .menu - stilurile

 Analizați cum se realizează machetarea cu

 Galerie cu fotografii, folosind flex

 Machetare site cu flex

 Ponderea utilizării dispozitivelor mobile

 Atât ideea cât și rolul la „responsive web design” au

 Orice pagină web poate fi divizată, imaginar, în 12 coloane,

 Este suportată de toate browserele cunoscute

Mai multe detalii: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

 ”Design for Mobile First” – presupune că mai întâi

După micșorarea ecranului:

 Transformările permit să se efectueze asupra unui element

 Utilizarea acestei metode va roti elementul cu unghiul specificat

 Va creşte sau descreşte dimensiunea (lăţimea şi înălţimea) unui

 Deformează un element pe orizontală (axa x)

 Această metodă are 6 parametri, care conţin funcţii matematice

 Generarea acestui efect necesită specificarea

 Definește efecte vizuale elementelor HTML- ca de exemplu

Alte exemple: https://www.w3schools.com/cssref/css3_pr_filter.asp

 Animațiile elaborate cu CSS3 permit crearea acelor animații pentru

.container { width: 300px;

.one { background-image: url('img6.jpg’); image-repeat: no-repeat;

 Pentru a adăuga efecte de animație poate fi utilizată librăria

 3 noţiuni noi învăţate azi

S-ar putea să vă placă și