Bloc ridicat Css. Umbre interioare în CSS
Odată cu apariția standardului CSS 3 a introdus proprietatea box-shadow, care a devenit utilizată pe scară largă în rândul dezvoltatorilor web, deoarece facilitează adăugarea uneia sau mai multor umbre în caseta unui element pentru a da efectul vizual dorit.
În articolul anterior, ne-am uitat la proprietatea border-radius, folosind-o, puteți obține o umbră cu colturi rotunjite. Prin analogie cu o umbră de text (text-shadow), puteți crea mai multe umbre, acestea sunt aplicate în funcție de axa z din față în spate (cu prima umbră dată deasupra).
Să aruncăm o privire mai atentă asupra sintaxei acestei proprietăți moderne:
Să ne uităm la el în ordine valori posibile această proprietate:
| Sens | Descriere |
|---|---|
| nici unul | Umbra nu este afișată. Aceasta este valoarea implicită. |
| medalion | Valoare opțională. Dacă această valoare nu este specificată (implicit), umbra va fi pe exteriorul elementului și va crea efectul de bombare a elementului. Dacă cuvântul cheie (valoare) este prezent, umbra va cădea în interiorul elementului și va crea un efect stricat. Cu alte cuvinte, este o schimbare de la o umbră exterioară la una interioară. |
| h-umbra | Valoare cerută. Setează locația umbrei orizontale. Sunt permise valori negative. |
| v-umbră | Valoare cerută. Setează locația umbrei verticale. Sunt permise valori negative. |
| raza de estompare | Valoare opțională. Setează raza de estompare. Cu cât valoarea este mai mare, cu atât este mai mare neclaritatea, făcând umbra mai mare și mai ușoară. Dacă valoarea nu este specificată, valoarea va fi 0 (sharp - umbre distincte). Valorile negative nu sunt permise. |
| raza de raspandire | Valoare opțională. Dimensiunea umbrei (raza de întindere a umbrei). Cu valori pozitive umbra se va extinde, iar cu valori negative se va micșora. Dacă nu este specificată nicio valoare, valoarea va fi 0 (umbra corespunde mărimii elementului). |
| culoare | Valoare opțională. Definește culoarea umbrei (HEX, RGB, RGBA, HSL, HSLA, „Culori predefinite”). Valoarea implicită este negru. |
Principalele puncte pe care trebuie să le înțelegeți pentru a crea umbre pentru elemente sunt:
Aș dori să vă atrag atenția asupra faptului că proprietatea box-shadow este acceptată în prezent de toate browserele moderne:
| Proprietate | Operă | IExplorer | Margine |
|||
|---|---|---|---|---|---|---|
| cutie-umbră | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Dacă doriți să extindeți suportul pentru unele browsere, inclusiv pentru mobil iOS 3.2 - 4.3Și Android 2.1 - 3, atunci este recomandat să folosiți prefixe de producător și să folosiți următoarea sintaxă (în exemplele din articol, sintaxa va fi folosită doar pentru browsere moderne):
-webkit-box-shadow : valoare ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 și Android 2.1 - 3 */-moz-box-shadow : valoare ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* tabelul de mai sus */Să trecem la practică și să începem cu exemplu simplu, în care adăugăm o umbră elementelor:
Rezultatul exemplului nostru:
Utilizarea umbrelor multiple
În exemplul următor, îmi propun să luăm în considerare efect interesant amestecarea culorilor, care poate fi realizată prin utilizarea mai multor umbre:
- Două blocuri de latime si inaltime fixe (15em si 10em), adaugate marginile pentru toate părțile (2em) și a stabilit că blocurile sunt bloc-line pentru a le putea alinia.
- Pentru primul bloc cu clasa .Test am indicat noi patru umbre cu diferite valori de umbră orizontale și verticale, astfel încât elementul să aibă umbre diferite pe toate părțile. Raza de estompare pentru toate umbrele a fost setată la aceeași. Culoarea fiecărei umbre este diferită și este specificată folosind culori predefinite.
- Pentru al doilea bloc cu clasa .test2 am indicat noi patru umbre cu diferite valori de umbră orizontale și verticale. Raza de estompare pentru toate umbrele a fost setată la aceeași, în timp ce întinderea umbrei a fost setată la negativă, ceea ce a dus la o scădere a umbrei în sine. Culoarea fiecărei umbre este diferită și este specificată folosind sistemul RGBA.
Rezultatul exemplului nostru:
Utilizarea umbrelor pentru imagini
Exemplul final al acestui articol se va concentra pe utilizarea umbrelor pentru imagini. Aș dori să vă atrag imediat atenția asupra faptului că puteți specifica direct umbra pentru elementul HTML Nu va funcționa, dar avem posibilitatea de a specifica o imagine ca fundal pentru elementul care ne interesează și apoi să atribuim umbra de care avem nevoie acestui element.
Ne vom uita la lucrul cu imagini de fundal în detaliu în articolul din manual „”, iar acum, pentru a pune capăt studiului utilizării umbrelor, vom atinge superficial și vom folosi imaginea ca fundal pentru un element în cele ce urmează. exemplu:
- Două blocuri de lățime și înălțime fixe (237px și 232px), au adăugat margini pe toate laturile (2em) și setați blocurile să fie block-line pentru a le putea alinia. Am setat dimensiunea blocului 237px cu 232px la dimensiunea imaginii astfel încât în această etapă antrenamentul nu a trebuit să scaleze imaginea pentru a se potrivi cu elementul și să afecteze acele proprietăți CSS care sunt planificate pentru a fi studiate într-o etapă ulterioară (în articolul manual " ").
- Pentru primul bloc cu clasa .Test Am specificat o valoare zero pentru umbra orizontală și verticală, dar în același timp am specificat o rază de estompare de 50px și am extins-o setând o rază de întindere de 10px. Culoarea umbrei a fost indicată cu o culoare predefinită (violet). În plus, am indicat în anunț cuvânt cheie inset , ceea ce face ca umbra să cadă în interiorul elementului. Cu alte cuvinte, am creat o umbră interioară a elementului.
- Pentru al doilea bloc cu clasa .test2 Am specificat o valoare zero pentru umbra orizontală și verticală, dar în același timp am specificat o rază de estompare de 50px și am extins-o setând o rază de întindere de 10px. Culoarea umbrei este specificată în modul RGBA.
Rezultatul exemplului nostru:
Orez. 98 Exemplu de utilizare a umbrelor pentru imagini în CSS (proprietatea box-shadow)
Întrebări și sarcini pe această temă
Înainte să începi să studiezi următorul subiect ia sarcina practică:
Dacă întâmpinați dificultăți la finalizare sarcină practică Puteți oricând deschide exemplul într-o fereastră separată și inspectați pagina pentru a înțelege ce cod CSS a fost folosit.
2016-2019 Denis Bolshakov, puteți trimite comentarii și sugestii cu privire la activitatea site-ului la [email protected]
Umbrele obișnuite sunt ușor de implementat folosind box-shadow sau text-shadow. Dar dacă trebuie să faci umbre interne? Acest articol descrie cum să faci astfel de umbre cu doar câteva linii de cod.
Sintaxă
Mai întâi, să ne uităm la cele două moduri principale de a implementa umbre în CSS.cutie-umbră
Proiecta cutie-umbră conține mai multe semnificații diferite:
Offset orizontalȘi offset vertical- deplasare orizontală, respectiv verticală. Aceste valori indică direcția în care obiectul își va arunca umbra:
Raza de estompareȘi raza de răspândire putin mai complicat. Care este diferența? Să ne uităm la un exemplu cu două elemente, unde valorile raza de estompare diferă:
Marginea umbrei este pur și simplu neclară. La sens diferit raza de răspândire vedem urmatoarele:
În acest caz, vedem că umbra este împrăștiată pe o zonă mare. Dacă nu specificați o valoare raza de estompareȘi raza de răspândire, atunci ele vor fi egale cu 0.
text-umbră
Sintaxa este foarte asemănătoare cu cutie-umbră:
Semnificațiile sunt similare, dar nu răspândit-umbră. Exemplu de utilizare:
Inserat în casetă-umbră
Pentru a „întoarce” umbra în interiorul obiectului, trebuie să adăugați medalionîn CSS:
Odată ce înțelegeți sintaxa de bază a casetei-umbră, este foarte ușor de înțeles cum să implementați umbrele interioare. Valorile sunt în continuare aceleași, puteți adăuga culoare (RGB în hexadecimal):
Colorează format RGB, valoarea alfa este responsabilă pentru transparența umbrei:
Imagini cu umbre
Adăugarea unei umbre interioare unei imagini este puțin mai dificilă decât adăugarea unei umbre obișnuite div. Pentru început, iată codul obișnuit al imaginii: 
Este logic să presupunem că puteți adăuga o umbră ca aceasta:
Imag (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )
Dar umbra nu este vizibilă:
Există mai multe moduri de a rezolva această problemă, fiecare dintre ele având avantajele și dezavantajele sale. Să ne uităm la două dintre ele. Primul este să înfășurați imaginea într-un mod obișnuit div:
Div ( înălțime: 200px; lățime: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img ( înălțime: 200px; lățime: 400px; poziție: relativ; z-index: -2 ;
Totul funcționează, dar trebuie să adaugi puțin în plus Marcaj HTMLși CSS. A doua modalitate este să setați imaginea ca fundal blocul dorit:
Div ( înălțime: 200px; lățime: 400px; fundal: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )
Iată ce se poate întâmpla atunci când folosiți umbrele interioare:
Inserare la text-shadow
Pentru a implementa o umbră interioară de text, pur și simplu adăugați la cod medalion nu funcționează:
Pentru a rezolva, aplicați mai întâi la antet h1 instalare fundal întunecatși o umbră ușoară:
H1 (culoare de fundal: #565656; culoare: transparent; umbră text: 0px 2px 3px rgba(255,255,255,0.5); )
Iată ce se întâmplă:
Adăugarea unui ingredient secret clip de fundal care decupează orice se extinde dincolo de text (până la un fundal întunecat):
H1 (culoare fundal: #565656; culoare: transparent; umbră text: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;
S-a dovedit aproape exact ceea ce aveam nevoie. Acum doar întunecăm puțin textul (alfa), iar rezultatul este:
Proprietatea CSS box-shadow vă permite să setați o umbră element html. Este folosit destul de des de către designerii de site-uri web pentru a decora și evidenția cadre cu text, imagini și pentru a face conținutul mai ușor de citit.
Sintaxă casetă-umbră CSS
... box-shadow : X Y R1 R2 culoare ; ...
- X - offset de-a lungul axei X (orizontală)
- Y - offset de-a lungul axei Y (verticală)
- R1 - estompare (cu cât valoarea este mai mare, cu atât tranziția este mai lină)
- R2 - raza de extensie (dacă este pozitivă, se întinde, negativă, se comprimă)
- culoare - culoare (poate fi specificat în orice format: #RGB, numele culorii)
- inset - dacă această valoare este prezentă, umbra va fi localizată în interiorul blocului (elementului)
Exemplul 1. Cadru HTML cu umbră casetă fără offset
Mai jos este cel mai simplu mod de a folosi umbra proprietate CSS caseta-umbra pe pagina html când curge uniform în jurul întregului cadru fără deplasare.
Exemplul nr. 1. Rama cu umbra
Exemplul nr. 1. Rama cu umbra
Exemplul 2. Cadru HTML cu umbră decalată casetă-umbră
Aproape același exemplu ca primul, dar numai cu cadrul deplasat.
Exemplul nr. 2. Cadru cu umbră decalată
Pagina se transformă în următoarele
Exemplul nr. 2. Cadru cu umbră decalată
Exemplul nr. 3. Cadru strălucitor html
Implementarea unei umbre ca strălucire
Exemplul nr. 3. Strălucire
Pagina se transformă în următoarele
Exemplul nr. 3. Strălucire
Exemplul 4. strălucire interioară a marginii HTML
O strălucire care este îndreptată în interiorul blocului și nu depășește limitele acestuia. Efectul este creat folosind atributul inset.
Exemplul nr. 4. Stralucire interioara
Pagina se transformă în următoarele
Exemplul nr. 4. Stralucire interioara
Exemplul 5. Combinarea umbrelor în html
Efectul de umbră poate fi combinat separat prin virgule. În acest caz, foarte rezultate interesante. De exemplu, puteți face un cadru multicolor în stil 3D.
Exemplul nr. 5. Combinarea umbrelor
Pagina se transformă în următoarele
Exemplul nr. 5. Combinarea umbrelor
Notă: browsere mai vechiVersiunile IE anterioare 9 nu acceptă box-shadow. Prefixe de browser pentru box-shadow
- -webkit-box-shadow - pentru Chrome până la 10, Safari până la 5.1, Android până la 4 și iOS până la 5
- -moz-box-shadow - pentru Firefox până la versiunea 4.0
Umbrele obișnuite sunt ușor de implementat folosind box-shadow sau text-shadow. Dar dacă trebuie să faci umbre interne? Acest articol descrie cum să faci astfel de umbre cu doar câteva linii de cod.
Sintaxă
Mai întâi, să ne uităm la cele două moduri principale de a implementa umbre în CSS.
cutie-umbră
Proiecta cutie-umbră conține mai multe semnificații diferite:
Offset orizontalȘi offset vertical— deplasarea orizontală, respectiv verticală. Aceste valori indică direcția în care obiectul își va arunca umbra:
Raza de estompareȘi raza de răspândire putin mai complicat. Care este diferența? Să ne uităm la un exemplu cu două elemente, unde valorile raza de estompare diferă:
Marginea umbrei este pur și simplu neclară. Cu valori diferite raza de răspândire vedem urmatoarele:
În acest caz, vedem că umbra este împrăștiată pe o zonă mare. Dacă nu specificați o valoare raza de estompareȘi raza de răspândire, atunci ele vor fi egale cu 0.
text-umbră
Sintaxa este foarte asemănătoare cu cutie-umbră:
Semnificațiile sunt similare, dar nu răspândit-umbră. Exemplu de utilizare:
Inserat în casetă-umbră
Pentru a „întoarce” umbra în interiorul obiectului, trebuie să adăugați medalionîn CSS:
Odată ce înțelegeți sintaxa de bază a casetei-umbră, este foarte ușor de înțeles cum să implementați umbrele interioare. Valorile sunt în continuare aceleași, puteți adăuga culoare (RGB în hexadecimal):
Culoarea este în format RGB, valoarea alfa este responsabilă pentru transparența umbrei:
Imagini cu umbre
Adăugarea unei umbre interioare unei imagini este puțin mai dificilă decât adăugarea unei umbre obișnuite div. Pentru început, iată codul obișnuit al imaginii:
Este logic să presupunem că puteți adăuga o umbră ca aceasta:
Img (
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}
Dar umbra nu este vizibilă:
Există mai multe modalități de a rezolva această problemă, fiecare dintre ele având avantajele și dezavantajele sale. Să ne uităm la două dintre ele. Primul este să înfășurați imaginea într-un mod obișnuit div:
Div (
înălțime: 200px;
latime: 400px;
}
img (
înălțime: 200px;
latime: 400px;
poziție: relativă;
indicele z: -2;
}
Totul funcționează, dar trebuie să adăugăm puțin cod suplimentar HTML și CSS. A doua modalitate este să setați imaginea ca fundal al blocului dorit:
Div (
înălțime: 200px;
latime: 400px;
fundal: url(http://lorempixum.com/400/200/transport/2);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}
Iată ce se poate întâmpla atunci când folosiți umbrele interioare:
Inserare la text-shadow
Pentru a implementa o umbră interioară de text, pur și simplu adăugați la cod medalion nu funcționează:
Pentru a rezolva, aplicați mai întâi la antet h1 Setați un fundal întunecat și o umbră deschisă:
H1 (
culoare de fundal: #565656;
culoare: transparent;
}
Iată ce se întâmplă:
Adăugarea unui ingredient secret clip de fundal care decupează orice se extinde dincolo de text (până la un fundal întunecat):
H1 (
culoare de fundal: #565656;
culoare: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip:text;
-moz-background-clip: text;
clip de fundal: text;
}
S-a dovedit aproape exact ceea ce aveam nevoie. Acum doar întunecăm puțin textul (alfa) și gata.
Adaugă o umbră unui element. Este posibil să folosiți mai multe umbre, indicând parametrii acestora despărțiți prin virgule la aplicarea umbrelor, prima umbră din listă va fi mai mare, ultima mai mică; Dacă pentru un element este specificată o rază de rotunjire prin proprietatea rază-chenar, atunci umbra va avea și colțuri rotunjite. Adăugarea unei umbre mărește lățimea elementului, astfel încât acesta poate apărea dungă orizontală derularea în browser.
informatie scurta
Sintaxă
Cutie-umbră: niciuna |<тень> [,<тень>]*
Unde<тень>:
medalion<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
Denumiri
| Descriere | Exemplu | |
|---|---|---|
| <тип> | Indică tipul valorii. | <размер> |
| A && B | Valorile trebuie să fie afișate în ordinea specificată. | <размер> && <цвет> |
| A | B | Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B). | normal | litere mici |
| A || B | Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine. | lățime || numara |
| Grupează valori. | [ recolta || cruce ] | |
| * | Repetați de zero sau de mai multe ori. | [,<время>]* |
| + | Repetați una sau mai multe ori. | <число>+ |
| ? | Tipul, cuvântul sau grupul specificat este opțional. | medalion? |
| (A, B) | Repetați cel puțin A, dar nu mai mult de B ori. | <радиус>{1,4} |
| # | Repetați o dată sau de mai multe ori, separate prin virgule. | <время># |
Valori
none Anulează adăugarea unei umbre. inset Umbra este desenată în interiorul elementului.<сдвиг по x>Deplasarea orizontală a umbrei în raport cu elementul. O valoare pozitivă a acestui parametru setează deplasarea umbrei la dreapta, o valoare negativă - la stânga.<сдвиг по y>Deplasarea verticală a umbrei în raport cu elementul. O valoare pozitivă mută umbra în jos, o valoare negativă o mută în sus.<размытие>Setează raza de estompare a umbrei. Cu cât această valoare este mai mare, cu atât umbra este mai netezită, devenind mai largă și mai deschisă. Dacă acest parametru nu este specificat, valoarea implicită este setată la 0, ceea ce va face umbra mai degrabă clară decât neclară.<растяжение>O valoare pozitivă întinde umbra, o valoare negativă, dimpotrivă, o comprimă. Dacă acest parametru nu este specificat, valoarea implicită este 0, ceea ce va face ca umbra să aibă aceeași dimensiune cu elementul.<цвет>Culoarea umbrei în orice format CSS disponibil, umbra implicită este neagră.
Este posibil să specificați mai multe umbre, separându-le parametrii cu o virgulă. Luat in considerare următoarea comandă: Prima umbră din listă este plasată în partea de sus, ultima din listă este plasată în partea de jos.
Exemplu
Rezultatul exemplului este prezentat în Fig. 1.
Orez. 1. Tipul de umbră
Model obiect
Un obiect.style.boxShadow
Notă
Safari înainte de versiunea 5.1, Chrome înainte de versiunea 10.0, Android înainte de versiunea 4.0 acceptă proprietatea -webkit-box-shadow.
Firefox înainte de versiunea 4.0 acceptă proprietatea -moz-box-shadow.
Internet Explorer înainte de versiunea 9.0 nu acceptă proprietatea box-shadow, puteți folosi proprietatea filtru:
Filtru: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Aici: offX - compensarea umbrei orizontale; offY — offset vertical de umbră; culoare — culoarea umbrei.
Folosirea filtrului de umbră oferă o umbră clară și clară, astfel încât să puteți utiliza filtrul de umbră pentru un efect de estompare.
Filtru: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);
Aici: direcția — unghiul de direcție a umbrei de la 0 la 360°; culoare — culoarea umbrei; putere — compensarea umbrei în pixeli.
Specificație
Fiecare specificație trece prin mai multe etape de aprobare.
- Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
- Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru implementarea standardului.
- Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
- Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
- Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
- Ciornă ( Proiect de specificație) - prima versiune a standardului.
