Inspiration från codrops

"Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge."

Den twittrade länken ledde till en demosida. På demosidan fanns en länk till demon innan, och så var karusellen igång. Jag bläddrade igenom många inspirerande experiment. Här kommer de jag tyckte var mest intressanta!

Blädderbart

Innehållet är upplagt som en bok, två sidor för varje uppslag, en framsida och en baksida. Den stora grejen är att det går att bläddra sig genom innehållet, oavsett om du tittar på sidan med en datorskärm eller en mobilskärm. Det går att klicka på artiklarna och läsa hela, för hela texterna inte får plats på sidorna. Innehållet anpassas efter storleken på fönstret. Det innebär att den är fullt anpassad för mobilen också. Det gillas!

Sidan visas, på datorn, bäst i Safari och Chrome.

Besök http://tympanus.net/Development/FlipboardPageLayout/

Riktad hovereffekt

Detta är den nya varianten av bildgalleri där en kort beskrivande text dyker upp vid hover. I denna variant bestämmer nämligen pekarens riktning när den hovrar bilden från vilket håll som texten glider in från. Det ger känslan av att det är en ruta bakom som följer med pekaren och visar olika text beroende på bild. Det ger ett bra flöde!

Besök http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/ 

4-delat bildspel

Tänk dig några bilder och att du sedan klipper varje bild i fyra bitar. Bilderna sätts sedan ihop och när du bläddrar mellan dem så är varje del som ett eget bildspel, men till slut ser det ändå ut som en enda bild. Det är vad detta är.

Besök http://tympanus.net/Tutorials/CSS3SlidingImagePanels/

Knappar med klickeffekt

Knappar kan utformas på alla möjliga olika sätt. Se ut på ett sätt när den visas och ett annat sätt när den blir klickad på. Här är knapparna utformade så att de ska se ut som riktiga fysiska knappar som trycks ner.

Besök http://tympanus.net/Tutorials/CSSButtonsPseudoElements/  

Tumnaglar som gömmer sig

Detta är något som sticker ut. Kolla in det!

Besök http://tympanus.net/Tutorials/ProximityEffect/   

Test av övergångar i bildspel

Bildspel som ser ut att bläddras i 3D.

Besök http://tympanus.net/Development/ImageTransitions/  

2012-05-08

Allmänt

Kommentarer

Masonry

Masonry på dragster.se

Istället för att floata divar på många olika sätt och ändå få massa luft mellan dem kan du använda Masonry. Den känner av bredden på dina divar och passar ihop dem till ett mosaikmönster. Se bilden ovan för att se hur det ser ut på Dragsters startsida.

Läs mer om jQuery Masonry, eller prova på Vanilla Masonry, som inte använder jQuery!

2012-05-04

Allmänt

Kommentarer

Wordpress-tips v.16

Internet.se och Rum för ung kultur

Det var ett tag sedan sidorna lanserades, men nu har de båda fått varsin plats bland våra referenser. De bygger båda på Wordpress och använder plugins som bland annat: TDO Mini Forms, WP e-commerce, Relevanssi och PBD AJAX Load Posts.

Sidorna det handlar om är Internet.se och Rum för ung kultur.

Läs och inspireras!

Om flexibla bilder av Tim Kadlec

En flexibel hemsida i mobilen kräver inga stora bilder. Tekniken för att visa olika bilder för olika media spretar.

Tim Kadlec har testat olika sätt för detta och tagit reda på om alla bilder laddas in eller bara de som ska visas för det aktuella mediet gör det. Mycket intressant!

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Kort om Facebook Timeline

För någon månad sedan introducerades alla sidor på Facebook för Timeline. Det kom till profilsidorna bara några månader sedan, och nu var det alltså företagens och övrigas tur.

Dragster undrade hur Timeline på Facebook fungerade. Dragnet satte ihop en presentation med HTML5 slideshow och berättade. Bilderna i presentationen kommer från Tour Africas Facebook-sida. Ni kan också ta del av presentationen: 

http://dragnet.se/webbdesign/facebook-timeline/index.html

Källor och ytterligare information:

AllFacebook: “7 Crucial Things About Timeline For Facebook Pages”
http://www.allfacebook.com/facebook-pages-timeline-7-2012-02
Marketingland: “New Facebook Pages Released With Timeline, Pinning & Private Messaging”
http://marketingland.com/new-facebook-pages-released-with-timeline-pinning-private-messaging-7034
Pando Daily: “Facebook Brings Timeline To Brand Pages”
http://pandodaily.com/2012/02/29/facebook-brings-timeline-and-a-new-admin-panel-to-pages/
Dagens Media: "Fem tips om Facebook Timeline för Pages"
http://www.dagensmedia.se/asikter/article3449364.ec