Typeset kerek gombok css3

Ön itt van: Home - CSS - CSS3 - typeset kerek gombok CSS3.

Helló kedves olvasók. Már megtanultam sok olyan tulajdonság, amely megjelenik a CSS3. de csak azért, hogy ismerjük őket egy kicsit. Meg kell gyakorolni! És most megmutatom, hogyan lehet létrehozni egy kerek gombot CSS3.

Nyissa meg a index.html fájlt, és hozzon létre egy egyszerű szerkezet

Semmi különös. Mindössze 3 háztömbnyire az osztály .button Térjünk a stílusokat.

box-shadow: 0 3px 20px RGBA (0,0,0, 0,25),
2px süllyesztés 0 0 RGBA (255.255.255, .6),
0 0 2px RGBA (0,0,0, 0,1),
süllyesztés 0 0 20 képpont RGBA (0,0,0, 0,1);
>

Háttér a dokumentumot, és a kulcsot vettem subtlepatterns.com oldalon.

Azt, hogy a div vonal blokk, így egymás mellett vízszintesen, kérve őket, hogy a magasság, szélesség, tolva a széleit a böngésző, a kerekítési 50%. hogy egy kört, és amikor az egérrel rámutat do. Semmi sem bonyolult, de az árnyék én tudatosan szét stílusok Ez az a rész, hogy nehéz lehet, bár ott is nagyon egyszerű, és látni fogja, hogy most.

Meghatározza az első árnyék, már látni a vázlatot a kínálatból:

box-árnyék: 0 3px 20px RGBA (0,0,0, .25);

Akkor kérünk a belső árnyék. hogy mi volt ilyen okontovochka tetején és a gomb vált ömlesztve.

box-shadow: 0 3px 20px RGBA (0,0,0, 0,25),
2px süllyesztés 0 0 RGBA (255.255.255, .6);

Ezután a külső árnyékban van szükség annak érdekében, hogy sötétedni egy kis hely az alábbi gombra, és a következő belső eltakarja a belső tér a gombot hatás)

box-shadow: 0 3px 20px RGBA (0,0,0, 0,25),
2px süllyesztés 0 0 RGBA (255.255.255, .6),
0 0 2px RGBA (0,0,0, 0,1),
süllyesztés 0 0 20 képpont RGBA (0,0,0, 0,1);

Mint látható, az elején úgy tűnik, nehéz, sok ingatlan, de ha megnézed, minden sokkal könnyebb. Tehát itt van a végeredmény:

Most végre viselkedését, amikor mutatva blokk

gomb: hover box-shadow: süllyesztett 0 0 20px RGBA (0,0,0, 0,2),
0 0 2px RGBA (255.255.255, .4),
2px süllyesztés 0 0 RGBA (0,0,0, 0,1);
>

Már foglalkozott az árnyékok a blokk, és most próbálja megérteni magukat, hogy mi történik, ha mozog. Hasonlóképpen, hagyja csak egy árnyék, hogy mi történik, majd adjunk hozzá egy másik, hogy mi változott, és így tovább.

Végül tegyük hozzá a ikongombok, hogy nem volt nagyon unalmas. Ehhez mi változik egy kicsit a html

Mi csak hozzá egy extra osztály minden gombot, és most kérdezzük meg őket stílusok

Itt egyszerűen egy második háttérkép az egyes gombot, figyelembe az ikonok defaulticon.com oldalon.

Ez minden. Ma megnéztük, hogyan lehet létrehozni egy kerek gombot CSS3.