tako CSS i HTML vam omogućavaju da crtate i radite dizajn, iako predstavljaju određene poteškoće jer nisu jezici dizajnirani za ovu specifičnu svrhu. CSS je akronim koji dolazi iz engleskog, Cascading Style Sheets ili Cascading Style Sheets, a napisan je u HTML kodu kako bi dao strukturu i stil web stranici.
para Naučite crtati pomoću CSS-a i kroz HTML kod, važno je imati neke pojmove o tome kako ovaj jezik funkcioniše, njegovim ograničenjima i opsegom. Vježbanje sa CSS-om je mnogo ugodnije kada radite zabavne zadatke, a malo stvari je zabavnije od crtanja i stvaranja cool oblika koristeći jezik kodiranja.
Kako crtati u HTML-u sa CSS-om?
Da biste počeli vježbati crtanje u HTML-u pomoću CSS-a, prvo što trebate učiniti je odabrati sliku za repliciranje. Mora imati jednostavne geometrijske koncepte. Na ovaj način možete koristiti krugove i kvadrate da date oblik svojim dizajnima čak i kroz CSS.
u HTML oznake Oni formiraju set kutija kroz čitavu mrežu. Zato morate početi s glavnim kontejnerom i od njega početi odvajati svoju kreaciju. Šta želite dizajnirati? U jednom od najrasprostranjenijih primjera, uči kako nacrtati slatkog i smiješnog medvjeda koristeći kvadrate i krugove. Barem na početku, onda postaje složenije.
Ako ćete to učiniti dizajn medvjedaNa primjer, počnite s velikom kvadratnom kutijom od 500 piksela i unutar oblika ćete napraviti crtež. Okvir se kreira pomoću HTML oznake poznate kao div.
Počnite da gledate crtež i analizirajte koliko ćete kutija trebati da napravite. Također je važno uzeti u obzir koje kutije ulaze u koje kutije. Ovaj proces može izgledati pomalo čudno kada razmišljate o tome kako crtati, ali pomaže da imate uređeniji i jasniji put za rad. Izgled kutije bi trebao biti potpun tako da možete imati potpunu ideju o tome koliko vam kutija može trebati.
Definirajte boje unaprijed za crtanje u CSS-u i HTML-u
Jedan od najvažnijih koraka za postizanje zadovoljavajućeg rezultata CSS crtanja je odabir boja. U ovom jeziku, boje se identifikuju kodovima. Stoga ih morate imati već određene i koristiti identifikacijske varijable kako biste brzo odabrali ispravan kod. Na ovaj način možete lakše pratiti svaku boju i u kojoj kutiji se nalaze.
Počnite kreirati i crtati pomoću CSS-a u HTML-u
Nastavljajući s njim primjer crteža medvjeda, napravićemo prvi glavni kontejner. Prema osnovnoj slici, to mora biti kružni kontejner. Odabiremo parametar border-radius 50% da odredimo njegovu veličinu. Ako želite da lice medvjeda bude centrirano, koristite naredbu flex i poravnanje centra za vertikalnu i horizontalnu os.
La glava je ovalni div gde će biti smeštene sve komponente. Unutar ovog diva smjestit ćemo sve elemente sa klasama koje služe da eksplicitno opisuju dijelove: oko, nos, uho, usta. Ova diferencijacija klasa olakšava dodeljivanje specifičnih stilova svakom delu.
Neke elementi ponavljaju stil, na primjer oči i uši. Dakle, morate biti konkretni i naznačiti da li je to lijevo oko (oko-lijevo) ili desno oko (oko-desno). Napravite ovu diferencijaciju sa svakom komponentom koja ponavlja stil. U CSS jeziku, za pravilno pozicioniranje i identifikaciju elemenata morate koristiti parametre position:relative i position:apsolute. Ove zastavice možemo koristiti sa svakim elementom u CSS-u, tako da je lokacija na ekranu uvijek tačna i precizna. Da bi udaljenosti bile tačne, moramo koristiti ista mjerenja udaljenosti za oba parametra.
Crtanje pomoću CSS-a i HTML-a nije lako
mnogi Web dizajneri koriste mogućnost crtanja pomoću CSS-a kao način da se stranica pretvori u umjetničko platno. Ali istina je da je prijedlog prilično složen i da su rezultati daleko od najboljih. To može biti alternativa u određenim situacijama, ali zahtijeva napredni nivo znanja i na kraju je nepraktično.
Kao primjer, samo napravite kvadrat. Gdje vam programi i jezici dizajnirani za crtanje omogućavaju stvaranje figure u nekoliko sekundi. U CSS-u morate oblikovati svaki od parametara iz jezika. Dakle, morate postaviti stil, dati mu oblik, generirati širinu i dužinu, dubinu i boje. Sve to kroz riječi i parametre koji će, ako nisu savršeni, proizvesti pogrešan rezultat na vašoj stranici.
Ali čak i uz kritike i poteškoće koje ona predstavlja, ima onih koji Oni ga biraju da bi napravili neke grafike na svojim web stranicama. Ipak, morate znati nekoliko različitih CSS svojstava i funkcija, stoga budite spremni na malo krivulje učenja da biste mogli proizvesti sjajna umjetnička djela.
Zašto crtati sa CSS-om u HTML-u?
Pravi cilj iza CSS izazov za crtanje može biti razlog zašto pokušavate. Iako ova vrsta jezika nije namijenjena da olakša crtanje, sposobnost je tu i izvodljiva. Hakeri i programeri koji dobro poznaju CSS često biraju da crtaju i kreiraju umjetnička djela koristeći ovu metodu jednostavno zbog izazova koji ona predstavlja.
Na internetu možete pronaći sve vrste galerija sa crtežima kreiranim pomoću CSS-a. Ako želite ponovo isprobati ove korake ili se samo želite zabaviti i naučiti o njima, možete pogledati ovaj članak i druge prijedloge na forumima i društvenim mrežama.
Glavna razmatranja kada crtate pomoću CSS-a su:
- Nemate ograničenja, jer ne postoje pravila za crtanje kodom.
- Pokušajte zadržati svoj crtež sa što manje koda. Na ovaj način ćete dobiti optimalne rezultate za svoju web stranicu.
- Pokušajte zadržati svoj crtež na samo jednom div.
- Da biste prešli na veću složenost, pokušajte da nemate divove i samo tijelo.