tant CSS i HTML permeten dibuixar i fer treballs de disseny, encara que presenten algunes dificultats ja que no són llenguatges pensats a aquest efecte en concret. CSS és una sigla que prové de l'anglès, Cascading Style Sheets o Fulls d'Estil a Cascada, i s'inscriuen al codi HTML per donar estructura i estil a una pàgina web.
Per a aprendre a dibuixar amb CSS ia través del codi HTML, és important tenir algunes nocions sobre el funcionament d'aquest llenguatge, les limitacions i els abasts. Practicar amb CSS és molt més amè quan es fan tasques divertides, i poques coses hi ha més divertides que dibuixar i aconseguir formes entretingudes mitjançant llenguatge de codi.
Com dibuixar HTML amb CSS?
Per començar a pràctica dibuixant en HTML mitjançant CSS, el primer que cal fer és seleccionar una imatge a replicar. Ha de tenir conceptes geomètrics simples. D'aquesta manera pots aconseguir mitjançant cercles i quadrats donar forma als teus dissenys encara a través de CSS.
Les etiquetes HTML formen un conjunt de caixes al llarg de tota la web. Per això cal començar amb un contenidor principal i des d'allà anar desprenent la teva creació. Què vols dissenyar? En un dels exemples més estesos, s'ensenya com dibuixar un ós tendre i divertit usant quadrats i cercles. Almenys al començament, després es torna més complex.
Si vas a fer el disseny de l'ós, per exemple, arrenca amb una gran caixa quadrada de 500 píxels i dins de la figura, faràs el dibuix. La caixa es crea mitjançant una etiqueta HTML coneguda com a div.
Comença a observar el dibuix, i analitza quantes caixes necessitaràs crear. També és important tenir en compte quines caixes van dins de quines altres. Aquest procés pot resultar una mica estrany en plantejar-se com es dibuixa, però ajuda a comptar amb una ruta més ordenada i també més clara per poder treballar. L'esquema en forma de caixes ha de ser complet, així podeu tenir una idea total del nombre de caixes que pots arribar a necessitar.
Definir els colors per endavant per dibuixar en CSS i HTML
Un dels passos més rellevants perquè el resultat d'un dibuix a CSS sigui satisfactori és triar els colors. En aquest llenguatge, els colors estan identificats amb codis. Per això, cal tenir-los ja determinats i fer servir variables d'identificació per després seleccionar ràpidament el codi encertat. D'aquesta manera podeu rastrejar més fàcilment cada color i en quina caixa s'ubiquen.
Començar a crear i dibuixar amb CSS en HTML
Seguint amb el exemple del dibuix d'un ós, farem el primer contenidor principal. Segons la imatge de base, ha de ser un contenidor circular. Triem el paràmetre border-radius 50% per determinar-ne la mida. Si voleu que la cara de l'osset estigui centrada, utilitzeu l'ordre flex i l'alineació central per als eixos vertical i horitzontal.
La cap (“head”) és un div ovalat on estaran allotjats tots els components. Dins aquest div col·locarem tots els elements amb classes que serveixin per descriure de forma explícita les parts: eye, nose, ear, mouth. Aquesta diferenciació per classes ajuda que sigui més simple assignar estils específics per a cada part.
Alguns elements repeteixen estil, per exemple els ulls i les orelles. Així que cal ser específics i indicar si és l'ull esquerre (eye-left) o l'ull dret (eye-right). Realitza aquesta diferenciació amb cada component que repeteixi un estil. En el llenguatge CSS, per posicionar i identificar correctament elements cal utilitzar els paràmetres position:relative i position:absolute. Possiblement utilitzem aquests indicadors amb cadascun dels elements a CSS, perquè la ubicació en pantalla sigui sempre la correcta i precisa. Perquè les distàncies siguin necessàries cal manejar les mateixes mesures de distància en ambdós paràmetres.
Dibuixar amb CSS i HTML no és fàcil
MOLTS dissenyadors web utilitzen la possibilitat de dibuixar amb CSS com una manera de convertir la pàgina en un llenç artístic. Però el cert és que la proposta és força complexa i els resultats disten de ser els millors. Pot ser una alternativa en situacions puntuals, però requereix un nivell de coneixement avançat i acaba resultant poc pràctic.
Com a exemple, només cal fer un quadrat. On programes i llenguatges pensats per a dibuix et deixen crear la figura en qüestió de segons. A CSS has de donar forma des del llenguatge a cadascun dels paràmetres. Així, has de fixar l'estil, donar-li forma, generar l'amplada i la llargada, la profunditat i els colors. Tot això mitjançant paraules i paràmetres que si no estan perfectes, donaran un resultat erroni a la teva pàgina.
Però encara amb les crítiques i dificultats que presenta, n'hi ha que ho trien per fer alguns gràfics a les seves pàgines web. Això sí, necessites conèixer diverses propietats i funcions CSS diferents, així que prepara't per a un procés una mica tediós i d'aprenentatge per poder treure grans obres d'art.
Per què dibuixar amb CSS en HTML?
El veritable objectiu darrere del desafiament de dibuixar amb CSS pot ser la raó darrere de continuar intentant-ho. Tot i que aquest tipus de llenguatge no està pensat per facilitar el dibuix, la capacitat és allà i és viable. Els hackers i els programadors que tenen el coneixement més gran de CSS, moltes vegades decideixen dibuixar i fer obres d'art amb aquesta modalitat simplement pel desafiament que això suposa.
Al voltant d'Internet, podeu trobar tot tipus de galeries amb peces de dibuix creades usant CSS. Si intentes repetir aquests passos, o si vols simplement divertir-te i aprendre'n, pots revisar aquest article i altres propostes en fòrums i espais de xarxes socials.
Les consideracions principals llavors en dibuixar amb CSS són:
- No teniu restriccions, ja que no hi ha regles per al dibuix amb codi.
- Intenta que el teu dibuix tingui la menor quantitat de codi possible. D'aquesta manera, obtindràs resultats òptims per a la teva web.
- Tracta que el teu dibuix tingui un sol div.
- Per avançar a més complexitat, tracta que no hi hagi cap div i només un body.