Caseta Shadow
Cu CSS3 puteți crea efecte de umbră!
CSS3 Efecte Shadow
Cu CSS3 puteți adăuga umbre la text și la elemente.
În acest capitol veți învăța despre următoarele proprietăți:
-
text-shadow -
box-shadow
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifică prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 Text Shadow
CSS3 text-shadow proprietate se aplică umbra textului.
În utilizarea sa cea mai simplă, specificați doar umbra orizontală (2px) și umbra verticală (2px) :
Text efect de umbră!
Apoi, adăugați o culoare la umbra:
Text efect de umbră!
Apoi, se adaugă un efect de estompare la umbra:
Text efect de umbră!
Următorul exemplu arată un text alb, cu umbra negru:
Text efect de umbră!
Exemplul următor prezintă o umbră de neon strălucire roșie:
Text efect de umbră!
Umbre multiple
Pentru a adăuga mai mult de o umbră la text, puteți adăuga o listă separată prin virgulă de umbre.
Exemplul următor prezintă o strălucire de neon umbră roșu și albastru:
Text efect de umbră!
Următorul exemplu arată un text alb, cu umbra negru, albastru, și darkblue:
Text efect de umbră!
Exemplu
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Încearcă - l singur » CSS3 box-shadow Proprietatea
CSS3 box-shadow proprietate se aplică umbra elementelor.
În utilizarea sa cea mai simplă, specificați doar umbra orizontală și verticală umbra:
Apoi, adăugați o culoare la umbra:
În continuare, se adaugă un efect de estompare la umbra:
Puteți adăuga, de asemenea, umbre la The :: înainte și după :: pseudo-clase, pentru a crea un efect interesant:
Exemplu
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} Încearcă - l singur » Carduri
Un exemplu de utilizare a box-shadow proprietate pentru a crea carduri de hârtie cum ar fi:
1
O ianuarie 2016
Hardanger, Norvegia
Exemplu
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Încercați să - l (Image Card) (Text Card) de (Text Card) » Încercați să - l (Image Card) de (Image Card) » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
CSS3 Shadow Proprietăți
Tabelul următor listează proprietățile CSS3 umbra:
| Proprietate | Descriere |
|---|---|
| box-shadow | Adaugă unul sau mai multe umbre la un element |
| text-shadow | Adaugă una sau mai multe umbre la un text |