Jag har nyligen kommit överens om en snyggt handledning på Woorkup som pekar på en MooTools-funktion som låter dig vända något objekt på en webbsida till ett ställbart element.
Idag ska vi använda den här tekniken för att skapa en enkel och rolig anteckningsbok som en användare kan spela med och flytta var som helst på sidan. Längs vägen kommer att använda massor av CSS3 så se till att du har en bra webbläsare!
Sneak Peek
För att kolla vad vi ska bygga, klicka på bilden nedan och visa live demo.
Steg 1: HTML
Vi börjar med att bygga vår klistermärke precis som vi skulle på någon webbplats och avsluta genom att göra den rörlig. HTML för denna handledning är super enkel och innehåller bara ett par divs och element.
Jag behöll platshållarteksten enkelt här så att du enkelt kan se hur enkelt koden är, men du kan skriva in allt du vill!
Steg 2: Skapa bakgrunden
För att skapa bakgrunden, vill du ha en fin kork anslagstavla konsistens. Jag sprang en snabb Google-sökning och kom upp med den här.
Du måste skära ut en liten sektion och konvertera den till en sömlös bakgrund. Detta kan enkelt uppnås på mindre än två minuter genom att följa min handledning om att skapa sömlösa bakgrunder.
Steg 3: Bakgrunds CSS
När du har skapat din sömlösa korkbakgrundsbild, starta din CSS med en grundläggande återställning och släpp i JPG.
Jag har också stylat behållaren här bara lite genom att ställa in en bredd på 960 pixlar och en toppmarginal på 100 pixlar. Autoutdraget centrerar automatiskt div.
Steg 4: Grundläggande klibbiga stilar
Nästa kommer vi att ge vår klibbiga några riktigt grundläggande styling.
Här har vi i princip bara en gul bakgrund och en bredd. Den här bakgrunden kommer att fungera som standard för webbläsare som inte tolkar CSS3, vi lägger till nästa.
Vid denna tidpunkt bör din klibbiga bara börja ta form och se något som bilden nedan.
Steg 5: Avancerade klibbiga stilar
För att göra vår klibbiga sedel ser mycket bättre lägger vi till i en lutning, boxskugga och lite vaddering.
Observera att vi har tillämpat gradienterna och skuggorna med både webbkit och Mozilla-syntaxen så att det fungerar över så många webbläsare som möjligt. För gradienterna har vi angett två färger och berättade i grunden gradienten att sprida sig vertikalt över hela elementet. Observera att ordningen för färgvärdena måste vändas om i Mozilla-versionen för att producera samma gradient.
För skuggan har vi applicerat den efter vadderingen med följande värden: 0px horisontell offset, 10px vertikal offset, 30px oskärpa och svart för färgen.
Du borde nu ha en anständigt snyggt sedel med en skugga och en gradient!
Steg 6: Använda @ Font-Face för en handskriven typsnitt
Jag vill ha? H1? text för att se lite mer handskriven men jag vill inte använda en bild så jag kryssar över till FontSquirrel och laddar ner ett av deras utmärkta @ font-face-kit. Med dessa kit är allt arbete gjort för dig. Allt du behöver göra är att ladda ner skrifterna, kopiera dem till din rotkatalog och ta tag i det medföljande CSS-snippet.
Jag valde GoodDog kit. GoodDog är ett fint tjockt handskriven teckensnitt.
Som jag nämnde ovan, kopiera över typsnittsfilerna tillsammans med följande CSS som FontSquirrel ger med din nedladdning:
För att lära dig mer om syntaxen här, kolla in Paul Irlands bulletproof @ font-face syntax. Allt vi behöver veta för tillfället är att den första raden berättar hur man hänvisar till teckensnittet någon annanstans i vår CSS. Så vart som helst vi vill använda denna typsnitt skriver vi in "GoodDogRegular".
Steg 7: Header & Paragraph Styles
För att avsluta vår klistermärke, lägg till följande CSS:
Som du kan se har vi använt GoodDog-teckensnittet till h1 och p-taggarna och slutfördes med några grundläggande positioneringsstilar. Nu efter att ha uppdaterat platshållaren kopia till något mer användbart, här är den färdiga noteringen:
Steg 8: Gör det? Moove?
Nu är vårt enda steg att lägga till JavaScript som gör objektet rörligt. Först importera en kopia av MooTools 1.11 till rubrikrubriken i din HTML. Anledningen till att vi använder 1.11 är att den sektion vi använder inte har gjort det till MooTools 2.
När du har importerat lägger du till följande JavaScript i HTML: n för att göra vår klibbig flyttbar:
Den andra raden här är den viktiga.Det berättar för MooTools att göra någon div inne i behållaren rörlig. Du kan anpassa den här sektionen för att göra allt du vill ha. Till exempel, om du ville ha någon? P? tagga inuti en div med ett id av greatBigBox? att vara rörlig, ändra bara koden till:
Där har du det! Det är bokstavligen allt du behöver veta för att börja göra element på din webbplats rörlig.
Slutsats
Som du kan se var det verkligen den svåraste delen av processen att skapa noten. MooTools tog hand om den tunga lyftningen för att göra elementet rörligt och reducerat vårt JavaScript-arbete till bara några rader!