Designers kan ha märkt en ständigt ökande användning av CSS3 övergångsegenskaper. Webbplatsgränssnitt har förbättrats dramatiskt med anpassade animationsstilar, alla utan att behöva JavaScript (när det används förnuftigt, förstås!)
I denna handledning vill jag visa hur vi kan bygga animationseffekter i HTML5-inmatningsfält. Jag ska utforma en enkel kontaktform med ett par fält och en textarea. Använda CSS3 :giltig pseudoklass är det enklare än någonsin att anpassa textinmatningar. Kolla in mitt live demo exempel för att få en uppfattning om vad slutprodukten ser ut.
Live Demo - Hämta källkod
Starta dokumentet
Vi måste börja med en tom index.html-fil med standard HTML5-doktyp. Jag kommer att inkludera några alternativa webbfonter för att spruce upp designen. Men det är inget som dramatiskt påverkar kvaliteten på handledningen.
Den mer intressanta delen av sidan gäller att skapa en generell HTML5-form. Skicka-knappen gör ingenting, men laddar om sidan. Men det föreslår inte att du inte kunde länka till ett backend PHP eller Ruby-skript för databehandling, eller ens ansluta via Ajax. CSS3-övergångarna ska endast påverka frontendstilarna och ingenting mer.
Varje ingång finns inne i en div med klassen .rad för att hålla elementen separerade. På så sätt är det mycket lättare att få etiketten att visas bredvid ingångsfältet. Och på liknande sätt inkluderar andra meddelanden eller varningar över till höger om fälten. Varje ingång ges klassen .Text medan textarea-elementet är stylat med .txtarea.
CSS Layout Structure
Jag vill hoppa in i vår CSS-kod och börja med att förklara CSS-återställningarna. Jag använder en liknande blockmall för att återställa webbläsare till liknande standardvärden av teckensnittstorlekar, linjens höjd och även boxstorlek. Dessutom ställer jag in de olika webbfonterna och strukturerar grundläggande element med rätt avstånd. Gärna spara den här mallen för användning i andra webbprojekt.
Att flytta in i kärnkroppsdelen vi har en wrapper div med ID #W. Detta är centrerat på sidan med en begränsad bredd på 660px. De inre radelementen är utformade som blockbehållare, med interna etiketter och formningsfält.
Den lilla klassen .req är för erforderliga asterisk tecken som används i hela etiketterna. Men ännu mer intressant är det sista avsnittet av kod för att överstyra den interna platshållarteksten. Inte alla CSS3-webbläsare stöder dessa egenskaper helt, men de arbetar i uppdaterade Webkit- och Mozilla-motorer.
Du kommer att märka att den inre formulärtexten platshållare nu är kursiv och tar en textfärgskugga av mörkgrå / blå. Jag tycker att den här extra CSS hjälper till att skilja från de faktiska användarskrivna bokstäverna jämfört med platsinnehållet.
Styling med övergångar
Jag vill hoppa in i det sista avsnittet som diskuterar hur vi kan använda pseudoklasser för att utföra animeringar. De viktigaste stilar börjar med .Text och .txtarea klasser som används på varje formelement.
Jag har gjort mycket anpassning med nyare CSS3 egenskaper. Men notera också hur jag har delat upp de individuella bakgrundsinställningarna med sina unika egenskaper - som bakgrundsfärg och bakgrundsbild. Detta är nödvändigt när vi behöver animera avmarkeringen i ingången utan att glida helt från vänster. I stället håller vi den till tucked precis till höger där den är gömd från sikten, och sedan animerar in från höger sida.
Du kommer också märka att koderna för :fokus och :giltig är väldigt olika. Detta är en annan anledning till att splittring av egenskaperna är en så bra idé, för vi kan animera något i en pseudoklass, men inte den andra. Varje övergångsegenskap riktar sig mot alla ändringar, så det betyder att du måste vara försiktig med vilka egenskaper som uppdateras.
Tänk på att användaren bara kan ange ett giltigt namn för att radera det några sekunder senare. Vår giltiga väljare måste återanpassa tillbaka till de grundläggande egenskaperna - men håller fortfarande :fokus Egenskaper som visas också. Segmenterad animering är nyckeln till att få dessa stilar att fungera. Det kommer att kräva lite försök och fel men dessa effekter kan också dupliceras på alla äldre webbläsare med ytterligare JavaScript.
En annan aspekt av den animerade formen är Submit-knappen. Självklart är de ytterligare effekterna försumma jämfört med inmatningsfälten. Men jag tror att alla fastigheter är värda att granska eftersom de relaterar till varandra.
I stället för att skapa olika bakgrundsegenskaper har jag just använt CSS3-gradienter och deras leverantörsspecifika prefix. Detta håller bakgrunden stabil medan du ändå förbättrar boxskuggorna via svävar och aktiva tillstånd.
Live Demo - Hämta källkod
Slutgiltiga tankar
Processen med att bygga formella CSS3-animationer tar arbete. Det finns externa bibliotek som Animate.css som kan hjälpa, men ger fortfarande inte så mycket stöd som JavaScript. Tack och lov är CSS3-standarderna tillräckligt avancerade för att ge grundläggande animeringar - svängning, fokus och liknande pseudoklasser.
Jag hoppas att denna handledning kan erbjuda ett exempelkod för webbutvecklare. Du kan lära dig mycket genom att bara träna tekniker för ett par timmar. Du kan ladda ner en kopia av mina provkoder och spela runt med olika inställningar. Det är inte så svårt som du kan förvänta dig att genomföra liknande övergångar på din egen hemsida.