CSS3 bemutató Készítsen egy ragyogó be / ki gombot
Egy gomb használata eddig előnyös módja az elektronikus cuccoknak; A rádió, a televízió, a zenelejátszó és még egy hangutasítással rendelkező okostelefon legalább egy vagy két fizikai gombot igényel.
Továbbá ebben a digitális korban a gomb digitális formában is fejlődött, ami interaktívabbá, dinamikusabbá és valósabbá teszi a fizikai gombhoz képest.
Tehát ezúttal egy csúszós és interaktív gombot fogunk létrehozni, amely a Dribbble-nél csak a CSS-en alapuló kiváló designon alapul..
Hát, kezdjük csak el.
HTML
Elindítjuk a gombot a következő jelölés elhelyezésével a HTML-dokumentumunkba. Ez nagyon egyszerű, a gomb egy horgonycímkén alapulna, van egy is arasz a jelzőfény létrehozása mellett, majd egy HTML5-be kerülnek szakasz címke.
& # XF011;
Íme, hogyan jelenik meg gombjaink.
Alapvető stílus
Ebben a részben kezdjük a munkát Stílusok.
Először alkalmazzuk ezt a sötét hátteret a finom dokumentumból a test dokumentumán, és a középpontba helyezzük a szakasz. Ezután eltávolítjuk a pontozottakat is vázlat esetén :fókusz és :aktív link.
body background: url ('images / micro_carbon.png'); szakasz margin: 150px auto 0; szélesség: 75px; magasság: 95px; pozíció: relatív; szöveg-igazítás: központ; : aktív,: fókusz körvonal: 0; Egyéni betűtípus használata
A gomb ikonjára egyéni betűtípust fogunk használni a Font Awesome helyett, mint egy képet. Ily módon az ikon könnyen stílusos lesz, és a stíluslapon átméretezhető lesz.
Töltse le a betűtípust, tárolja a betűtípusfájlokat (eot, woff, ttf és svg) a betűtípusok mappát, majd helyezze a következő kódot a stíluslapjára, hogy meghatározzon egy új betűcsaládot.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") formátum ('eot'), url ("fonts / fontawesome-webfont.woff") formátum ('woff'), url ("fontok / fontawesome- webfont.ttf ") formátum ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") formátum ('svg'); font-súly: normál; betűtípus: normál; 
A teljesítmény ikonra amit ehhez a gombhoz szükségünk van, az Unicode számban szerepel F011; ha közelebbről megnézzük a fenti HTML jelölést, ezt a numerikus karaktert helyeztük el & # XF011; a horgonycímkén belül, de mivel nem definiáltuk a szokást betűtípus család a gomb stílusában az ikon még helytelenül jelenik meg.
További irodalom: Unicode és HTML: Dokumentum karakterek
A gomb stílusa
Először is meg kell határoznunk a szokást betűtípus család a gombhoz.
A gomb egy kör lesz, a körhatást a border-radius tulajdonságot, és állítsa be az értéket a gombok legalább felében szélesség.
Mivel egy betűtípust használunk az ikonra, könnyen beállíthatjuk szín és adjunk hozzá text-shadow a stíluslapon található ikonra is.
Ezután létrehozunk egy ferde hatást is a gombhoz. Ez a hatás elég bonyolult. Először is alkalmazni kell háttérszín: rgb (83,87,93); a gomb színalapjára, majd legfeljebb négy réteget adunk hozzá box-árnyék.
font-family: "FontAwesome"; szín: rgb (37,37,37); szöveg-árnyék: 0px 1px 1px rgba (250,250,250,0,1); betűméret: 32pt; kijelző: blokk; pozíció: relatív; szöveg-dekoráció: nincs; háttérszín: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1. árnyék * / 0px 7px 10px 0px rgb (17,17,17), / * 1. árnyék * / betét 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3. árnyék * / betét 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. árnyék * / szélesség: 70px; magasság: 70px; határ: 0; határ-sugár: 35px; szöveg-igazítás: központ; vonalmagasság: 79px;
Van egy nagyobb kör is a gomb külső részén, és használjuk a :előtt pszeudoelem ahelyett, hogy extra jelölést adna hozzá.
a: tartalom: "" előtt; szélesség: 80px; magasság: 80px; kijelző: blokk; z-index: -2; pozíció: abszolút; háttérszín: rgb (26,27,29); balra: -5px; top: -2px; határ-sugár: 40px; doboz-árnyék: 0px 1px 0px 0px rgba (250,250,250,0.1), 0px 1px 2px rgba (0, 0, 0, 0,5);
További irodalom: CSS: előtt és után pszeudo-elemek (Hongkiat.com)
Jelzőfény
A gomb alatt van egy kis fény, amely jelzi a bekapcsolási és kikapcsolási állapotot. Az alábbiakban piros színt alkalmazunk a fény színére, mert az áramellátás kezdetben KI van, hozzáadunk box-shadow utánozza a fény fényhatását.
a + span kijelző: blokk; szélesség: 8px; magasság: 8px; háttérszín: rgb (226,0,0); árnyék: 0px 1px 0px 0px rgba (250.250.250,0.5), 0px 0px 3px 2px rgba (226,0,0,0,5); határ-sugár: 4px; világos: mindkettő; pozíció: abszolút; alsó: 0; balra: 42%;
A hatás
Ezen a ponton a gombunk jól néz ki, és csak néhány effektust kell hozzáadnunk, például ha a gombra kattint, akkor azt szeretnénk, hogy a gomb lenyomva legyenek.
A hatás eléréséhez az első box-shadow a gomb nulla lesz, és a pozíció egy kicsit csökken. A másik három árnyék intenzitását egy kicsit módosítanunk kell, hogy megfeleljen a gomb pozíciójának.
a: aktív box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1. árnyék * / 0px 3px 7px 0px rgb (17,17,17), / * 2. árnyék * / betét 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. árnyék * / betét 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. árnyék * / háttérszín: rgb (83,87,93); top: 3px;
Továbbá, miután a gombot megnyomta, az lenyomva kell maradnia, és az ikonnak „meg kell ragyognia”, hogy jelezze, hogy a készülék be van kapcsolva.
Egy ilyen hatás eléréséhez a gombot a :cél pseudo-class, majd módosítsa az ikon színét fehérre, és adjon hozzá egy text-shadow fehér színű is.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), betét 0px 1px 1px 0px rgba (250, 250, 250, .2) , 0px -10px 35px 5px rgba (0, 0, 0, .5); háttérszín: rgb (83,87,93); top: 3px; szín: #fff; szöveg-árnyék: 0px 0px 3px rgb (250,250,250);
További irodalom: A cél használata pseudo-class
Be kell állítanunk a box-shadow a gombon kívüli körben, az alábbiak szerint.
a: aktív: korábban, a: cél: előtte top: -5px; háttérszín: rgb (26,27,29); doboz-árnyék: 0px 1px 0px 0px rgba (250,250,250,0.1), 0px 1px 2px rgba (0, 0, 0, 0,5);
A fényjelző az alapértelmezett vöröstől a zöld színűre vált, hogy hangsúlyozza, hogy a tápfeszültség már be van kapcsolva.
a: cél + span box-shadow: betét 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); háttérszín: rgb (135,187,83);
Átmenet hatása
Végül, a gomb hatásának zökkenőmentes működéséhez a következő átmeneti effektust is alkalmazzuk.
Az alábbi részletrész kifejezetten hozzáadja az átmenetet a szín ingatlan és a text-shadow mert 350ms a horgonyelemben.
a átmenet: színes 350ms, szöveg-árnyék 350ms; -o-átmenet: színes 350ms, szöveg-árnyék 350ms; -moz-átmenet: szín 350ms, szöveg-árnyék 350ms; -webkit-átmenet: színes 350ms, szöveg-árnyék 350ms;
Az alábbi második részlet az átmenetet hozzáadja a háttérszín és box-shadow tulajdonság a fényjelzőben.
a: cél + span átmenet: háttérszín 350ms, doboz-árnyék 700ms; -o-átmenet: háttérszín 350mm, doboz árnyék 700ms; -moz-átmenet: háttérszín 350mm, doboz árnyék 700ms; -webkit-átmenet: háttérszín 350ms, doboz-árnyék 700ms;
Végeredmény
Az összes szükséges stílust végeztük el, most láthatjuk a végeredményt, és letölthetjük a forrásfájlt az alábbi linkekről.
- Demó
- Letöltés forrása
Bónusz: Hogyan lehet kikapcsolni
Itt jön a bónusz. Ha megpróbálta a fenti demóból a gombot, észrevette, hogy a gombot csak egyszer lehet kattintani, hogy bekapcsolja, így hogyan kapcsoljuk ki?.
Sajnos, ezt meg kell tennünk a jQuery-vel, de nagyon egyszerű. Az alábbiakban az összes szükséges jQuery kód.
$ (dokumentum). már (függvény () $ ('# gomb'). Kattintson a (funkció () $ (ez) .toggleClass ('on'););); A fenti töredék hozzáadja az ON osztályt a horgonyhoz, és ezt használtuk toggleClass funkció a jQuery-ből hozzáadni. Tehát, amikor a #gomb rákattint, a jQuery ellenőrzi, hogy az ON-t hozzáadták-e vagy sem: ha nem, akkor a jQuery hozzáadja az osztályt, és ha hozzá lett adva, a jQuery eltávolítja az osztályt.
Jegyzet: Ne felejtsd el a jQuery könyvtárat is.
Most már kicsit meg kell változtatnunk a Stílust. Egyszerűen cserélje ki az összes :cél pszeudoelem a ... val .tovább osztályválasztó, az alábbiak szerint:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), beillesztés 0px 1px 1px 0px rgba (250, 250, 250, .2) , 0px -10px 35px 5px rgba (0, 0, 0, .5); háttérszín: rgb (83,87,93); top: 3px; szín: #fff; szöveg-árnyék: 0px 0px 3px rgb (250,250,250); a: aktív: korábban, a.on: előtt top: -5px; háttérszín: rgb (26,27,29); doboz-árnyék: 0px 1px 0px 0px rgba (250,250,250,0.1), 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: betét 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); háttérszín: rgb (135,187,83);
Végül próbáljuk meg a böngészőben.
- Demó
- Letöltés forrása
