Om du har och letar efter idéer för att få webbplatser att visa sig vara nästa stora grej efter A Song of Fire and Ice (Game of Thrones-serien för den icke-bokläsande befolkningen) utan att ta dig till hjärnan, kolla in dessa 15 CSS3 effekter som vi har samlat ihop åt dig.

Från tutorials till erbjudanden, vi ger dig 15 fantastiska effekter som kommer att förvandla webbplatser från bla till wow!

Parallaxeffekt

Har du bläddrat igenom webbplatsen ihatetomatoes för att fira 25 år av Nintendo Game Boy? Där fick du också spela lite Tetris?

Eller kanske bläddrat igenom Rimmels webbplats som är förbluffad av hur briljant föremålen dyker upp mot en färgstark bakgrund av modeller?

Den 3D-liknande effekten som tycks vara allt rave i designen nu kallas tekniskt sett Parallax-effekten. Designers älskar att leka med dessa, men du måste vara subtil och strategisk eftersom det kan slå tillbaka och skapa en rörig röra.

Parallaxeffekten eller Parallax-rullningen är resultatet av att bakgrunden laddas med långsammare hastighet än din förgrund, vilket skapar mer av ett 3D-utseende. Låter det som mycket jobb? Inte för någon som jobbar smart, få ett Parallax-tema helt klart redan på Cyberchimps.

Ken Burns-effekt

Dokumentärfilmaren var pionjär med konceptet att panorera och zooma in i en statisk bild. Grafisk designer använde den här effekten rikligt och du kanske till och med har stött på detta på många webbplatser.

Effekten leder inte bara ögongloberna, bokstavligen, dit du vill att fokus ska vara utan lägger också till en klick intensitet till en bild. Kommer du ihåg att du tittade på en film där ett gammalt fotografi blinkade över skärmen och berättaren talar om något i bilden, medan ramen långsamt panorerar och zoomar till det motivet?

Ken Burns-effekten har blivit ganska populär och med rätta eftersom den ger en omedelbar ansiktslyftning till vilken tråkig webbplats som helst.

Halvcirkelformad navigeringsmeny

Du behöver inte anstränga dig för att ändra utseendet på din webbplats. Ibland kan så lite som att göra sig av med alternativet gamla och tråkiga män hjälpa.

I stället väljer du ett elegant cirkulärt eller halvcirkelformat navigeringsalternativ som hjälper till att visa upp ett antal menyalternativ. Vissa designers inkluderar bara detta för delningsknappar för sociala medier, men du skulle bli förvånad över dess mångsidighet.

Från den uppenbara musikkonsolen och delningsikonerna för sociala medier, till de primära meny- och profilikonerna, det finns många sätt att utnyttja detta.

Vill du inte haka på dina hjärnor och skapa denna CSS3-effekt från grunden? Få en gratis från DealFuel.

Visa/dölj inloggningspanelen

Skjutpaneler används ofta idag men det är främst för att lätta på belastningen av för många flikar. Inte tillräckligt många designers experimenterar med potentialen i detta alternativ, eftersom glidpaneler kan vara fördelaktiga på så många sätt.

Visa upp innehållsämnen, skapa ett stökigt utseende, vandra upp estetiken eller skil dig bara från konventionellt designade webbplatser. Visa/dölj inloggningspanelen är ett måste för varje WordPress-webbplats, den ger en översikt över instrumentpanelen med flera menyalternativ när du väl loggar in. Läs mer om denna panel här.

Inloggningsformulär för skjutreglage

Ett annat alternativ för inloggningspanelen som glider för att avslöja mer innehåll är ett bra drag när du vill att prenumeranter ska lägga in lite mer information än bara e-postadress och namn men samtidigt inte vill överväldiga dem.

Om du också minskar på utrymmet, kolla definitivt upp det här, eftersom det skulle vara praktiskt när du skapar webbplatser med minimalistiskt tema.

3D-band och 3D-effekter

Om du fortfarande är skrämd av Parallax-effekten och är rädd för att du ska krångla, börja i det små. Använd 3D-band, olika nyanser och skuggor för att skapa en övergripande illusion av djup på din webbplats och på så sätt återge en 3D-effekt.

3D-banden i sig ser helt fantastiska ut. Använd detta för att markera en del av webbplatsen eller på ett officiellt certifieringsdokument som du vill sätta upp, dessa skulle öka sidans övergripande visuella attraktionskraft.

Vet hur man skapar effekten med CSS3 på pvmgarage.

Coverflow effekt

Används främst på bokbaserade webbplatser, du har definitivt sett denna effekt på din Mac eller Apple-enhet när du bläddrat igenom bilder. Coverflow-effekten visar ett antal objekt – som bokomslag – där du sedan kan svepa antingen åt vänster eller höger för att se omslaget, få lite popup-detaljer och välja dem.

