Sadržaj
Ovo je jedna od najiščekivanijih značajki novog standarda CSS3 i to zajedno s HTML5 uspijeva privući mnoge poglede, pozivamo se na Box Shadow koji nam dopušta postavljanje sjena na kutije u našem dokumentu HTML, stvarajući tako učinak kao da lebdi na stranici.Element Box Shadow mora biti sastavljen na sljedeći način:
box-shadow: hoffset voffset blur spread color inset
Gdje svaki od njegovih atributa obavlja funkciju, pogledajmo svaki od ovih detalja:
- Hoffset: To je horizontalni pomak, što je vrijednost duljine. Pozitivna vrijednost istiskuje Box Shadow s desne strane, s druge strane, negativna vrijednost pomiče sjenu okvira ulijevo.
- Voffset: To je okomiti pomak, što je vrijednost duljine. Pozitivna vrijednost pomiče sjenu okvira ispod okvira stavke, a negativna vrijednost pomiče sjenu okvira iznad okvira stavke.
- Zamućenje: (Opcionalno) Određuje polumjer definicije sjene, što je vrijednost duljine. Što je veća vrijednost, rub kutije predmeta ostaje zamagljeniji. Za zadanu vrijednost 0, granica sjene okvira izgleda potpuno definirana.
- Širenje: (Izborno) Odredite radijus difuzije sjene, to je mjera duljine. Pozitivna vrijednost uzrokuje širenje sjene u svim smjerovima okvira s elementom koji sadrži, a negativna vrijednost uzrokuje kontrakciju sjene elementa koji sadrži.
- Boja: (Izborno) To je boja sjene. Ako je izostavljen, preglednik će odlučiti o boji.
- Umetnuti: (Izborno) Omogućuje stvaranje sjene unutar okvira elementa na koji se primjenjuje.
Nakon što saznamo atribute, prijeđimo na primjer koda kako bismo naučeno primijenili u praksi.
PrimjerPostoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.
Kao što vidimo, možemo primijeniti Box Shadow U CSS -u unutar oznake stila ovaj kôd generira sljedeći rezultat:
PrimjerPostoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.
Pogledajmo sada kako su obje sjene prikazane u našem elementu:
