Content
- 01. Coincideix les imatges amb els esquemes de colors del lloc
- 02. Compartiu espai de manera uniforme a l'última fila d'una quadrícula
- 03. Creeu animacions de partícules amb box-shadow
- 04. Animar els poliedres amb transformades
- 05. Master ’calc ()’ per al posicionament
- 06. Feu que el model de caixa saneixi amb "box-sizing"
- 07. Centra verticalment amb CSS
- 08. Orientació a un banc d'objectes relacionats
- 09. Control de guionet
- 10. Aprofiteu els modes d’escriptura
- 11. Utilitzeu gradients de maneres inusuals
- 12. Utilitzeu la combinació de cadenes als enllaços
- 13. Feu que FOUT us funcioni
- 14. Exploreu SVG per obtenir fons
- 15. Centreu els usuaris amb transicions 3D
- 16. Crea menús circulars amb CSS i matemàtiques
- 17. Anima els enllaços a sobre
- 18. Feu animacions senzilles de fotogrames clau
- 19. Creeu efectes 3D flotants amb ombres
- 20. Actualitzeu els elements de la pàgina amb ': target'
- 21. Proporciona comentaris amb animacions subtils
- 22. Prepareu-vos per animar
- 23. Humanitzar els camps d’entrada
- 24. Posa en pausa i reprodueix animacions CSS
- 25. No utilitzeu variables CSS
En algun moment, amb qualsevol tecnologia, hi ha la sensació que s’ha fet pràcticament qualsevol cosa que es pugui fer. Quan alguna cosa ja no és tan nou i brillant, l'interès disminueix i es crida l'atenció sobre la següent gran cosa. Aquest ha estat sovint el cas de la indústria web, que és propensa a emocionar-se terriblement per un cert aspecte de la tecnologia abans, tard o d’hora, de relegar-la al món.
Quan va aparèixer CSS per primera vegada, va ser revolucionari i amb el pas del temps ha anat evolucionant fins a permetre als dissenyadors crear dissenys de pàgines web flexibles, ben elaborats i bonics. Darrerament, però, hi ha hagut la suggerència de diversos àmbits que CSS està cansat i potser el seu temps al sol ha desaparegut.
Vull mostrar que encara hi ha molta il·lusió i vida al món de CSS, ja sigui en propietats d’avantguarda que potser encara no heu explorat o mitjançant l’ús d’un aspecte de CSS d’una manera que no havíeu tingut en compte anteriorment.
Aquests són alguns consells d’alguns dels millors experts en CSS de la indústria.
(Nota: algunes tècniques d’aquesta característica són d’avantguarda i potser no s’admeten totalment a tots els navegadors. Proveu a fons i assegureu-vos que existeixen solucions de seguretat abans de fer qualsevol treball en directe.)
01. Coincideix les imatges amb els esquemes de colors del lloc
Christopher Schmitt, organitzador de conferències
Les conferències tenen els seus propis esquemes de colors i, amb molts altaveus, el flux de treball per gestionar els retrats pot ser complex. L’aplicació manual de filtres no s’amplia i depèn de que tingueu accés, per exemple, a una acció específica de Photoshop. Ara faig servir PNG en escala de grisos d’alta resolució i afegeixo tons mitjançant filtres CSS. Això em permet relacionar qualsevol retrat amb l'esquema d'un esdeveniment i també reutilitzar imatges en diversos temes. Només necessito una nova regla CSS per a cadascuna. Veure una demostració.
02. Compartiu espai de manera uniforme a l'última fila d'una quadrícula
Stephen Hay, dissenyador i autor
Si teniu un nombre desconegut d’elements que es mostraran a una quadrícula, podeu utilitzar Flexbox per dividir l’última fila de manera uniforme. Per tant, si només hi ha un element, ocuparà tota la fila; si hi ha dos elements, la fila es dividirà per la meitat, etc. Veure una demostració.
03. Creeu animacions de partícules amb box-shadow
Ana Tudor, codificadora i fanàtica de les matemàtiques
Mitjançant la barreja ombra de caixa amb algunes matemàtiques i Sass, podeu dibuixar corbes 2D, emular el moviment 3D i crear animacions de partícules esbojarrades que tothom confondrà amb les de lona. Vegeu una demostració i una altra.
04. Animar els poliedres amb transformades
Ana Tudor, codificadora i fanàtica de les matemàtiques
Probablement heu vist polígons CSS purs creats amb vores, però tenim una eina molt més potent a transformar propietat. Encadenar i aplicar transformacions en elements imbricats ens permet crear polígons complexos amb fons d’imatges o vores i interiors transparents. Mitjançant transformacions 3D, podem combinar aquestes formes 2D en poliedres i fer que els sòlids es fusionin, es desplegin, exploti o es recombinin d’una manera que es confongui fàcilment amb WebGL. Veure una demostració.
05. Master ’calc ()’ per al posicionament
Ana Tudor, codificadora i fanàtica de les matemàtiques
jo estimava calc () des del moment que el vaig descobrir. És útil per domar marges, farcits o dimensions, i pot ser un salvavides quan s’utilitza per posicionar o dimensionar fons, dins de degradats o transformacions, i combinar-los no només amb les mateixes unitats antigues, sinó també amb les noves i fresques finestres.
06. Feu que el model de caixa saneixi amb "box-sizing"
Sawyer Hollenshead, dissenyador i dissenyador dels Oak Studios
Ús mida de caixa per salvar el seny. Sense ell, un element amb una amplada definida de 250 px i 25 px de farciment es combina amb una amplada de 300 px, cosa que dificulta la barreja de píxels i percentatges. Amb mida de caixa:caixa de fronteres les vores i el farcit es col·loquen dins de l'amplada definida.
07. Centra verticalment amb CSS
Trent Walton, fundador de Paravel
Històricament, ha estat difícil centrar verticalment alguna cosa amb CSS, com ara si teniu una imatge amb text adjacent que voleu alinear verticalment. En lloc de trepitjar i maleir, utilitzeu Flexbox per fer front als problemes d'alineació. Veure una demostració.
08. Orientació a un banc d'objectes relacionats
Jonathan Smiley, soci de Zurb i cap de disseny
Afaiteu el pes de la línia CSS mitjançant selectors d’atributs aproximats en noms de classes, per orientar-vos a un gran banc d’objectes relacionats, en lloc d’adjuntar atributs comuns a cada classe. Per exemple ... [class * = "- block-grid-"] {} ... s'orientaria a: .small-block-grid-3 .large-block-grid-5
09. Control de guionet
Savid Storey, defensor de la web oberta
La divisió es dóna per descomptada a la impressió, i alguns desenvolupadors utilitzen el fitxer guions propietat en línia, però pocs són conscients d'altres propietats que ofereixen un control més precís. Si no aneu amb compte, obteniu escales de guionetatge on s’utilitzen guionets en diverses línies. Una regla general no és més que dues seguides, que podeu controlar utilitzant guió-límit-línies. A més, guionet-límit-caràcters us permet especificar la longitud mínima d'una paraula que es dividirà en guionets, juntament amb el nombre mínim de caràcters abans i després del salt del guionet.
10. Aprofiteu els modes d’escriptura
David Storey, defensor de la web oberta
Els modes d’escriptura permeten definir la direcció en què flueix el text. Alguns textos de l'Àsia oriental s'escriuen verticalment, les línies creixen de dreta a esquerra, especificades amb mode d'escriptura: vertical-rl (tb-rl a IE). El text vertical no s’utilitza realment als sistemes d’escriptura europeus, però pot ser útil per als encapçalaments de les taules quan es limita l’espai horitzontal.
11. Utilitzeu gradients de maneres inusuals
Ruth John, dissenyadora
Els degradats de fons poden tenir un aspecte fantàstic quan s’utilitzen amb vores i vinyetes. Faig servir tant al meu bloc com amb un preprocessador per trucar a un mixin amb el codi reutilitzat, per no repetir-lo manualment. No us deixeu superbojos perquè els degradats poden ser molt pesats en processador. SCSS mixin per a pics de llista:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30 px, transparent 31 px); }
12. Utilitzeu la combinació de cadenes als enllaços
Ruth John, dissenyadora
Al meu bloc, he utilitzat selectors d’atributs CSS amb concordança de cadenes a les icones socials d’estil. Aquests apareixen a tot el meu bloc, de vegades amb text i de vegades sense, però sempre amb una icona. Per definir l'estil de l'enllaç correcte amb la icona social correcta, faig servir una coincidència de cadenes al fitxer href atribut de l'element d'ancoratge. jo utilitzo *= doncs el href a l'element d'ancoratge només ha de contenir la cadena que he especificat.
/ * per a tots els enllaços socials * / .social a: before {display: inline-block; farcit a la dreta: 30 px; font-family: ‘FontAwesome’;} / * Cada enllaç específic * / .social a [href * = "twitter"]: abans de {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: abans de {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: abans de {content: " f09e"; color: # b47742;}
13. Feu que FOUT us funcioni
Jason Pamental, director de disseny H + W
El web es basa en la premissa que hauria d’oferir contingut, fins i tot si el navegador no pot mostrar el bling. Els tipus de lletra web de càrrega lenta poden resultar frustrants, el FOUT (Flash Of Unstyled Text) discorre mentre la navegació i el text es reflueixen mentre es descarreguen els tipus de lletra. Google i Typekit proporcionen una resposta: el carregador de fonts web. Si injecteu classes en una pàgina, en funció de l’estat de càrrega dels tipus de lletra, podeu definir recursos alternatius amb aquestes classes per mantenir la refluxa al mínim, eliminant també la síndrome de contingut invisible de WebKit. Veure una demostració.
14. Exploreu SVG per obtenir fons
Emil Björklund, desenvolupador web inUse
Els únics navegadors que ara no tenen compatibilitat amb SVG són IE8 i versions posteriors i Android 2 WebKit, de manera que és possible utilitzar SVG per a fons en CSS, especialment juntament amb una solució alternativa de PNG, com Grunticon. El SVS es pot dissenyar mitjançant CSS, i hi ha interessants descàrregues de les propietats CSS (filtres!) Del SVG amb els quals podem jugar aplicats a HTML.
15. Centreu els usuaris amb transicions 3D
Emil Björklund, desenvolupador web inUse
Utilitzant transformacions 3D i fent ús del fitxer dimensió z a les interfícies d'usuari pot ser realment útil, sobretot per amagar / mostrar o col·lapsar / ampliar contingut. També és molt fàcil tenir una alternativa a una transició 2D, o cap transició, en aquestes situacions. És un àmbit on una millora progressiva pot recórrer un llarg camí.
16. Crea menús circulars amb CSS i matemàtiques
Sara Soueidan, desenvolupadora de frontend
Els menús circulars són populars a les aplicacions mòbils i podeu utilitzar transformacions i transicions CSS per crear un menú circular senzill. Aquest menú es pot modificar i personalitzar per crear un menú d'obertura cap amunt o cap avall, també. No hi ha cap manera directa a CSS de traduir un element en diagonal, però podeu utilitzar el valor del radi del cercle sobre el qual voleu situar els elements i aplicar una regla matemàtica senzilla per calcular els valors de traducció horitzontals i verticals per passar a translateX () i traduirY () funcions. D’aquesta manera, acabaràs amb un diagonal traducció per moure els elements del menú a les posicions correctes del cercle. L'esdeveniment de clic que tanca o obre el menú es pot gestionar mitjançant JavaScript o podeu fer un pas més i tenir un menú només CSS mitjançant un tall de casella de selecció CSS. A la meva demostració, faig servir JavaScript i l'API classList HTML5, que no s'admeten a tots els navegadors, de manera que haureu de veure la demostració en un navegador modern perquè funcioni o descomenteu el codi jQuery en lloc d'utilitzar l'API classList codi.
Consulteu una demostració i un tutorial complet. Exemple de pirateria CSS Checkbox.
17. Anima els enllaços a sobre
Paul Lloyd, dissenyador d’interaccions de The Guardian
No s’ha de confiar en els estats del cursor per fer funcionar una acció ni proporcionar informació important, però encara podeu millorar les interfícies per als usuaris basats en el ratolí. A 24ways.org, revelem títols d’articles quan passeu el cursor per sobre dels enllaços de la navegació anterior / següent. Això es va aconseguir creant un fitxer :: després pseudo-element que conté contingut generat derivat del valor de dades- atribut, amb una transició CSS aplicada per fer-lo lliscar a la vista en passar el cursor. Veure una demostració.
18. Feu animacions senzilles de fotogrames clau
Paul Lloyd, dissenyador d’interaccions de The Guardian
A 24ways.org, vam afegir solapes de cantonada animades als resums, que es van obrir en passar el cursor. Això es va fer combinant el fitxer @ clausframes regla amb la propietat d'animació, alterant la posició d'una imatge de fons per aconseguir una animació basada en sprite. El truc és declarar el nombre de fotogrames que teniu al vostre sprite d'animació amb el steps () valor. Veure una demostració.
19. Creeu efectes 3D flotants amb ombres
Catherine Farman, desenvolupadora de Happy Cog
Un projecte recent requeria una foto de producte flotant amb una ombra rodona a sota, creant un efecte 3D que sortís de la pantalla. L'ombra utilitza diverses funcions CSS3: radi de frontera transparència alfa i ombra de caixa. Funciona bé per a les quadrícules de productes, per mostrar imatges en un heroi de la pàgina d'inici o per a qualsevol disseny capritxós amb una inclinació skeuomorfa. Veure una demostració.
20. Actualitzeu els elements de la pàgina amb ': target'
Simon Madine, desenvolupador web sènior de HeRe
CSS no és un llenguatge de programació en el sentit habitual, però encara podeu fer coses intel·ligents sense tornar a JavaScript. Per exemple, el fitxer :objectiu La pseudoclasse s'aplica als elements que són l'objectiu d'un enllaç en què s'ha fet clic.
Podeu utilitzar-lo per definir l’estat d’una pàgina, orientar-vos a un pare o mare que contingui molts elements i els vostres enllaços es converteixen en un mitjà per controlar l’aspecte i el disseny de tots els nens amb un sol clic. Veure una demostració.
21. Proporciona comentaris amb animacions subtils
Neil Renicker, dissenyador i desenvolupador
Pseudoelements CSS ::abans i :: després juntament amb les transicions CSS, poden permetre una animació agradable que proporciona subtils comentaris als usuaris del ratolí. Per exemple, creeu una fletxa CSS dins d'un pseudo-element, apliqueu una transició al pseudo-element (transició: tots .15 s de facilitat d'entrada;) i, a continuació, afegiu un simple canvi de disseny al fitxer : planegeu pseudo-classe (com ara modificar marge superior). Veure una demostració.
22. Prepareu-vos per animar
Paul Lewis, codificador i membre de l'equip de relacions amb els desenvolupadors de Chrome
Si ho heu fet servir -webkit-transform: translateZ (0) per fer màgicament les vostres pàgines més ràpides, el hack, que en molts navegadors simplement crea una nova capa de compositor, se substitueix per animarà. Aviat podreu indicar al navegador què voleu canviar sobre un element (la seva posició, mida, contingut o posició de desplaçament) i el navegador aplicarà l’optimització adequada sota el capó. Més informació.
23. Humanitzar els camps d’entrada
Yaron Schoen, fundador de Made For Humans
Si afegiu animacions ràpides a elements amb els quals els usuaris interactuen, la interfície se sent menys informàtica. Amb els camps d’entrada, proveu de posar un trucada de transició dins, de manera que cada vegada que el centreu o el desenfoqueu, hi ha una transició suau.
input, textarea {-moz-transition: all-out 0.2s; -o-transició: tots els 0,2 s faciliten; -webkit-transition: tots els 0,2 s faciliten; -ms-transition: tots els 0,2 s faciliten; transició: tots els 0,2 s faciliten;
24. Posa en pausa i reprodueix animacions CSS
Val Head, dissenyador i consultor
Podeu "posar en pausa" i "reproduir" l'animació CSS canviant-ne la animació-joc-estat propietat. Si la configureu com a "en pausa", s'aturarà l'animació fins que no canvieu animació-joc-estat a corrent, per exemple, a sobre.
.animating_thing {animació: spin 10s lineal infinit; animació-joc-estat: en pausa; }. animating_thing: passeu el cursor {animation-play-state: running; }
25. No utilitzeu variables CSS
Dave Shea, dissenyador i autor
Finalment aconseguim variables CSS, per exemple, per escriure una vegada el valor hexadecimal d’un color i fer-ne referència a través d’un full d’estils. Però les especificacions oficials són detallades, afegeixen complexitat sintàctica, ofereixen una funcionalitat decebedora i, en gran part, no són compatibles amb la majoria dels navegadors. En una època en què Sass és molt popular i va més enllà de variables amb una lògica de programació potent com funcions personalitzades i declaracions if / else, les especificacions oficials són molt curtes.
Amb sort, aquests consells principals han renovat la vostra visió de CSS i les possibilitats que representa en el desenvolupament i disseny web. No us oblideu de provar a fons cap d’aquestes tècniques per comprovar l’assistència del navegador abans de publicar qualsevol treball.
Paraules: Craig Grannell Il·lustració: Mike Chipperfield
Aquest article va aparèixer originalment al número 253 de la revista net.
