Ecranul @media și # 40; max-lățime. 960 x # 41; # 123;
.
# 125;
În caietul de sarcini CSS3, puteți utiliza interogările media. Datorită acestor interogări CSS, puteți evalua anumite caracteristici tehnice ale dispozitivelor vizitatorului și, prin urmare, puteți aplica stiluri adecvate de design. În exemplul de mai sus, stilurile pot fi descrise pentru situația în care fereastra browserului este de 960 de pixeli sau mai mică.
2) mărimea fundalului
corp # 123;
fundal. URL-ul # 40; image.jpg # 41; fără repetare;
fundal dimensiuni. 100%;
# 125;
O altă proprietate extrem de utilă a CSS3 este dimensiunea de fundal. Datorită acestei proprietăți, puteți scala imaginea de fundal după cum doriți.
3) @ font-face
@ font-face # 123;
font-family. Blackout;
src. URL-ul # 40; "Blackout.ttf" # 41; format # 40; "Truetype" # 41; ;
# 125;
h1 # 123; font-family. Blackout; # 125;
Mai utilizați fonturi standard? Apoi mergem la tine! Aceasta este o glumă desigur, dar este într-adevăr un "păcat" să nu folosiți proprietatea CSS @ font-face și să instalați pe site-ul dvs. acele fonturi care se potrivesc cel mai bine designului proiectat și vor arăta la fel în diferite browsere și pe diferite dispozitive. Tot ce ai nevoie este să găsești sau să creezi un font și să îl prinzi pe pagină utilizând CSS @ font-face. De asemenea, puteți utiliza servicii terțe, cum ar fi Fonturile Google Web.
4) marja: 0 automat
#container # 123;
marjă. 0 auto;
# 125;
În mod surprinzător, nu s-au dezvoltat încă proprietăți pentru centrarea elementului bloc (div). Deci, trebuie să recurgeți la trucuri, iată una dintre cele mai bune modalități de a centra div în raport cu părintele său.
5) Overflow: ascuns
recipient # 123;
preaplin. ascunse;
# 125;
Este necesar ca dimensiunile elementului de bloc să rămână intacte, adică Nu creșteți sub acțiunea conținutului: fie că este vorba de text sau de imagine. Este rezolvată pur și simplu prin depășirea proprietății cu valoare ascunsă. De asemenea, această proprietate are alte valori, de exemplu, puteți face o bară de defilare (valoarea de defilare).
6) .clearfix
clearfix. după # 123;
conținut. "" ;
afișare. bloc;
clare. ambele;
vizibilitate. ascunse;
line-height. 0;
înălțime. 0;
# 125;
Pentru acele situații în care overflow: hidden nu funcționează, puteți utiliza metoda Clearfix. Numele clasei poate fi orice, nu neapărat clarfix.
7) culoare: rgba ()
BTN # 123;
culoare. RGBA # 40; 178. 120. 134. 1 # 41; ;
# 125;
Folosind RGBa CSS, puteți oferi o culoare transparentă, ceea ce este imposibil la o valoare hexazecimală (#fafcdc). Pentru a crea o culoare, trebuie să specificați valorile culorilor constituente: roșu, verde și albastru, precum și setarea parametrului alfa. 1 - complet netransparent, 0 - complet transparent, respectiv 0,5 - jumătate transparentă.
8) introducere [type = "text"]
intrare # 91; tip = "text" # 93; # 123;
lățime. 200px;
# 125;
Când proiectați un design, utilizați selectorii css cu înțelepciune, acest lucru va reduce și optimiza codul. Și, în general, încercați să minimizați cantitatea de cod, deoarece aceasta este cheia programării bune) Datorită selectorului dat mai sus, toate câmpurile cu tipul de text sunt selectate și li se dă o lățime de 200px.
9) transforma: roti (30deg)
titlu # 123;
-Moz-transformare. roti # 40; 15deg # 41; ; / * Pentru Firefox * /
-ms-transformare. roti # 40; 15deg # 41; ; / * Pentru IE * /
-webkit-transformare. roti # 40; 15deg # 41; ; / * Pentru Safari, Chrome, iOS * /
-o-transformare. roti # 40; 15deg # 41; ; / * Pentru Opera * /
transformare. roti # 40; 15deg # 41; ;
# 125;
Nu uitați de animația CSS. De ce să supraîncărcați pagina web cu scripturi inutile, când pot fi înlocuite cu animație css.
o # 123; schiță. nici unul; # 125;
Nimic nu poate strica designul mai mult decât liniile punctate din jurul legăturii când este apăsat. Cu ajutorul conturului: nici unul nu poate fi evitat.
Pentru a fi la curent cu cele mai recente articole și lecții, abonați-vă la lista săptămânală de corespondență sau la RSS feed-ul de știri. Mulțumesc!
Trimiteți-le prietenilor: