Share
Ik hoor dat dit CSS3-ding al de rage is. Resources vliegen rond in de tutorial wereld en de blogsfeer biedt briljante voorbeelden van creatieve nieuwe manieren om te ontwerpen met behulp van CSS3 modules. Het is echter gemakkelijk over-implementeerbaar en verliest de briljante subtiliteit van geweldige gebruikersinterfaces. Hier zijn drie snelle tips voor het gebruik van krachtige CSS3-technieken op subtiele manieren.
Mensen kunnen kleine veranderingen waarnemen en onderscheiden.
Waar het hier om gaat, is dat mensen heel kleine veranderingen waarnemen die ze niet bewust opmerken of zich kunnen herinneren. Ik betwijfel of dit voor iedereen nieuwe informatie is. Het is een van de bekendere concepten van sensatie- en perceptiestudies. Soms is het ene aangenaam over het andere. En soms weet je niet eens waarom.
Houd er echter rekening mee dat webontwerp een is bewust werkwijze. Subtiel ontwerp kan moeilijk zijn omdat het gemakkelijk is om te denken "dat heeft maar een beetje nodig meer."Voordat je het weet, is de subtiliteit verloren.
Met dat in gedachten, zou ik graag drie CSS3-technieken presenteren die kunnen worden gebruikt om verschillende vormen van subtiliteit voor webontwerp te bieden.
Overgang is een krachtig hulpmiddel dat CSS een manier biedt om in essentie van het ene eindpunt naar het andere te bewegen. De syntaxis bevat een redelijk rijke toolset: eigenschap, duur en versoepeling. Elk van deze stukken kan worden gevarieerd om verschillende niveaus van subtiliteit te bieden. Vaak is het gewoon spelen - zoals effecten vaak doen. Met andere woorden, speel met de waarden tot het lijkt goed. Maak je gewoon niet gek. Het is gemakkelijk om verdwaald te raken, zelfs zo'n korte lijst met variabelen.
Het is niet ongebruikelijk dat navigatie-items van kleur veranderen als de muis zweeft. Overgang kan die kleur iets soepeler maken.
.nav li a color: # 282828; text-decoration: none; -webkit-overgang: kleur .1s gemak-in-uit; -moz-overgang: kleur .1s gemak-in-uit; -o-overgang: kleur .1s gemak-in-uit; overgang: kleur .1s gemak-in-uit; .nav li a: hover color: # 808080;
De kleurverandering is hier niet subtiel. Het is duidelijk merkbaar. Wat is subtiel is het afvlakken van die kleurverandering.
De truc om dit subtiel te houden, is de duur. Als het te lang is, zal het effect veel te opvallend zijn. De navigatie kan snel lastig worden om erover te zweven en er amateuristisch uit te zien.
Bekijk de demo.
In het geval dat u nog niet op CSS3 bent ingegaan, is het belangrijk om de volgorde te noteren waarin de browserspecifieke verklaringen komen. Het is eigenlijk alleen maar belangrijk om op te merken dat de niet-browser specifieke verklaring als laatste in de lijst voorkomt. CSS neemt de laatste verklaring en maakt deze belangrijker in het geval van een conflict. Zodra een actuele overgangsspecificatie is vrijgegeven, zullen vermoedelijk alle browsers de module implementeren zonder het gepatenteerde voorvoegsel nodig hebben. Uw CSS wordt dus enigszins klaar voor de toekomst zonder echte kosten voor de huidige implementaties.
Merk ook op dat de overgangen zich in de elementstijl, niet de hover. Dit zorgt voor de overgang zowel bij mouse-over als mouse-off.
Met de selectiviteit van het n-of-type of n-de-kind kunnen patronen worden gedeclareerd in een reeks elementen en dienovereenkomstig stijlen worden toegepast. In een tabel kan nth-kind bijvoorbeeld elke andere rij kleuren door: nth-child (oneven) te gebruiken. Laten we eens kijken naar een voorbeeld dat misschien niet zo duidelijk is.
We nemen een vrij standaard navigatieaanduiding ...
... en wat styling toepassen.
.nav li: nth-of-type (oneven) margin-top: 5px; .nav li: nth-of-type (even) margin-top: 12px; .nav li: nth-of-type (2n + 2) margin-right: 0; .nav li: nth-of-type (2n + 3) margin-left: 8px; margin-right: 25px;
Dit zal een versregelend menu creëren met een paar hoge items, een paar lage items en een paar sets die er in paren zijn. Het visuele verschil tussen dit en een in-line menu is duidelijk.
Dus wat is er zo subtiel aan? De subtiliteit hier is tweeledig.
Dus misschien ziet een bezoeker eerst "Thuis". Die bezoeker zal zich waarschijnlijk realiseren dat hij of zij al op de startpagina staat. Hij of zij kan heel goed 'Werk' zien. *Klik*. Na het bekijken van enkele stukken werk, hebben ze misschien wel eens "Blog" gezien maar misschien wordt de groepering sterker en wordt hun verlangen naar "Over" getrokken. De ontwerper drijft de bezoeker nu aan met behulp van een navigatie-indeling. Hij of zij heeft aanwijzingen gegeven over waar bezoekers naartoe moeten gaan, achter elkaar.
Zal dit elke keer gebeuren? Absoluut niet. Zal het soms gebeuren? Ik zou zo wedden.
Dat is het punt van subtiliteit. Het heeft geen overweldigende invloed op de gebruiker, maar het kan af en toe wel wat bruikbare hints of motivaties opleveren.
Hier is een eenvoudige manier om subtiliteit in een ontwerp te introduceren. Ironisch genoeg heeft het waarschijnlijk de meest gecompliceerde syntaxis die er is. Niet alleen dat, maar het heeft ook aanzienlijk verschillende syntaxen tussen browsers. Laten we kijken.
Gezien een vrij eenvoudig contactformulier (e-mail, bericht), hier is wat styling:
formulierinvoer [type = tekst], formulier textarea background-image: -webkit-gradient (lineair, linksonder, linksboven, kleurstop (0, rgb (255,255,255)), kleurstop (1, rgb (248,248,248) )); achtergrondafbeelding: -moz-lineaire gradiënt (midden onder, rgb (255,255,255) 0%, rgb (248,248,248) 100%); schetsen: none; rand: vast 1px #ccc;
Dat is nogal een volledige verklaring, nietwaar? En dat geldt alleen voor twee browsers!
Ik ga er niet in allemaal van de syntaxis, omdat anderen dat voor mij hebben gedaan. Raadpleeg "CSS-gradiënten begrijpen" op Nettuts + voor een beter begrip. Als je klaar bent, laten we het hebben over subtiliteit.
De gradiënt in deze tekstgebieden is bijna onbereikbaar. Als je echter met de CSS speelt en de grens haalt, verzeker ik je dat het er is.
Als je het nog steeds niet kunt zien in die tweede afbeelding, neem je je hoofd en verplaats je het naar de zijkant van je monitor, zodat je de monitor in een vrij steile hoek bekijkt. Zie het nu? Zo niet, dan weiger ik verantwoordelijk te worden gehouden. Ik zie het, dus je monitor moet kapot zijn. :)
Hoe dan ook, merk op hoe dicht de rgb-kleuren in de css zijn. De bovenkant van de tekstinvoer en het tekstgebied worden steeds lichter. Dit is een voorbeeld van zeer extreme subtiliteit. Tijdens het invullen van een formulier is het onwaarschijnlijk dat iemand deze gradatie ooit zal opmerken. Mensen vinden uw formulier misschien net iets aantrekkelijker dan andere; zelfs als ze niet weten waarom.
Wel, dat hebben we bijna het hele CSS3-artikel doorlopen zonder browserproblemen te bespreken. Hoe hebben we dat gedaan? Om te beginnen was er niet veel nadruk op code. Maar belangrijker was dat ik het beste voor het laatst bewaarde.
Als je de demo van deze tutorial in een webkit-browser bekijkt, vergelijk die dan met een Firefox-browser, dan zul je wat verschillen opmerken. Als u overstapt op IE, ziet u nog meer verschillen. Een aardig ding over het gebruik van subtiliteit is dat als het subtiele verschil er niet is, mensen het waarschijnlijk niet zullen merken. Met andere woorden, de kleurverandering in het eerste voorbeeld werkt nog steeds zonder de overgang; het is gewoon een beetje minder glad. Als het enige doel van het gebruik van nth-of-type was om te groeperen op basis van commonality, maakt geen enkele bezoeker zich zorgen als die groep er niet is. Het menu werkt nog steeds. En het verloop? Weet je nog hoe moeilijk je het moest proberen op te merken zelfs als er precies werd verteld waar het was?
Maak er een kans voor creativiteit, in plaats van een onoverkomelijke last.
Waarschijnlijk de meest rationele oppositie tegen de "verschillende looks in verschillende browsers" benadering van webdesign is dat er veel (misschien meest) klanten zullen het willen exact dezelfde website in elke belangrijke browser. Als er geen ruimte is om hierop in te spelen en je moet je elektriciteitsrekening betalen, doe dan alles wat je nodig hebt om die allerbelangrijkste afgeronde hoek in alle IE-versies terug te brengen tot het aanbreken van de dag.
Sommige klanten kunnen echter worden opgevoed en beïnvloed door een aantal voordelen van het hebben van één ontwerp op de ene en de andere ergens anders. Als u bijvoorbeeld een iets ander uiterlijk accepteert, kunt u de HTTP-verzoeken en de overtollige HTML-elementen drastisch verlagen, als er veel afbeeldingen worden gebruikt om randen en schaduwen te maken en wat dan ook. Of, als je op mij lijkt, heb je een aantal persoonlijke projecten en geniet je van een goede uitdaging (zoals het bieden van dezelfde "experience" -browser zonder altijd dezelfde lay-out te hebben). Of misschien heeft u twee verschillende ontwerpen die u echt leuk vindt en niet kunt beslissen welke u wilt implementeren. Hier is een mogelijkheid om de ene in de ene browser en de andere in een andere browser te implementeren, uit een enkele stylesheet verdreven.
Het algemene punt hier is dat de incompatibiliteit van browsers een is feit van het huidige web bij het gebruik van CSS3. Maak er dus een kans voor creativiteit van, in plaats van een onoverkomelijke last.
De subtiliteit hier is niet precies een ontwerp subtiliteit. In plaats daarvan is het meer een ontwerper subtiliteit. In mijn ervaring gebruiken de meeste mensen slechts één browser. Webprofessionals vergeten dat soms, omdat we drie versies van vijf verschillende browsers installeren op elke computer die we tegenkomen.
Dus, als een IE-only gebruiker op uw site gebeurt en de inhoud ervan duidelijk is en hij of zij geniet van de ervaring, bent u geslaagd in uw ontwerp. Als een andere gebruiker in Chrome op uw site overkomt en geniet van zijn ervaring en de inhoud duidelijk is, bent u geslaagd in uw ontwerp. En misschien waardeerde die bezoeker een paar extra bits. Kudos. Het belangrijkste is echter dat als je ooit de kans krijgt om te gaan zitten en dit tegelijkertijd ziet gebeuren, je erin geslaagd bent om wat subtiel plezier te hebben.
Accentsconagua