så CSS og HTML giver dig mulighed for at tegne og lave designarbejde, selvom de giver nogle vanskeligheder, da de ikke er sprog designet til dette specifikke formål. CSS er et akronym, der kommer fra det engelske, Cascading Style Sheets eller Cascading Style Sheets, og er skrevet i HTML-koden for at give struktur og stil til en webside.
til Lær at tegne med CSS og gennem HTML-kode er det vigtigt at have nogle forestillinger om, hvordan dette sprog fungerer, dets begrænsninger og omfang. At øve sig med CSS er meget sjovere, når du laver sjove opgaver, og få ting er sjovere end at tegne og skabe fede former ved hjælp af kodesprog.
Hvordan tegner man i HTML med CSS?
For at begynde at øve sig i at tegne i HTML ved hjælp af CSS, er den første ting at gøre at vælge et billede, der skal replikeres. Skal have simple geometriske begreber. På denne måde kan du bruge cirkler og firkanter til at give dine designs form selv gennem CSS.
den HTML tags De danner et sæt kasser gennem hele nettet. Derfor skal du starte med en hovedbeholder og begynde at løsrive din kreation derfra. Hvad vil du designe? I et af de mest udbredte eksempler lærer det, hvordan man tegner en sød og sjov bjørn ved hjælp af firkanter og cirkler. I hvert fald i starten, så bliver det mere komplekst.
Hvis du vil gøre det bjørnedesignStart for eksempel med en stor firkantet boks på 500 pixels og inde i formen laver du tegningen. Boksen er oprettet ved hjælp af et HTML-tag kendt som en div.
Begynd at se på tegningen, og analyser hvor mange kasser du skal lave. Det er også vigtigt at overveje, hvilke kasser der skal inde i hvilke kasser. Denne proces kan virke lidt mærkelig, når man overvejer, hvordan man tegner, men det hjælper at have en mere velordnet og overskuelig vej at arbejde på. Kasselayoutet skal være komplet, så du kan have en fuld ide om, hvor mange kasser du kan få brug for.
Definer farver på forhånd til tegning i CSS og HTML
Et af de vigtigste trin for at opnå et tilfredsstillende CSS-tegneresultat er valg af farver. På dette sprog identificeres farver med koder. Derfor skal du have dem allerede bestemt og bruge identifikationsvariabler for derefter hurtigt at vælge den korrekte kode. På denne måde kan du nemmere spore hver farve og hvilken boks de er placeret i.
Begynd at skabe og tegne med CSS i HTML
Fortsætter med ham eksempel på en tegning af en bjørn, laver vi den første hovedbeholder. Ifølge basisbilledet skal det være en cirkulær beholder. Vi vælger parameteren kant-radius 50% for at bestemme dens størrelse. Hvis du ønsker, at bjørnens ansigt skal centreres, skal du bruge flex-kommandoen og centerjustering for de lodrette og vandrette akser.
La hovedet er en oval div hvor alle komponenterne skal anbringes. Inde i denne div vil vi placere alle elementer med klasser, der tjener til eksplicit at beskrive delene: øje, næse, øre, mund. Denne klassedifferentiering hjælper med at gøre det nemmere at tildele specifikke stilarter til hver del.
nogle elementer gentage stil, for eksempel øjne og ører. Så du skal være specifik og angive, om det er venstre øje (øje-venstre) eller højre øje (øje-højre). Lav denne differentiering med hver komponent, der gentager en stilart. I CSS-sprog skal du bruge parametrene position:relative og position:absolute for at placere og identificere elementer korrekt. Vi kan bruge disse flag med hvert af elementerne i CSS, så placeringen på skærmen altid er korrekt og præcis. For at afstandene skal være nøjagtige, skal vi bruge de samme afstandsmål for begge parametre.
Det er ikke nemt at tegne med CSS og HTML
Muchos Webdesignere bruger evnen til at tegne med CSS som en måde at forvandle siden til et kunstnerisk lærred. Men sandheden er, at forslaget er ret komplekst, og resultaterne er langt fra de bedste. Det kan være et alternativ i specifikke situationer, men det kræver et avanceret vidensniveau og ender med at være upraktisk.
Som et eksempel, lav bare en firkant. Hvor programmer og sprog designet til tegning lader dig skabe figuren på få sekunder. I CSS skal du forme hver af parametrene ud fra sproget. Så du skal indstille stilen, give den form, generere bredden og længden, dybden og farverne. Alt dette gennem ord og parametre, der, hvis de ikke er perfekte, vil give et fejlagtigt resultat på din side.
Men selv med den kritik og de vanskeligheder, det giver, er der dem, der De vælger det til at lave noget grafik på deres websider. Du skal dog kende et par forskellige CSS-egenskaber og -funktioner, så vær forberedt på lidt af en indlæringskurve for at kunne producere fantastiske kunstværker.
Hvorfor tegne med CSS i HTML?
Det egentlige mål bag CSS tegne udfordring kan være årsagen til at blive ved med at prøve. Selvom denne type sprog ikke er beregnet til at lette tegning, er kapaciteten der, og den er levedygtig. Hackere og programmører, der er meget vidende om CSS, vælger ofte at tegne og skabe kunstværker ved hjælp af denne metode, simpelthen på grund af den udfordring, det giver.
Rundt omkring på internettet kan du finde alle slags gallerier med tegnestykker lavet ved hjælp af CSS. Hvis du vil prøve disse trin igen, eller hvis du bare vil have det sjovt og lære om dem, kan du tjekke denne artikel og andre forslag på fora og sociale medier.
De vigtigste overvejelser, når du tegner med CSS er:
- Du har ingen begrænsninger, da der ikke er regler for tegning med kode.
- Prøv at beholde din tegning med så lidt kode som muligt. På denne måde får du optimale resultater for din hjemmeside.
- Prøv at holde din tegning til kun én div.
- For at gå videre til mere kompleksitet, prøv at have ingen divs og kun en krop.