CSS3 zelfstudie Maak een gestroomlijnde aan / uitknop
Het gebruik van een knop is tot nu toe de geprefereerde manier om met elektronische dingen om te gaan; zoals de radio, tv, muziekspeler en zelfs een smartphone met een functie voor spraakopdrachten heeft nog steeds minimaal één of twee fysieke knoppen nodig.
Verder, in dit digitale tijdperk, de knop is ook geëvolueerd in zijn digitale vorm, waardoor het meer interactief, dynamisch en echt gemakkelijk te maken is, vergeleken met de fysieke knop.
Dus deze keer gaan we een gelikte en interactieve knop maken die gebaseerd is op dit uitstekende ontwerp op Dribbble met alleen CSS.
Nou, laten we gewoon beginnen.
HTML
We beginnen de knop door de volgende markup in ons HTML-document te plaatsen. Het is heel eenvoudig, de knop is gebaseerd op een ankertag, we hebben ook een span ernaast om het indicatielampje te maken, en dan worden ze samen verpakt in een HTML5 sectie label.
& # XF011;
Hier ziet u hoe onze knop er in eerste instantie uitziet.
Basic Styling
In dit gedeelte gaan we aan de slag stijlen.
We passen deze donkere achtergrond uit Subtle Pattern eerst toe op het bodydocument en centreren de sectie. Dan zullen we ook de gestippelde punten verwijderen schets op de :focus en :actief link.
body background: url ('images / micro_carbon.png'); sectie margin: 150px auto 0; breedte: 75 px; hoogte: 95 px; positie: relatief; text-align: center; : actief,: focus overzicht: 0; Aangepast lettertype gebruiken
Voor het pictogram van de knop gebruiken we een aangepast lettertype van Font Awesome in plaats van een afbeelding. Op die manier is het pictogram eenvoudig stijlbaar en schaalbaar via het stylesheet.
Download het lettertype, bewaar de lettertypebestanden (eot, woff, ttf en svg) in de fonts map en plaats de volgende code op uw stylesheet om een nieuwe lettertypefamilie te definiëren.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") formaat ('eot'), url ("fonts / fontawesome-webfont.woff") formaat ('woff'), url ("fonts / fontawesome- webfont.ttf ") formaat ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") formaat ('svg'); font-gewicht: normaal; lettertype: normaal; 
De machtspictogram die we nodig hebben voor deze knop wordt weergegeven in Unicode-nummer F011; als u de HTML-markup hierboven goed bekijkt, hebben we dit numerieke teken geplaatst & # XF011; binnen de ankertag, maar omdat we de gewoonte niet hebben gedefinieerd font-family in de knopstijl moet het pictogram nog steeds correct worden weergegeven.
Verder lezen: Unicode en HTML: documentkarakters
De knop stylen
Allereerst moeten we de gewoonte definiëren font-family voor de knop.
Onze knop zal een cirkel zijn, we kunnen het cirkeleffect bereiken met behulp van de border-radius eigenschap en stel de waarde in op ten minste de helft van de knoppen breedte.
Omdat we een lettertype voor het pictogram gebruiken, kunnen we eenvoudig het kleur en voeg toe schaduw tekst voor het pictogram in het stylesheet ook.
Vervolgens maken we ook een afgeschuind effect voor de knop. Dit effect is best lastig. Eerst moeten we solliciteren achtergrondkleur: rgb (83,87,93); voor de kleurbasis van de knop, voegen we maximaal vier lagen toe box-schaduwen.
een font-family: "FontAwesome"; kleur: rgb (37,37,37); tekstschaduw: 0px 1px 1px rgba (250.250.250,0.1); lettergrootte: 32pt; weergave: blok; positie: relatief; tekstdecoratie: geen; achtergrondkleur: rgb (83,87,93); vakschaduw: 0px 3px 0px 0px rgb (34,34,34), / * 1e schaduw * / 0px 7px 10px 0px rgb (17,17,17), / * 1ste schaduw * / inzet 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3e Schaduw * / inzet 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4th Shadow * / width: 70px; hoogte: 70 px; rand: 0; grensradius: 35 px; text-align: center; regelhoogte: 79 px;
Er is ook een grotere cirkel aan de buitenkant van de knop en we zullen de :voor pseudo-element ervoor in plaats van extra opmaak toe te voegen.
a: before content: ""; breedte: 80px; hoogte: 80 px; weergave: blok; z-index: -2; positie: absoluut; achtergrondkleur: rgb (26,27,29); links: -5px; top: -2px; grensradius: 40px; vakschaduw: 0px 1px 0px 0px rgba (250,250,250,0,1), inzet 0px 1px 2px rgba (0, 0, 0, 0,5);
Verder lezen: CSS: voor en: na pseudo-elementen (Hongkiat.com)
Indicatielampje
Onder de knop is er een klein lampje om de status Aan en Uit aan te duiden. Hieronder passen we rood toe voor de kleur van het licht omdat de stroom aanvankelijk UIT is, voegen we ook toe box-shadow om het glanseffect van het licht te imiteren.
a + span display: block; breedte: 8px; hoogte: 8 px; achtergrondkleur: rgb (226,0,0); box-shadow: inzet 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); grensradius: 4px; beiden opschonen; positie: absoluut; onderkant: 0; links: 42%;
Het effect
Op dit punt ziet onze knop er goed uit en hoeven we er slechts enkele effecten aan toe te voegen, bijvoorbeeld wanneer er op de knop wordt 'geklikt', we willen dat de knop eruitziet alsof deze wordt ingedrukt.
Om het effect te bereiken, de eerste box-shadow in de knop wordt op nul gezet en de positie wordt een beetje verlaagd. We moeten ook de intensiteiten van de andere drie schaduwen een beetje aanpassen aan de knoppositie.
a: actief box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1e schaduw * / 0px 3px 7px 0px rgb (17,17,17), / * 2e schaduw * / inzet 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3e Schaduw * / inzet 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4th Shadow * / background-colour: rgb (83,87,93); top: 3px;
Nadat de knop is aangeklikt, moet deze verder worden ingedrukt en moet het pictogram 'schijnen' om aan te geven dat de stroom is ingeschakeld.
Om een dergelijk effect te bereiken, zullen we de knop richten met behulp van de :doelwit pseudo-class, verander dan de kleur van het pictogram in wit en voeg een toe schaduw tekst ook met witte kleur.
a: doel box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inzet 0px 1px 1px 0px rgba (250, 250, 250, .2) , inzet 0px -10px 35px 5px rgba (0, 0, 0, .5); achtergrondkleur: rgb (83,87,93); top: 3px; kleur: #fff; tekstschaduw: 0px 0px 3px rgb (250.250.250);
Verder lezen: Gebruiken: doel pseudo-class
We moeten ook de box-shadow in de cirkel buiten de knop, als volgt.
a: active: before, a: target: before top: -5px; achtergrondkleur: rgb (26,27,29); vakschaduw: 0px 1px 0px 0px rgba (250,250,250,0,1), inzet 0px 1px 2px rgba (0, 0, 0, 0,5);
De lichtindicator verandert van de standaard rode naar groene kleur om te benadrukken dat de stroom al is ingeschakeld.
a: target + span box-shadow: inzet 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); achtergrondkleur: rgb (135,187,83);
Overgangseffect
Als laatste, om het effect van de knop soepel te laten verlopen, passen we ook het volgende overgangseffect toe.
Dit onderstaande fragment voegt specifiek de overgang naar de kleur eigendom en de schaduw tekst voor 350ms in het ankerelement.
een overgang: kleur 350ms, tekst-schaduw 350ms; -o-overgang: kleur 350ms, tekst-schaduw 350ms; -moz-overgang: kleur 350ms, tekst-schaduw 350ms; -webkit-overgang: kleur 350ms, tekst-schaduw 350ms;
Dit tweede fragment hieronder voegt de overgang toe voor de Achtergrond kleur en box-shadow eigenschap in de lichtindicator.
a: target + span transition: background-color 350ms, box-shadow 700ms; -o-overgang: achtergrondkleur 350ms, vakschaduw 700ms; -moz-overgang: achtergrondkleur 350ms, doosschaduw 700ms; -webkit-overgang: achtergrondkleur 350ms, vakschaduw 700ms;
Eindresultaat
We hebben alle stijlen doorlopen die we nodig hebben, nu kun je het eindresultaat live bekijken en het bronbestand downloaden via de onderstaande links.
- demonstratie
- Download de bron
Bonus: hoe schakel je het uit
Hier komt de bonus. Als je de knop van de bovenstaande demo hebt geprobeerd, heb je gemerkt dat er maar één keer op de knop kan worden geklikt, en dat is om hem aan te zetten, dus hoe schakel je deze uit?.
Helaas moeten we het doen met jQuery, maar het is ook heel eenvoudig. Hieronder staat de jQuery-code die we nodig hebben.
$ (document) .ready (function () $ ('# button'). klik (function () $ (this) .toggleClass ('on'););); Het bovenstaande fragment voegt de klasse toe aan het anker en we gebruikten het toggleClass functie van jQuery om het toe te voegen. Dus, wanneer de #knop wordt geklikt, de jQuery zal controleren of de klasse AAN is toegevoegd of niet: als dat niet het geval is, zal de jQuery de klasse toevoegen en als deze is toegevoegd, zal de jQuery de klasse verwijderen.
Notitie: Vergeet niet om de jQuery-bibliotheek op te nemen.
Nu moeten we de stijl een beetje veranderen. Vervang gewoon alle :doelwit pseudo-element met de .op klasse selector, als volgt:
a.op box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inzet 0px 1px 1px 0px rgba (250, 250, 250, .2) , inzet 0px -10px 35px 5px rgba (0, 0, 0, .5); achtergrondkleur: rgb (83,87,93); top: 3px; kleur: #fff; tekstschaduw: 0px 0px 3px rgb (250.250.250); a: active: before, a.on: before top: -5px; achtergrondkleur: rgb (26,27,29); vakschaduw: 0px 1px 0px 0px rgba (250,250,250,0,1), inzet 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: inzet 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); achtergrondkleur: rgb (135,187,83);
Laten we het tenslotte in de browser proberen.
- demonstratie
- Download de bron
