Inhoud
- 01. Koppel afbeeldingen aan de kleurenschema's van de site
- 02. Deel de ruimte gelijkmatig in de laatste rij van een raster
- 03. Maak partikelanimaties met box-shadow
- 04. Animeer veelvlakken met transformaties
- 05. Master ’calc ()’ voor positionering
- 06.Maak het doosmodel gezond met 'box-sizing'
- 07. Verticaal centreren met CSS
- 08. Richt je op een bank met gerelateerde objecten
- 09. Controle woordafbreking
- 10. Profiteer van de schrijfmodi
- 11. Gebruik verlopen op ongebruikelijke manieren
- 12. Gebruik string-matching op links
- 13. Laat FOUT voor je werken
- 14. Verken SVG voor achtergronden
- 15. Focus gebruikers met 3D-overgangen
- 16. Maak cirkelvormige menu's met CSS en wiskunde
- 17. Animeer koppelingen bij zweven
- 18. Maak eenvoudige keyframe-animaties
- 19. Creëer zwevende 3D-effecten met schaduwen
- 20. Update pagina-elementen met ’: target’
- 21. Geef feedback met subtiele animaties
- 22. Bereid je voor op ’animatiefilm’
- 23. Maak invoervelden menselijk
- 24. Pauzeer en speel CSS-animaties
- 25. Gebruik geen CSS-variabelen
Op een bepaald moment met welke technologie dan ook, is er het gevoel dat vrijwel alles dat kan worden gedaan, is gedaan. Als iets niet meer zo nieuw en glanzend is, neemt de belangstelling af en wordt de aandacht getrokken naar het volgende grote ding. Dit is vaak het geval geweest in de webindustrie, die de neiging heeft vreselijk opgewonden te raken door een bepaald aspect van de technologie voordat, vroeg of laat, het naar het alledaagse wordt gedegradeerd.
Toen CSS voor het eerst verscheen, was het revolutionair en in de loop van de tijd is het geëvolueerd om ontwerpers in staat te stellen flexibele, strak vormgegeven en mooie webpagina-indelingen te maken. De laatste tijd is er echter vanuit verschillende hoeken de suggestie dat CSS moe is en dat zijn tijd in de zon misschien voorbij is.
Ik wil laten zien dat er nog steeds veel opwinding en leven is in de wereld van CSS, of dat nu gaat over geavanceerde eigenschappen die je misschien nog niet hebt verkend, of door een aspect van CSS te gebruiken op een manier die je niet eerder had overwogen.
Hier zijn enkele tips van enkele van de beste CSS-experts in de branche.
(Opmerking: sommige technieken in deze functie zijn hypermodern en worden mogelijk niet volledig ondersteund in alle browsers. Test grondig en zorg ervoor dat er back-ups zijn voordat u aan het werk gaat.)
01. Koppel afbeeldingen aan de kleurenschema's van de site
Christopher Schmitt, organisator van de conferentie
Conferenties hebben hun eigen kleurenschema's en, met veel sprekers, kan de workflow voor het beheren van portretten complex zijn. Het handmatig toepassen van filters is niet schaalbaar en vertrouwt erop dat u toegang heeft tot bijvoorbeeld een specifieke Photoshop-actie. Ik gebruik nu grijstinten PNG's met hoge resolutie en voeg tonen toe met behulp van CSS-filters. Hierdoor kan ik elk portret matchen met het schema van een evenement en ook afbeeldingen hergebruiken voor meerdere thema's. Ik heb voor elk gewoon een nieuwe CSS-regel nodig. Bekijk een demo.
02. Deel de ruimte gelijkmatig in de laatste rij van een raster
Stephen Hay, ontwerper en auteur
Als u een onbekend aantal items heeft dat in een raster moet worden weergegeven, kunt u Flexbox gebruiken om de laatste rij gelijkmatig te splitsen. Dus als er maar één item is, neemt dit de hele rij in beslag; als er twee items zijn, wordt de rij in tweeën gedeeld, enzovoort. Bekijk een demo.
03. Maak partikelanimaties met box-shadow
Ana Tudor, programmeur en wiskundefanaat
Door te mengen doos-schaduw met wat wiskunde en Sass kun je 2D-curven tekenen, 3D-beweging emuleren en gekke deeltjesanimaties maken die iedereen zal verwarren met canvas-animaties! Bekijk een demo en nog een.
04. Animeer veelvlakken met transformaties
Ana Tudor, programmeur en wiskundefanaat
U heeft waarschijnlijk wel eens pure CSS-polygonen gezien die met randen waren gemaakt, maar we hebben een veel krachtigere tool in de transformeren eigendom. Het koppelen en toepassen van transformaties op geneste elementen stelt ons in staat om complexe polygonen te creëren met beeldachtergronden of randen en transparante interieurs. Met behulp van 3D-transformaties kunnen we deze 2D-vormen combineren tot veelvlakken en de lichamen laten samenvoegen, ontvouwen, exploderen of opnieuw combineren op een manier die gemakkelijk voor WebGL wordt aangezien. Bekijk een demo.
05. Master ’calc ()’ voor positionering
Ana Tudor, coder en wiskundefanaat
ik hield van calc () vanaf het moment dat ik het ontdekte. Het is handig voor het temmen van marges, opvulling of afmetingen, en kan een redder in nood zijn wanneer het wordt gebruikt voor het positioneren of dimensioneren van achtergronden, binnen verlopen of transformaties, en niet alleen gecombineerd met dezelfde oude eenheden, maar ook met de nieuwe en coole viewport-eenheden.
06.Maak het doosmodel gezond met 'box-sizing'
Sawyer Hollenshead, ontwikkelaar en ontwerper van Oak Studios
Gebruik box-sizing om uw gezond verstand te redden. Zonder dit wordt een element met een gedefinieerde breedte van 250 px en 25 px aan opvulling gecombineerd tot een breedte van 300 px, waardoor het moeilijk is om pixels en percentages te mengen. Met doos maat:grensdoos randen en opvulling worden in plaats daarvan binnen de gedefinieerde breedte geplaatst.
07. Verticaal centreren met CSS
Trent Walton, oprichter van Paravel
Historisch gezien was het moeilijk om iets verticaal te centreren met CSS, bijvoorbeeld als je een afbeelding hebt met aangrenzende tekst die je verticaal uitgelijnd wilt hebben. Gebruik Flexbox in plaats van stampen en vloeken om uitlijningsproblemen op te lossen. Bekijk een demo.
08. Richt je op een bank met gerelateerde objecten
Jonathan Smiley, Zurb-partner en ontwerpleider
Schaal de CSS-lijndikte af door attribuutselectors bij benadering te gebruiken voor klassenamen, om een grote bank met gerelateerde objecten te targeten, in plaats van gemeenschappelijke attributen aan elke afzonderlijke klasse te koppelen. Bijvoorbeeld ... [class * = "- block-grid-"] {} ... zou zich richten op: .small-block-grid-3 .large-block-grid-5
09. Controle woordafbreking
Savid Storey, open internetadvocaat
Afbreking wordt in gedrukte vorm als vanzelfsprekend beschouwd en sommige ontwikkelaars gebruiken de koppeltekens onroerend goed online, maar weinigen zijn zich bewust van andere eigendommen die een fijnere controle bieden. Als je niet oppast, krijg je afbrekingsladders waarin koppeltekens op meerdere regels worden gebruikt. Een algemene vuistregel is niet meer dan twee op een rij, die u kunt gebruiken met afbreken-limiet-regels. Ook, hyphenate-limit-chars stelt u in staat om de minimumlengte van een woord dat wordt afgebroken te specificeren, samen met het minimumaantal tekens voor en na het afbreekstreepje.
10. Profiteer van de schrijfmodi
David Storey, open internetadvocaat
Met de schrijfmodi kunt u de richting bepalen waarin tekst stroomt. Sommige Oost-Aziatische tekst is verticaal geschreven, lijnen groeien van rechts naar links, gespecificeerd met schrijfmodus: verticaal-rl (tb-rl in IE). Verticale tekst wordt niet echt gebruikt in Europese schrijfsystemen, maar kan handig zijn voor kopteksten in tabellen wanneer u weinig horizontale ruimte heeft.
11. Gebruik verlopen op ongebruikelijke manieren
Ruth John, ontwerper
Achtergrondverlopen kunnen er geweldig uitzien als ze worden gebruikt met randen en opsommingstekens. Ik gebruik zowel op mijn blog als met een preprocessor een mixin met de hergebruikte code, om deze niet handmatig te herhalen. Wees niet suf, want hellingen kunnen processorzwaar zijn. SCSS-mixin voor lijstkogels:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color) , 15%) 30px, transparant 31px); }
12. Gebruik string-matching op links
Ruth John, ontwerper
Op mijn blog heb ik CSS-attribuutselectors met string-matching gebruikt om sociale pictogrammen op te maken. Deze verschijnen overal in mijn blog, soms met tekst en soms zonder, maar altijd met een pictogram. Om de juiste link te stylen met het juiste sociale pictogram, gebruik ik een string-match op de href attribuut van het ankerelement. ik gebruik *= dus de href op het ankerelement hoeft alleen de string te bevatten die ik specificeer.
/ * voor alle sociale links * / .social a: vóór {display: inline-block; padding-rechts: 30px; font-family: ’FontAwesome’;} / * Elke specifieke link * / .social a [href * = "twitter"]: vóór {content: " f099"; kleur: # 52ae9f;} .social a [href * = "github"]: voor {content: " f09b"; kleur: # 5f2e44;} .social a [href * = "feed"]: voor {content: " f09e"; kleur: # b47742;}
13. Laat FOUT voor je werken
Jason Pamental, directeur bij H + W design
Het internet is gebouwd op het uitgangspunt dat het inhoud moet leveren, zelfs als de browser de bling niet kan weergeven. Langzaam ladende weblettertypen kunnen frustrerend zijn, FOUT (Flash Of Unstyled Text) schokkend omdat navigatie en tekst opnieuw worden geplaatst terwijl lettertypen worden gedownload. Google en Typekit geven een antwoord: de web-font loader. Door klassen in een pagina te injecteren, op basis van de laadstatus van lettertypen, kunt u fallbacks met die klassen opmaken om reflow tot een minimum te beperken en zo ook het syndroom van WebKit 'onzichtbare inhoud' uit te roeien. Bekijk een demo.
14. Verken SVG voor achtergronden
Emil Björklund, inUse webontwikkelaar
De enige browsers die nu zonder SVG-ondersteuning zijn, zijn IE8 en lager en Android 2 WebKit, en dus is het gebruik van SVG voor achtergronden in CSS haalbaar, vooral samen met een PNG-fallback-oplossing, zoals Grunticon. SVG kan worden gestileerd door CSS, en er is een interessante doorbloeding van CSS-eigenschappen (filters!) Van SVG waarmee we kunnen spelen zoals toegepast op HTML.
15. Focus gebruikers met 3D-overgangen
Emil Björklund, inUse webontwikkelaar
3D-transformaties gebruiken en gebruik maken van de z-dimensie in gebruikersinterfaces kan erg handig zijn, met name voor het verbergen / tonen of samenvouwen / uitbreiden van inhoud. In die situaties is het ook vrij eenvoudig om terug te vallen op een 2D-overgang, of helemaal geen overgang. Het is een gebied waar een beetje progressieve verbetering een lange weg kan gaan.
16. Maak cirkelvormige menu's met CSS en wiskunde
Sara Soueidan, frontend-ontwikkelaar
Cirkelvormige menu's zijn populair in mobiele apps en u kunt CSS-transformaties en overgangen gebruiken om een eenvoudig cirkelvormig menu te maken. Dit menu kan worden aangepast en aangepast om ook een naar boven of beneden openend menu te creëren. Er is in CSS geen directe manier om een item diagonaal te vertalen, maar u kunt de waarde van de straal van de cirkel gebruiken waarop u de items wilt plaatsen, en een eenvoudige wiskundige regel toepassen om de horizontale en verticale translatiewaarden te berekenen die moeten worden doorgegeven aan de translateX () en translateY () functies. Op die manier krijg je een diagonaal vertaling om de menu-items naar de juiste posities op de cirkel te verplaatsen. De klikgebeurtenis die het menu sluit / opent, kan worden afgehandeld met JavaScript, of u kunt nog een stap verder gaan en een CSS-menu hebben door een CSS-checkbox-hack te gebruiken. In mijn demo gebruik ik JavaScript en de HTML5 classList API, die niet in alle browsers wordt ondersteund, dus je moet de demo in een moderne browser bekijken om het te laten werken, of de jQuery-code verwijderen in plaats van de classList API te gebruiken code.
Bekijk een demo en volledige tutorial. CSS Checkbox hack voorbeeld.
17. Animeer koppelingen bij zweven
Paul Lloyd, interactie-ontwerper van The Guardian
Er moet niet op worden vertrouwd dat een actie werkt of om belangrijke informatie te verstrekken, maar u kunt de interfaces voor muisgebruikers nog steeds verbeteren. Op 24ways.org onthullen we artikeltitels wanneer u de muisaanwijzer over links in de vorige / volgende navigatie beweegt. Dit werd bereikt door een ::na pseudo-element met gegenereerde inhoud afkomstig van de waarde van een gegevens- attribuut, met een CSS-overgang toegepast om het in beeld te laten schuiven bij zweven. Bekijk een demo.
18. Maak eenvoudige keyframe-animaties
Paul Lloyd, interactie-ontwerper van The Guardian
Op 24ways.org hebben we geanimeerde hoekflappen toegevoegd aan samenvattingen, die bij zweven geopend werden. Dit werd gedaan door de @keyframes regel met de animatie-eigenschap, waarbij u de positie van een achtergrondafbeelding wijzigt om een op sprite gebaseerde animatie te verkrijgen. De truc is om het aantal frames dat je in je animatiesprite hebt, aan te geven met de stappen() waarde. Bekijk een demo.
19. Creëer zwevende 3D-effecten met schaduwen
Catherine Farman, ontwikkelaar van Happy Cog
Een recent project vereiste een zwevende productfoto met een ronde schaduw eronder, waardoor een 3D-effect ontstaat dat van het scherm springt. De schaduw gebruikt verschillende CSS3-functies: grens-straal alpha transparantie en doos-schaduw. Het werkt goed voor productrasters, showcase-afbeeldingen in een homepage-held of elk grillig ontwerp met een skeuomorfe neiging. Bekijk een demo.
20. Update pagina-elementen met ’: target’
Simon Madine, HeRe senior webontwikkelaar
CSS is geen programmeertaal in de gebruikelijke zin, maar je kunt nog steeds slimme dingen doen zonder terug te vallen op JavaScript. Bijvoorbeeld de :doelwit pseudo-class wordt toegepast op elementen die het doelwit zijn van een aangeklikte link.
U kunt dit gebruiken om de status van een pagina te definiëren, een ouder te targeten die veel elementen bevat, en uw links worden een middel om het uiterlijk en de lay-out van alle kinderen met een enkele klik te regelen. Bekijk een demo.
21. Geef feedback met subtiele animaties
Neil Renicker, ontwerper en ontwikkelaar
CSS pseudo-elementen ::voordat en ::na samen met CSS-overgangen, kunnen prachtige animaties mogelijk zijn die subtiele feedback geven aan muisgebruikers. Bouw bijvoorbeeld een CSS-pijl binnen een pseudo-element, pas een overgang toe op het pseudo-element (overgang: alle gemak-in-uit .15s;), en voeg vervolgens een eenvoudige lay-outwijziging toe aan het :zweven pseudo-class (zoals wijzigen margin-top). Bekijk een demo.
22. Bereid je voor op ’animatiefilm’
Paul Lewis, coder en lid van het Chrome Developer Relations-team
Als je het hebt gebruikt -webkit-transformatie: translateZ (0) om je pagina's op magische wijze sneller te maken, wordt de hack, die in veel browsers simpelweg een nieuwe compositorlaag creëert, vervangen door zal animeren. Binnenkort kunt u de browser vertellen wat u van plan bent te veranderen aan een element (de positie, grootte, inhoud of scroll-positie) en de browser zal de juiste optimalisatie onder de motorkap toepassen. Meer informatie.
23. Maak invoervelden menselijk
Yaron Schoen, oprichter van Made For Humans
Door snelle animaties toe te voegen aan elementen waarmee gebruikers communiceren, voelt een interface minder computerachtig aan. Probeer bij invoervelden een overgangsoproep binnenin, dus wanneer je het focust of onscherp maakt, is er een soepele overgang.
input, textarea {-moz-transition: all 0.2s gemak-out; -o-overgang: alle 0.2s gemak-out; -webkit-transitie: alle 0.2s gemak-out; -ms-overgang: alle 0.2s gemak-out; overgang: alle 0.2s gemak-out;
24. Pauzeer en speel CSS-animaties
Val Hoofd, ontwerper en adviseur
U kunt CSS-animatie 'pauzeren' en 'afspelen' door de animatie-play-state eigendom. Als u dit instelt op ‘onderbroken’, wordt uw animatie op zijn plaats gestopt, totdat u verandert animatie-play-state naar rennen, bijvoorbeeld op hover.
.animating_thing {animatie: spin 10s lineair oneindig; animatie-play-state: onderbroken; }. animating_thing: hover {animation-play-state: running; }
25. Gebruik geen CSS-variabelen
Dave Shea, ontwerper en auteur
We krijgen eindelijk CSS-variabelen, bijvoorbeeld om de hexadecimale waarde van een kleur een keer te schrijven en ernaar te verwijzen via een stylesheet. Maar de officiële specificatie is uitgebreid, voegt syntactische complexiteit toe, biedt teleurstellende functionaliteit en wordt grotendeels niet ondersteund door de meeste browsers. In een tijdperk waarin Sass alom populair is en verder gaat dan variabelen met krachtige programmeerlogica zoals aangepaste functies en if / else-verklaringen, komt de officiële specificatie ver te kort.
Hopelijk hebben deze toptips uw kijk op CSS en de mogelijkheden die het vertegenwoordigt in webontwikkeling en -ontwerp vernieuwd. Vergeet niet een van deze technieken grondig te testen om de browserondersteuning te controleren voordat u aan het werk gaat.
Woorden: Craig Grannell Illustratie: Mike Chipperfield
Dit artikel is oorspronkelijk verschenen in netmagazine 253.
