Opprette Modal Window enkelt med HTML5 Dialog

Hei Verden! 
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Earum, inventore!
Exit 
 Vis dialog 

Men vær oppmerksom på at når du ser det i Chrome (som er den eneste nettleseren som støtter denne taggen for øyeblikket), er dialogvinduet gjemt. Og gitt HTML-strukturen ovenfor, ser vi bare Vis dialogboksen. For å vise dialogvinduet kan vi bruke JavaScript API .show(), og bruk .close() å skjule det.

 (funksjon () {var dialog = document.getElementById ('window'); document.getElementById ('show'). onclick = funksjon () {dialog.show ();}; document.getElementById ('exit'). = funksjon () {dialog.close ();};}) (); 

Klikk på "Show Dialog" -knappen, og dialogvinduet vises i midten av nettleservinduet.

Vi kan tilpasse dialogvinduet gjennom CSS. Som standard dekker dialogvinduet hele horisontal plass i nettleseren. Så, la oss spesifisere bredden, slik som det.

 dialog {bredde: 500px; } 

Dessuten,

elementet kommer med et nytt pseudo-element som kalles ::backdrop . Det er vant til å stile den typiske svake bakgrunnen som vi vanligvis finner bak et dialogvindu. Det lar besøkende fokusere mer på dialogboksen og gjemmer alt annet bak det. Det ser ikke ut til å fungere i øyeblikket, men vil bli støttet i fremtiden.

Konklusjon

HTML har utviklet seg så mye de siste par årene. Det er ikke bare bare å bygge webside, vi kan til og med nå bygge interaktive brukergrensesnitt med nye HTML-elementer som

sammen med JavaScript API. Vær oppmerksom på at dette elementet er eksperimentelt, det er ikke klar for produksjon ennå, og det fungerer bare i Chrome med eksperimentelle funksjoner aktivert fra chrome://flags .

• Se demo
• Last ned kilde

Test Web Typografi I En Nettleser Med Type Nugget

Design av type for nettet er lettere nå enn noensinne. Egendefinerte webfonter og CSS3-egenskaper gjør prosessen nesten helt problemfri.Men testing er fortsatt en mektig oppgave som ofte krever mange revisjoner. Og med et verktøy som Type Nugget kan du teste dine skrifttyper i nettleseren og til og med generere LESS / SASS eller CSS-koden - uten å skrive en enkelt linje selv! SA

(Tekniske og design tips)

5 verktøy for å administrere arbeidsflyten og nettverkssamarbeidet

Vellykkede designteam krever mange ting: Enkeltpersoner med lignende ferdigheter og mangfoldige ferdigheter, prosjektleder eller teamleder som kan trekke alt sammen, og et miljø som oppmuntrer til aktivt samarbeid .I mangel av sterkt lederskap, eller manglende evne til å samarbeide åpent eller fritt, kan et lags sjanse for suksess bli undergravd - uansett hvilke ferdigheter som blir bragt til bordet.Et

(Tekniske og design tips)