[CSS] Shadow Box

Jedan jednostavan Kod pomoću kojeg možete dodati senku ispod nekog polja u CSS-u.

Sve u ovom Kodu možete menjati kako vama odgovara.

Da bi počeli, otvorite Notepad (preporučujem Notepad++).

Ok, ako jeste, da počnemo:

Prvo:

– Dodajemo <style></style> gde izmedju definišemo izgled, tj. ubacujemo CSS Kod

.box {
color: #fff; /* boja teksta */
text-align: center; /* centriranje teksta */
position:fixed; /* priliom scrollovanja polje ostaje na mestu */
width:50px; /* sirina polja */
height:40px; /* visina polja */
bottom:50%; /* udaljenost od donje ivice */
left: 50%; /* udaljenost od leve ivice */
font-size: 20px; /* velicina teksta */
font-weight: Bold; /* podebljanje teksta */
padding: 30px; /* koliko ce tekst biti odmaknut od ivica polja */
background:rgba(0,0,0,0.8); /* pozadina, 1,2,3 broj su RGB boje, 4. broj je providnost */
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
}

Kopiraj KOD

0px 0px 15px rgba(0, 0, 0, 0.75);
– Prvi broj predstavlja koliko će senka biti pomerena DESNO (stavi minus da bi senka išla LEVO)
– Drugi broj predstavlja koliko će senka biti pomerena DOLE (Stavi minus da bi senka išla GORE)
– Treći broj predstavlja koliko će senka biti mutna, što veći broj – veća senka.

Zatim:

Ispod svega ovoga dodajtemo <div> tag;

<div class=“box“> test </div>

Kopiraj KOD

Sad smo „prizvali“ onaj CSS Kod i mozemo pisati neki tekst ili dodati link. Sve sto stavite izmedju <div> i </div> nalazice se u tom polju.

I konačno, to bi izgledao ovako:

Gotov KOD