Oprettelse af almindelige webdesignikoner med CSS: NavIcon

Måske har du set en variant af navigationsikonet (NavIcon) i din mobilbrowser, når du ser websteder, der er bygget på responsivt eller adaptivt design. Det indikerer normalt, at der er en menu, der kan udvides eller åbnes.

Du er måske nysgerrig efter, hvordan NavIcon fandt vej til populær webudvikling, så jeg vil forklare lidt om dens oprindelse, røre ved standarderne lidt eller manglen derpå og derefter vise dig et eksempelkodestykker, der opretter et "trigram "ikon ved hjælp af ren CSS. Jeg lukker med en anden ressource flere CSS-genererede ikoner.

Beginnings

Brug af enkle billeder til at kommunikere vigtig information har været med os i århundreder, fra hieroglyfier til tegninger på hulemure til gateskilt. Ikoner i dag antager mange former, og vi ser flere anvendelser til dem i applikationer og dokumenter, der er aktiveret på nettet. Fødselen af ​​NavIcon er et direkte resultat af den stadigt skiftende onlineoplevelse, der flytter vores websteder til mindre skærme, der reagerer og tilpasser sig de stadigt skiftende browservinduet.

NavIcon-standarder

Er der en standard til NavIcon? Ingen, som jeg har set, men de fleste af dem, der bruger de vandrette bjælker, vil have tre på tværs, så jeg antager, at mit eksempel ovenfor med fire søjler fører det til et andet niveau. NavIcon er ikke det eneste ikon, der ofte findes, som du kan se på mange websteder og menulinjer. Symbolerne plus (+) og minus (-) angiver menuer, der kan åbnes eller lukkes, udvides eller kollapses. Andre velkendte ikoner, der betyder nogenlunde samme ting, er gitteret, der ligner siden af ​​en lille Rubiks terning, og ikonet med uordnet liste, der ligner søjlerne, men med kugler til venstre, vist i figur B. Hvad skal en webudvikler gøre?

Alle NavIcon-eksemplerne har deres plads, afhængigt af applikationen og webstedets indhold; Det kan dog være forvirrende for nogle brugere, hvis du ikke er forsigtig. Hvis du f.eks. Har plus-ikonet på en kalenderside eller onlineformular, kan det muligvis få besøgende til at tro, at de kan tilføje eller oprette en begivenhed eller indtaste noget indhold i en form, når plusikonet er klikket.

Oprettelse af en NavIcon med ren CSS

Da nogle mobile enheder vides at have problemer med gengivelse af små ikoner, er det fornuftigt at oprette en løsning, der kun giver den samme effekt med CSS. Nedenfor er et uddrag af CSS-kode for at oprette det, der kaldes "trigramikonet" fra Tim Kadlecs løsning. Han har også koden på GitHub, som hjælper med at besvare det mobile billed gengivelsesdilemma.

 li { 
 liste-stil-type: ingen; 
 } 
 #menu { 
 position: relativ; 
 } 
 #menu a { 
 polstring til venstre: 1, 25 em; / * 20 px / 16 px * / 
 } 
 #menu a: før { 
 indhold: ""; 
 position: absolut; 
 top: 30%; 
 venstre: 0px; 
 bredde: .75em; / * 12px / 16px * / 
 højde: .125em; / * 2px / 16px * / 
 border-top: .375em dobbelt # 000; / * 6 px / 16 px * / 
 grænse-bund: .125em solid # 000; / * 2px / 16px * / 
 } 
Eksempel på "trigramikon" vises zoomet ind ved 400% og i normal visning i figur C nedenfor.

Hvis du er interesseret i at udforske flere CSS-ikoner, kan du besøge Nicholas Gallagher's side med titlen Pure CSS GUI-ikoner (eksperimentel) og hans demoside, hvor du vil finde 84 GUI-ikoner, der spænder fra generelle kategorier, herunder brugerinteraktion, mediekontrol og diverse. Alle disse ikoner er oprettet fra semantisk HTML og er testet til at fungere i Firefox 3.5+, Chrome 5 og Opera 10.6.

© Copyright 2021 | mobilegn.com