Låter det här intressant? Vill du implementera detta i ett projekt? Om ja, bläddra definitivt igenom det här stycket.

CSS3-övergångar

Designers som spelar smart snarare än hårt vet att det inte krävs mycket för att lägga till mojo på din webbplats, ett temabyte här, några skugga- och skuggelement där och du kan faktiskt förvandla din sida. Ett annat sätt att göra det är genom att animera ditt sidinnehåll genom CSS3-övergångar.

Från bokstavsmellanrum till text-skugga, lek runt allt du vill för att se vad som passar bäst. Här är också en fantastisk gratisbit som består av ett omfattande utbud av övergångseffekter.

CSS3-animation med snötema

Är du fortfarande sugen på eftereffekten av semesterperioden? CSS3-animationer med snötema har inte bara en festlig touch utan fungerar också anmärkningsvärt bra för vissa webbplatser som för ett glassmärke.

Det är snabbt och enkelt att använda och kan ändra utseendet på din webbplats eller bloggsida för att komplettera ett tema eller en säsong.

Animering

Animationer kan göra underverk för webbplatser, även om det är subtilt gjort. Det fångar uppmärksamhet och hjälper också till med omvandlingar eftersom uppmärksamheten riktas mot uppmaningen till handling.

Eller helt enkelt, det lägger till det nominella värdet på en sida om inte annat. Här är några fantastiska speciella animationseffekter du kan kolla in.

Boktryckseffekt

Du har antagligen sett de där Instagram-citatinläggen med textutseendet? Det är så boktryckseffekten ser ut och blir också ganska populär inom webbdesign.

Detta har en omvänt maskinskriven känsla över sig men den uppvisar ett elegant och elegant utseende. Rekommenderas definitivt om din är en onlinepublikation eller en blogg. Dessutom, om du vill sätta in en touch av professionell utan att gå all C-suite, skulle detta hjälpa. Här är en handledning om hur du kan använda boktryckseffekten med CSS3.

Vänd cirkel

Lite information skadade inte bara någon utan kan också vara webbplatsens USP. En webbplats som den som kastar slumpmässiga fakta vid varje uppdatering skulle kunna arbetas in i ett slags galleri med bilder med ett litet handtag, som när du klickar på den öppnas för att visa lite roliga trivia.

Men även på vanliga webbplatser är en bläddercirkel av stor vikt. Den komprimerar information, så att du inte har en sida som kryllar av text. Och den har också en cool 3D-känsla. Här är en handledning om hur man skapar en vändcirkel.

Mega meny

Du har förmodligen sett dem på e-handelswebbplatser där många kategorier måste placeras direkt på målsidan men utan att skapa en fullsatt menyrad.

Alternativet Mega Menu är också ett måste för utbildningsbranschen, har du en universitetswebbplats som visar alla större kurser, antagningsinformation och studentresultat och mycket mer?

Mega-menyn kan hjälpa till att rensa bort, skapa ett skarpare och snyggare menyfältsalternativ och inte förvirra läsarna till att klicka på fel alternativ på grund av längre, tråkigare menyalternativ. Du kan också få en hel del genom att ta tag i den responsiva Mega Menu gratis.

Dragspelsgalleri

Det finns två sätt att hålla läsarna engagerade på din webbplats, spärra kraftfullt innehåll och uppmärksamma dem på det kraftfulla innehållet. En statisk sida kan fånga läsarens ögon men något interaktivt som ett dragspelsgalleri kommer att fånga läsarens ögon.

Dragspelsgallerier – oavsett om du väljer att visa upp ditt bästa portföljverk eller uppmärksamma din bästsäljande produkt – kommer alltid att fungera. Du har bara 6 sekunder på dig att få läsarens uppmärksamhet och hålla dem på sidan, använd Dragspelsgalleriet för att få och behålla deras uppmärksamhet på din webbplats mycket längre. Här är en fantastisk anpassningsbar Accordion Gallery-plugin som du kan ta gratis.

Ljuslåda

Hur viktigt är ett rutgalleri? Om du är en fotograf, en artist eller bara en bloggare kan det betyda din nästa stora spelning.

Ett rutgalleri visar alla dina bästa pjäser direkt! Från den fantastiska bilden av solnedgången på toppen av en kulle till det där intensiva gatuporträttet, imponera på dem, få ordet eller helt enkelt locka dem att vinna ett kontrakt, ett rutgalleri kan vara ditt bästa CV framåt.

Som designer är detta något du inte bara bör tänka på för din kunds arbete utan också för din egen webbplats. Få ditt arbete att kämpa för dig och gå i god för din kreativa skicklighet, ett rutgalleri är guld värt.

Men du får det för ingenting i den här affären, så gå och köp den nu!

Vilken av dessa skulle du rekommendera till en vän?