Den här är för mina Mac-nördar. Apples senaste skrivbordssystem, OS X Mountain Lion, har ett inbyggt anmälningssystem som liknar vad vi har haft på iOS i flera år. Idag ska vi bygga ett av anmälningsfönstren med hjälp av CSS.
För att dra av det, använder vi lite HTML och lite snygg CSS3. För att avsluta det lägger vi till en touch av jQuery magic så att användaren kan dra runt fönstret. Det blir massor av kul, så starta upp din favorit kodande app och följ med!
Vad vi bygger
För att se till att vi får informationen rätt skrev jag en testmeddelande och tog ett skärmdump på min Mac. Så här ser fönstret ut:
Som vi kan se har vi en grundläggande rundad rektangel med en gradientbakgrund och en liten genomskinlighet. Det börjar med en ikon till vänster, följt av en rubrik som anger varningstexten och ett tidsstämpel under det. Slutligen har vi på höger sida två knappar: Snooze och stäng.
Jag älskar att titta på saker som detta och tänka på hur man bygger dem med CSS. Det kan tyckas som en meningslös övning, men det är ett bra sätt att finpeka dina kodningskurvor. Sluta aldrig öva! Låt oss börja.
Steg 1. HTML
För att starta projektet, låt oss hoppa in i markeringen. Vårt mål här är att titta på exemplet ovan och se om vi kan bryta ner det i olika delar. Jag gillar att börja med mina grundläggande behållare och tänka på hur objekten är grupperade. Självfallet behöver själva fönstret en div, och vi kan släppa ikonen direkt inuti den.
Härifrån finns det två textobjekt som måste grupperas och två knappar som måste grupperas. Vi använder ett? Meddelande? div och? knappar? div för dessa.
Steg 5. Skriv CSS
Låt oss nu få vår text under kontroll. Vi har två stil krokar som vi behöver rikta oss på: en för h2 och en för stycket. Den knepiga delen här är att du vill tillämpa en vit textskugga. Detta verkar vara lite udda men det kommer att ge det ett litet skarpt utseende som gör att texten ser ut som insats.
Avstämning
Med de snabba förändringarna ser vårt meddelandefönster mycket bättre ut! Vi är faktiskt nästan färdiga. Vi behöver bara koda upp knapparna och göra det hela slingbart.
Steg 6. Knapp CSS
För att få knapparna att se hur vi vill, behöver vi en hel del styling. Låt oss bryta upp det i några hanterbara bitar så det är inte överväldigande.
Grundläggande knapp stilar
Det första vi behöver göra är att definiera knapparnas form och utseende. Vi delar upp den här koden precis som vi gjorde med fönstret ovan, med början på grundstorleken och formen, sedan flyttar vi till texten och slutar med CSS3-grejerna.
Som du kan se här liknar det mycket hur vi stylade fönstret. En anmärkningsvärd skillnad är att vi ställer knapparnas position helt och hållet så att vi kan scoot dem exakt var vi vill ha dem inom ramen för den relativt positionerade föräldern, vilka är? Anmälningarna? div.
Text styling är lite mer robust denna gång eftersom länkar kräver lite extra standard stil clearing att se anständigt.
Knapphäftning
För att hjälpa knapparna sticka ut på svävaren, anpassar vi lutningen genom att eliminera insynen. Lätt och subtilt!
Placering av knapparna
Nu när våra knappar ser snygga ut, är det dags att skjuta dem på plats. Eftersom vi använder absolut positionering är det faktiskt väldigt enkelt. Mer intressant är hur vi riktar in varje knapp: CSS3-väljaren nth-barn. Detta gör att vi kan ta tag i specifika knappar utan att lägga till några extra klasser i vår HTML.
Dessa väljare bör fungera bra över hela linjen, även på IE9. För IE8 och tidigare, slå upp Selectivizr.
Avstämning
Vårt anmälningsfönster är klart! Det ser ganska bra ut om jag säger det själv. För att göra det ännu kallare, gå till nästa steg.
Steg 7. Gör det Draggable
Bara för skojs skull vill jag göra det så att en användare kan klicka och dra det här fönstret runt skärmen precis som med Windows i operativsystemet. Låter komplicerat rätt? Egentligen, med lite jQuery magi, tar det bara en liten bit av JavaScript för att dra av.
Det är allt! Vi riktar oss helt enkelt till vår? Anmälan? div och ring den dragbara funktionen. Det kunde inte bli enklare.
Kolla in demoen
Vi slutade alla med vårt Mountain Lion anmälningsfönster.Kolla in live demo, inbäddad nedan via CodePen.
Intressant nog, fungerar funktionen klicka och dra bara på CodePen-webbplatsen, så gå här för att se demo-sidan och se till att dra i fönstret.
Uppdatering
Doh! Jag märkte bara att jag bytte runt? och? snooze? knappar från hur de visas i Mountain Lion. Jag fixade koden så det borde vara rätt nu.
Slutsats
Så där har du det, ett Mountain Lion-stil meddelandefönster kodat rent med bra gamla HTML & CSS (och en liten bit av tillval jQuery). Vilka andra populära gränssnittsobjekt vill du se omvandlas till handledning? Lämna en kommentar nedan och låt oss veta!