50+ Awesome CSS3-technieken voor betere ontwerpen
CSS3 wint aan kracht, ondanks het feit dat de standaard nog niet eens is afgerond.
Er zijn honderden tutorials om ontwerpers te leren hoe ze het moeten gebruiken, maar helaas dekken veel van hen dezelfde grond.
En sommige van de tutorials leren ontwerpers dingen te doen die ze misschien niet als nuttig beschouwen, hoewel de technieken meestal kunnen worden aangepast om perfect bij een project te passen.
Hieronder staan meer dan vijftig geweldige CSS3-zelfstudies. Velen zijn strikt op CSS en HTML gebaseerd, terwijl andere ook JavaScript bevatten.
Als je een favoriete techniek of zelfstudie hebt die hieronder niet is opgenomen, deel deze dan in de reacties!
CSS3 gebruiken voor beeldloze afbeelding
Verschillende nieuwe methoden in CSS3 maken het mogelijk een aantal zeer complexe afbeeldingen te maken met pure CSS en geen afbeeldingen. Hier zijn een handvol van de beste voorbeelden die er zijn.
Pure CSS iPhone-afbeelding
Een mengeling van randen, transformaties en verlopen om een geanimeerd beeld van een iPhone te maken.
Het Opera Browser-logo maken in CSS3
Een duidelijke illustratie van het Opera-logo dat wordt weergegeven met behulp van CSS3-technieken.
Ons zonnestelsel met CSS3
Een gladde weergave van het zonnestelsel met animatie-effecten.
Analoog klokeffect
Maak een coole analoge klok met alleen CSS3 en jQuery.
Schaduwexperimenten
Deze zelfstudie laat zien hoe CSS-schaduwen kunnen worden gebruikt om een verscheidenheid aan effecten te creëren, waaronder een afbeelding in de donkere kant van de maan, een overschaduwd periodiek systeem en zelfs een psychedelisch 'liefdesdrankje'.
Polaroid-stijlafbeeldingen creëren met Just CSS
Deze tutorial gebruikt zowel CSS2- als CSS3-effecten om Polaroid-styling toe te voegen aan een eenvoudige lijst met afbeeldingen.
CSS3 Tekst, lay-out en kleureffecten
CSS3 kan worden gebruikt voor veel verschillende mooie animaties en afbeeldingen, maar het is ook geweldig voor lay-out-, tekst- en kleureffecten waar je misschien eerder voor hebt gekozen.
Gebruik van CSS3-kolommen
Codering van een schone multi-column CSS3-module.
Algemene CSS3 Implemenation
Een overzicht van de voordelen van CSS3.
Styling Links met CSS3
Vier verschillende manieren om verschillende soorten koppelingen met CSS3 vorm te geven
CSS3 verticale accordeon
Verlopen en overgangen maken dit accordeonmenu dat degradeert tot een geordende lijst in oudere browsers.
Super Awesome CSS3-knoppen
Gekleurde, verloopknoppen met slagschaduw die werken op lichte of donkere achtergronden en waarvoor geen afbeeldingen nodig zijn!
Photoshop-stijlknoppen met CSS3
Een zij-aan-zij vergelijking van het maken van CSS3-knoppen zonder afbeeldingen en met Photoshop.
Css Tekstverloop met verloop
Instructies voor het maken van een uniek teksteffect door een structuurkaart op tekst toe te passen. U kunt verlopen of patronen gebruiken om tekst echt te laten knallen.
Enkele CSS3-alternatieven voor JavaScript-effecten
7 manieren om veelgebruikte JavaScript-effecten te vervangen door CSS3 om uw site klaar te maken voor de toekomst.
In reliëf gemaakt CSS3-teksteffect
Een reliëf-teksteffect maken zonder hackers in de Photoshop-browser.
CSS3-kleurwaarden begrijpen
Alles over de nieuwe kleuropties die beschikbaar zijn met CSS3.
Rijke effecten creëren met CSS3
CSS-overgangen en -transformaties kunnen worden gecombineerd om verschillende effecten te maken.
Een CSS3 Bokeh-effect maken
De mogelijkheid om gradiënten en transparantie te gebruiken met CSS3 maakt dit klassieke effect mogelijk.
CSS3-kolommen
Een goede video-zelfstudie over het gebruik van CSS3-kolommen voor lay-out.
Fancy-lijsten met CSS3
Coole opsommingstekenlijststijl met CSS3 om mooie vinkjes te maken.
Zeer gladde beeldloze infoboxen met CSS3
De technieken die mogelijk worden gemaakt door CSS3 maken deze vakjes echt pop.
Tekstballonnen
Border-radius en transformeren pseudo-elementen maken deze vormen mogelijk.
Flash-stijl beeldovergangseffecten
Een slimme manier om het CSS-animatie-effect te gebruiken.
Het Tumblr's Updating-scherm opnieuw creëren met CSS3
Een CSS3-ontwerpeffect dat goed degradeert voor oudere browsers.
Subtiele CSS3-typografie die u zou willen vloeken, werd gemaakt in Photoshop
Deze 13 minuten durende video-zelfstudie laat je zien hoe je een mooi, subtiel 3D typografisch effect maakt, geheel met CSS3.
Tekstrotatie met CSS
Hier is een iets oudere techniek die laat zien hoe tekst die compatibel is met meerdere browsers kan worden geroteerd om uit te lijnen met een verticale as.
Maak een boekdrukeffect met CSS Tekstschaduw
Deze Line25-zelfstudie laat je zien hoe je tekstschaduwen gebruikt om een letterpress-achtig effect te creëren op de tekst van je website.
Geweldige CSS3 Lightbox-galerij met jQuery
Deze code maakt een afbeeldingsgalerij in polaroidstijl met een optie om te slepen en neerzetten.
Awesome overlays
Deze zelfstudie van Zurb laat zien hoe u beeldoverlays kunt maken met behulp van CSS3-randeigenschappen die vervolgens kunnen worden gebruikt om extra informatie over een afbeelding weer te geven wanneer u zweeft.
Geweldige inline-formulierlabels
Deze zelfstudie laat zien hoe u inline formulierlabels maakt die niet verdwijnen als uw bezoekers beginnen te typen.
CSS3 3D-effecten
Geanimeerde CSS3-kubus
Een unieke 3D-geanimeerde kubus met 3D-transformaties, gestyled met CSS. De kubus kan worden gedraaid met behulp van de pijltoetsen om de informatie weer te geven die op elk vlak wordt weergegeven.
CSS3 3D-linten
Geef wat diepte aan uw ontwerp met behulp van deze eenvoudige CSS3 CD-linten.
Geanimeerde 3D-posterscroller
Filmaffiches met bijschriften weergeven met een verbluffend 3D-perspectiefeffect in CSS3.
3D CSS3 Coke Can
Door een schuifbalk te slepen, kan deze virtuele cola heen en weer rollen.
CSS-schaduwen
Creatief schaduwen vormgeven door ze van het element los te maken.
CSS3-animatie
Een geanimeerde uitlevering van Twitter Fail Whale met CSS3
Een zeer elegante gebruiker van CSS3 die verrassend genoeg enigszins degradeert in oudere browsers.
Parallax Starfield achtergrond
Sterren bewegen van links naar rechts achter je inhoud met deze klassieke ruimtevaart-look.
Inhoud tonen en verbergen met CSS3
Schalen en menubomen uitbreiden en inkrimpen zonder javascript.
Een zwevende volg-tab met CSS3
Zet uw navigatie- of contactpictogrammen binnen handbereik met deze handige methode.
CSS3 Drop-in Modal Windows
Een aantal algemene modale vensters gegenereerd met behulp van CSS3-effecten en transformaties.
Spinners die alleen CSS3 gebruiken
Laden van animaties maken met alleen CSS3 en geen geanimeerde gifs!
Sociale pictogrammen weergeven met CSS3
Een cool, vervagend effect voor het weergeven van uw sociale pictogrammen met pure CSS3.
CSS3 Cartoon-animatie
Een volledige flash-achtige animatie maken met alleen CSS3 en jQuery.
Een geanimeerd landschap met CSS3
Bergen en wolken en water allemaal geanimeerd met CSS3.
Leuke geanimeerde Scrolling Image Captions
Met CSS3-overgangen kunt u verbazingwekkende dingen doen met tekstbijschriften. Hier is een voorbeeld.
Een elastisch miniatuurmenu
Een reeks afbeeldingen die uitklappen en intrekken wanneer eroverheen wordt bewogen.
Gestapelde, dynamische indexkaarten
Een fantastisch animatie-effect dat op een aantal ontwerpen kan worden toegepast.
Een kleurrijke klok met CSS en jQuery
Deze zelfstudie laat zien hoe je een werkelijk geweldige kleurrijke klok maakt met behulp van CSS en jQuery, bestaande uit drie afzonderlijke laadstijlcirkels met uren, minuten en seconden.
Pure CSS3 At-At Walker
Dit is een indrukwekkend voorbeeld dat CSS3 (geen JavaScript, geen Flash) gebruikt om een geanimeerde At-At Walker van Star Wars te maken. Het enige nadeel is dat het momenteel alleen zichtbaar is in Webkit-browsers (Safari en Chrome).
Maak een jQuery-inhoudschuifregelaar met Pure CSS
Leer met deze zelfstudie een puur CSS-jQuery-achtige schuif te maken.
CSS3 vervolgkeuzemenu
Deze zelfstudie van WebDesignerWall laat zien hoe je een CSS3-vervolgkeuzemenu kunt maken dat compatibel is met meerdere browsers en dat ook werkt in browsers die CSS3 niet ondersteunen (hoewel met een beperkte stijl).
Exclusief geschreven voor WDD door Cameron Chapman .
Als u andere hoogwaardige CSS3-zelfstudies kent die hierboven niet zijn behandeld en die u wilt delen, kunt u dit doen in de opmerkingen!