Beginnershandleiding voor CSS3
Sinds de aankondiging van in 2005 is de ontwikkeling van het niveau 3 van Cascading Style Sheet of beter bekend als CSS3 nauwlettend in de gaten gehouden en gecontroleerd door vele ontwerpers en ontwikkelaars. We zijn allemaal enthousiast om de nieuwe functies van CSS3 te leren kennen - de tekstschaduwen, randen met afbeeldingen, dekking, meerdere achtergronden, enzovoort, om er maar een paar te noemen.
Vanaf vandaag zijn nog niet alle selectors van CSS3 volledig ondersteund. Maar dat betekent niet dat we het niet leuk kunnen vinden om nieuwe CSS3-dingen te testen. Deze post is opgedragen aan alle ontwerpers en ontwikkelaars die al bekend zijn met CSS 2.1 en je handen vies willen maken op CSS3.0.
Het is een compilatie van nuttige CSS3-lezingen, voorbeeldcodes, tips, zelfstudies, spiekbriefjes en meer. Voel je vrij om ze te gebruiken in je projecten, zorg er gewoon voor dat het sierlijk valt op incompatibele browsers.
Aan de slag met CSS3
Inleiding tot CSS3
Een (roadmap) officiële inleiding tot CSS en CSS3. Dit document geeft u een algemeen idee over de ontwikkeling van CSS3.
CSS3: ontwerp naar het volgende niveau brengen
Voordelen van CSS3, met uitleg en voorbeelden van CSS3-eigenschappen en selectors.
Verschillende trucs met CSS3
Webmonkey brengt je door verschillende basistrucs in CSS3, inclusief afgeronde randen, randen, slagschaduwen, beeldtrucs en meer.
Interview: zes vragen met Eric Meyer over CSS3
Folks at Six Revision interviewde Eric Meyer met waardevolle inzichten en antwoorden op CSS3.
CSS3: Progressive Enhancement
Hoe u sierlijke (of progressieve) verbeteringstechnieken kunt gebruiken om gebruik te maken van CSS3-functies in browsers die deze ondersteunen, terwijl u ervoor zorgt dat uw code nog steeds een bevredigende gebruikerservaring biedt in oudere browsers die deze functies nog niet ondersteunen.
CSS3: Achtergrond en randen
Afgeronde randen (Border-radius)
Een gids voor het maken van afgeronde randen met CSS3's border-radius eigendom.
Afgeronde randen met afbeelding (Border-images)
Afbeeldingen in randen gebruiken met border-image eigendom.
CSS3 randen, achtergronden en vakken
Gedetailleerde uitleg met voorbeelden van nieuwe CSS3-eigenschappen zoals: background-clip, background-oorsprong, background-attachment, box-shadow, box-decoration-break, border-radius en border-image.
CSS3: tekst
Letterpress Effect
Creëer eenvoudig letterpress-effect met CSS3.
Zes teksteffecten met behulp van tekstschaduw
Teksteffecten zijn onder meer: vintage / retro, neon, inzet, anaglyfisch, vuur en bordspel.
Mooie typografie
Hoe basismarkeringen nemen en transformeren in een aantrekkelijk en mooi typografisch ontwerp door pure CSS3.
Tekst rotatie
Gebruikt een afbeeldingssprite en een hoeveelheid CSS om de zaken op de juiste manier te positioneren.
Overzicht tekst
Hoe u een omtrek of lijn aan uw tekst kunt toevoegen met behulp van de CSS3 text-stroke eigendom.
Tekstmaskeereffect
Interactief tekstmaskeereffect met behulp van de schaduw tekst CSS-eigenschap.
Linknudging (animatie) met CSS3
Sloeg Javascript en creëer nudge-effect volledig met CSS3.
CSS Selection Styling
Verander de tekstselectiestijl met CSS3.
CSS3: Menu
Meerdere kolommen inhoud
CSS3 gebruiken om een reeks kolommen op uw website te maken zonder afzonderlijke lagen en (of) alinea's voor elke kolom toe te wijzen.
Sexy Tooltips met Just CSS
Het gebruik van de zich ontwikkelende CSS-standaard kan een aantal handige tooltips voor verschillende browsers verbeteren.
Meer tooltips:
- Pure CSS3-tooltip
- Tooltips met CSS3.
Drop-down menu
Hoe maak je een Apple.com gelijk multi-level drop-down menu met behulp van border-radius, box-shadow, en schaduw tekst.
CSS3-Alleen gebied met tabbladen
Klik op een tabblad, verberg alle panelen, laat degene zien die overeenkomt met het tabblad waarop werd geklikt - allemaal met CSS.
3D-linten met CSS3
Maak leuk uitziende 3D-linten met alleen CSS3.
CSS3: slagschaduw
Slagschaduw in beeld
Breng verschillende technieken onder de aandacht en enkele van de mogelijke schijnverschuivingen zonder afbeeldingen te gebruiken.
Gloeistokjes met doosschaduw
Hoe intuïtieve en mooie tabs te maken in CSS3 zonder afbeelding.
CSS3: Knoppen
Tutorial: mooie knoppen
Hoe maak je mooie cross-browser compatibele CSS3-knoppen die gracieus verslechteren.
Tekstballonnen
Verschillende vormen van tekstballoneffect gemaakt met CSS 2.1 en uitgebreid met CSS3.
Github gelijkknoppen
Verzameling knoppen die laten zien wat er mogelijk is met CSS3, terwijl ook de eenvoudigst mogelijke opmaak behouden blijft.
Draaiende, vervagende pictogrammen met CSS3 en MooTools
CSS3 en MooTools gebruiken om dymanische, roterende elementen te maken.
Beeld-overlay
Praktische toepassing van de eigenschap CSS3-randafbeelding.
Meer
- CSS3 + Mootools. Een voorbeeld van experimenteren in mootools. Hiermee voegt u CSS3-eigenschappen toe aan het hoofdwerk van MooTools-frames.
- Exploderend logo met CSS3 en MooTools of jQuery. Neem een statische afbeelding en maak er een geanimeerd, exploderend effect van de muis over.
- De kracht van HTML 5 & CSS 3. HTML 5 en CSS 3 winnen snel aan populariteit, Perishable Press is hier om uit te leggen hoe en waarom.
- Draaiende stralen met CSS3-animaties en JavaScript-voorbeeld. Eenvoudig en subtiel ray-spineffect aan de achterkant van een afbeelding.
- CSS3 Polaroid-fotogalerij. Hoe je een cool uitziende stapel Polaroid-foto's kunt bouwen met pure CSS-styling.
- HTML 5 en CSS 3: de technieken die je binnenkort zult gebruiken. Een doorbraak bij het bouwen van een blog vanaf de basis met HTML5 en CSS3.
Cheatsheets & referenties
CSS3 Cheat Sheet (PDF)
Afdrukbare cheatsheet met volledige lijst van alle eigenschappen, selectortypes en staat waarden toe in de huidige CSS3-specificatie van de W3C.
CSS-ondersteuning in Opera 9.5
Volledige lijst van de ondersteunde CSS-kiezers in Opera 0.5.
Lettertypen beschikbaar voor embedding in @ font-face
Uitgebreide lijst met lettertypen waarvoor momenteel een licentie is @ Font-face inbedding.
CSS 3 Selectors - uitgelegd
Een handleiding en verwijzing naar CSS3-kiezers en de bijbehorende patronen.
Cross-browser CSS3 Rule Generator
CSS3-regels die u kunt kopiëren en plakken op uw eigen stylesheet.
CSS3 Klik op Grafiek
Krijg CSS3-stijlen zoals doosafmetingen, randradius, tekstschaduw en meer binnen een klik.
CSS-inhoud en browsercompatibiliteit
Volledige lijst met selectietabellen van zowel CSS als CSS3 met aangifte voor controle van browsercompatibiliteit.
