Gjenerator CSS3 në internet për krijimin e efekteve grafike të lezetshme dhe marrjen e kodit të tyre CSS. Ju mund të ndryshoni veçmas stilet për gjendje të ndryshme si p.sh. :hover, :active, etj. Ju merrni një ndërfaqe për krijimin e hijeve komplekse, gradientëve, efekteve 3D, efekteve të tekstit dhe shumë më tepër. Projekti ka galerinë e vet të efekteve nga e cila mund të filloni zhvillimin tuaj. Gjëja më e mirë e projektit është se ju mund të merrni stile për një element të vetëm, të tilla si një hije ose një gradient.

Kur vizitojmë për herë të parë sitin, na ofrohet të krijojmë një shabllon për një fushë hyrëse, buton, bllok ose të zgjedhim një shabllon të gatshëm nga galeria e projektit. Le të fillojmë me diçka të thjeshtë, si një galeri formash gjeometrike. Zgjidhni shenjën Yin-Yang nga galeria dhe klikoni "Merr kodin" në këndin e sipërm të djathtë:

Do të na tregohet CSS e gatshme për zhvillimin aktual, si dhe një shembull i kodit HTML. Në galerinë e projektit ka më shumë se 20 shabllone për forma të ndryshme CSS dhe, natyrisht, ju mund të krijoni tuajin.

Duke gërmuar nëpër seksionet e galerisë, ne shohim butona, fusha teksti, efekte direkt për tekstin, format e sipërpërmendura dhe grupet e gradientëve. Le të luajmë me efektet e tekstit:

website - wow është 3D!

Duhet të them që CSS-ja e krijuar është çuditërisht shumë e pastër dhe e lexueshme, gjë që është shumë e këndshme. Le të shohim një buton të bukur:

faqe interneti me butona të lezetshëm

Veçoritë shtesë përfshijnë ruajtjen e gjendjes tuaj në hapësirën lokale të shfletuesit. Nëse e mbyllni aksidentalisht skedën, atëherë herën tjetër që të hyni në sajt, të gjitha ndryshimet tuaja do të mbeten me ju.

Kur përdorni fontet e personalizuara me fontet e Google, EnjoyCSS i shton ato automatikisht në shembullin HTML. Në rastin tim për tekstin dhe butonin duket kështu:

CSS përfundimtare është mjaft voluminoze, kështu që unë e paraqes atë vetëm në fund të artikullit:

Yin Yang (
float:majtas;
gjerësia: 96 px;
lartësia: 48 px;
pozicioni: i afërm;
kufiri: 2px solid #f81;
gjerësia e kufirit të poshtëm: 50 px;
-webkit-border-radius: 100%;
kufi-rrezja: 100%;
ngjyra: rgba(0,0,0,1);
-o-tekst-mbushje: klip;
tekst-mbushje: klip;
-webkit-transform: rrotullojZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
transformimi: rrotullojZ(-45deg) shkalleX(1) shkalleY(1) shkalleZ(1) ;
transformimi-origjina: 50% 50% 0;

Yin-yang::para (
gjerësia: 12 px;
lartësia: 12 px;
pozicioni: absolut;
përmbajtja: "";
lartë: 50%;
majtas: 0;
kufiri: 18px solid #f81;
-webkit-border-radius: 100%;
kufi-rrezja: 100%;
font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
ngjyra: rgba(0,0,0,1);
-o-tekst-mbushje: klip;
tekst-mbushje: klip;
sfond: rgba (255,255,255,1);
tekst-hije: asnjë;

-webkit-transform-origjina: 50% 50% 0;
transformimi-origjina: 50% 50% 0;
}

Yin-yang::pas (
gjerësia: 12 px;
lartësia: 12 px;
pozicioni: absolut;
përmbajtja: "";
lartë: 50%;
majtas: 50%;
kufiri: 18 px solid rgba (255,255,255,1);
-webkit-border-radius: 100%;
kufi-rrezja: 100%;
font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
ngjyra: rgba(0,0,0,1);
-o-tekst-mbushje: klip;
tekst-mbushje: klip;
sfond: #f81;
tekst-hije: asnjë;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transformimi: shkallaX(1) shkallaY(1) shkallaZ(1);
-webkit-transform-origjina: 50% 50% 0;
transformimi-origjina: 50% 50% 0;
}

Enjoy-css-3dtext (
kursori: treguesi;
kufiri: asnjë;
font: normal normal normal 72px/normal "Passero One", Helvetica, sans-serif;
ngjyra: rgba(255,255,255,1);
text-align: qendër;
-o-tekst-mbushje: klip;
tekst-mbushje: klip;
text-hije: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb 5,80,5,5,1 ,170,1 70) , 0 6px 1px rgba(0 ,0,0,0,0980392) , 0 0 5px rgba(0,0,0,0,0980392) , 0 1px 3px rgba(0,0,0,0,298039) , 0 3px 5px (0,0,0,0,rgba 0,2) , 0 5px 10px rgba(0,0,0,0,247059) , 0 10px 10px rgba(0,0,0,0,2) , 0 20px 20px rgba(0,0,0,0,0,14902)
-webkit-tranzicioni: të gjitha 300ms kub-bezier(0.42, 0, 0.58, 1);
-moz-tranzicioni: të gjitha 300ms kub-bezier(0.42, 0, 0.58, 1);
-o-tranzicioni: të gjitha 300ms kub-bezier(0.42, 0, 0.58, 1);
tranzicioni: të gjitha 300ms kub-bezier(0.42, 0, 0.58, 1);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transformimi: shkallaX(1) shkallaY(1) shkallaZ(1);
-webkit-transform-origjina: 50% 50% 0;
transformimi-origjina: 50% 50% 0;
}

Enjoy-css-3dtext:hover (
ngjyra: rgba(169,214,169,1);
text-hije: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 5,5,5, 0 4px 5,0 0 rgba (2 55,255,255 ,1) , 0 6px 1px rgba(0,0,0,0,0980392) , 0 0 5px rgba(0,0,0,0,0980392) , 0 1px 3px rgba(0,0,0,0,0,0,0,0) rgba (0,0,0,0,2) , 0 -5 px 10 px rgba(0,0,0,0,247059) , 0 -7px 10px rgba(0,0,0,0,2) , 0 -15px 20px rgba(0,0 , 0,0,14902);
-webkit-tranzicioni: të gjitha 200ms kub-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-tranzicioni: të gjitha 200ms kub-bezier(0.42, 0, 0.58, 1) 10ms;
-o-tranzicioni: të gjitha 200ms kub-bezier(0.42, 0, 0.58, 1) 10ms;
tranzicioni: të gjitha 200ms kub-bezier(0.42, 0, 0.58, 1) 10ms;
}

Butoni i komenteve (
ekrani: inline-block;
noton: majtas;
pozicioni: i afërm;
kursori: treguesi;
marzhi: 0 2% 0 0;
mbushje: 12px 22px;
vërshoj: i fshehur;
kufiri: asnjë;
font: normal normal, bold 1.6em/normal "Syncopate", Helvetica, sans-serif;
ngjyra: #ecf0f1;
-o-tekst-mbushje: klip;
tekst-mbushje: klip;


-kit në internet-
sfond-origjina: padding-box;
sfond-klipi: kuti-kufi;
madhësia e sfondit: automatik automatik;
-webkit-box-hije: 0 10px 0 0 rgba(178,49,49,1) ;
kuti-hije: 0 10px 0 0 rgba(178,49,49,1) ;
text-hije: 0 0 0 rgb(196,80,78) , 1px 1px 0 rgb(196,80,78) , 2px 2px 0 rgb(196,80,78) , 3px 3px 0 rgb(196,196, ) , 4 pik. 8 pik. 0 rgb(196,80,78) , 13 px 13 px 0 rgb(196,80,78) , 14 px 14 px 0 rgb(196,80,78) , 15 pik. (196,80,78) , 17 pik. ,80,78) , 21px 21px 0 rgb(196,80,78) , 22px 22px 0 rgb(196,80,78) , 23px 23px 0 rgb(196,80,78) , 6,80,78) 0 rgbx1, 6024 ) ,78) , 25px 25px 0 rgb(196,80,78) , 26px 26px 0 rgb(196,80,78) , 27px 27px 0 rgb(196,80,78) , 80,8px , 28px 78) ) , 29px 29px 0 rgb(196,80,78) , 30px 30px 0 rgb(196,80,78) , 31px 31px 0 rgb(196,80,78) , 30px 30,32x ) , 33 pik. 37 pik. 0 rgb (196,80,78) , 42 px 42 px 0 rgb(196,80,78) , 43 px 43 px 0 rgb(196,80,78) , 44 px 44 px 0 rgb (196,80,80,4, rgb) (196 ,80,78) , 46 pik. , 80), 78,0.980392), 2px 2px 0 rgba (196,80,78,0.960784), 3px 3px 0 rgba (196,80,78,0.941176), 4px 4px 0 rgba (196,80,78,0.92199), , 5 pik. , 80,78, 0.843137), 9px 9px 0 rgba (196,80,78,0.819608), 10px 10px 0 rgba (196,80,78.0.8), 11px 11px 0 rgba (196.80.78.780392), 12px 12px 0. RGBA (196,80,78,0.760784), 13PX 13PX 0 RGBA (196,80,78,0,741176), 14PX 14PX 0 RGBA (196,80,78,0,721569, GBA 721569), 15X1501 961) , 16 pik. 0 rgba (1 96 ,80,78,0,619608) , 20 px 20px 0 rgba(196,80,78,0,6) , 21px 21px 0 rgba(196,80,78,0,580392) , 22px 608,78,22px 608,78,22px. , 23 pik. rgba (196,8 0 ,78,0,478431) , 27 pikselë 27 pikselë 0 rgba(196,80,78,0,458824) , 28 pikselë 28 pikselë 0 rgba(196,80,78,0,439216) , 290,8 , rgba 419608), 30px 30px 0 RGBA (196,80,78,0,4), 31px 31px 0 RGBA (196,80,78,0,380392), 32px 32px 0 RGBA (198.80X30.GBA), 198.80X30. 196, 80,78,0,341176) , 34 px 34 pikselë 0 rgba(196,80,78,0,317647) , 35 px 35 px 0 rgba(196,80,78,0,298039) , 36,80,78, rgba (196,80,78,0,317647) 31), 37 px 37 pik. 6, 80, 78,0,2 , 41 px 41 px 0 rgba(196,80,78,0,180392) , 42px 42px 0 rgba(196,80,78,0,156863) , 43px 43px 174,190 px 44pX 0 RGBA (196,80,78,0,117647), 45PX 45PX 0 RGBA (196,80,78,0,0980392), 46PX 46PX 0 RGBA (196,80,78,0,07843PX0, 46,80,78,0,07843PX014), 46,80,78,0,07843PX00, 46PX 0,0.07843PX014, 45PX . 0588235) , 48px 48px 0 rgba(196,80,78,0.0392157) , 50px 50px 0 rgba(196,80,78,0) ;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transformimi: shkallaX(1) shkallaY(1) shkallaZ(1);
-webkit-transform-origjina: 50% 50% 0;
transformimi-origjina: 50% 50% 0;
}

Butoni i komenteve: rri pezull (
text-align: qendër;
sfond: -webkit-linear-gradient(-90deg, #ce6161 0, #ef6664 100%);
sfond: -moz-linear-gradient(180deg, #ce6161 0, #ef6664 100%);
sfond: linear-gradient(180deg, #ce6161 0, #ef6664 100%);
sfond-pozicion: 50% 50%;
sfond-origjina: padding-box;
-webkit-background-clip: border-box;
sfond-klipi: kuti-kufi;
-webkit-background-size: auto auto;
madhësia e sfondit: automatik automatik;
}

Butoni i komenteve: aktiv (
sipër: 5px;
sfond: -webkit-linear-gradient(-90deg, #ff8583 0, #ff5350 100%);
sfond: -moz-linear-gradient(180deg, #ff8583 0, #ff5350 100%);
sfond: linear-gradient(180deg, #ff8583 0, #ff5350 100%);
sfond-pozicion: 50% 50%;
-webkit-background-origin: padding-box;
sfond-origjina: padding-box;
-webkit-background-clip: border-box;
sfond-klipi: kuti-kufi;
-webkit-background-size: auto auto;
madhësia e sfondit: automatik automatik;
-webkit-box-hije: 0 5px 0 0 rgba(178,49,49,1);
kuti-hije: 0 5px 0 0 rgba(178,49,49,1) ;

Vlad Merzheviç

Në faqet e internetit, trekëndëshat përdoren shpesh si pjesë e dizajnit të elementeve; për shembull, ato shërbejnë si një tregues për ndonjë objekt, duke e drejtuar vëmendjen e lexuesit në vendin e duhur. Trekëndëshat kryejnë edhe funksione dekorative, duke i bërë blloqet ku përdoren më elegante dhe moderne. Në Fig. Figura 1 tregon një shembull të përdorimit të një trekëndëshi në një dizajn.

Oriz. 1. Trekëndëshat në web design

Ju nuk mund të krijoni drejtpërdrejt një trekëndësh duke përdorur CSS, kështu që ekzistojnë dy metoda për ta shtuar atë - përmes kufirit dhe transformimit.

Përdorimi i kufirit

Megjithëse kufijtë e krijuar përmes pronës kufitare nuk lidhen drejtpërdrejt me trekëndëshat, kufiri është kufiri më i përdorur për këtë qëllim. Nëse vendosim gjerësinë dhe lartësinë e elementit në zero, dhe gjithashtu vendosim një kufi mjaft të trashë, do të shohim një grup prej katër trekëndëshash (Fig. 2). Për qartësi, kufijtë në të gjitha anët janë vendosur në ngjyra të ndryshme.

Oriz. 2. Shtimi i një kufiri në një element

Duke lënë vetëm kufirin e dëshiruar dhe duke e bërë pjesën tjetër transparente, do të marrim një trekëndësh të ngjyrës së dëshiruar (Fig. 3).

Oriz. 3. Element me kufij transparent

Shembulli 1 tregon se si të shtoni një trekëndësh në një bllok duke përdorur pseudo-elementin ::after.

Shembull 1. Blloko me trekëndësh

Për elementët e pozicionuar absolutisht, gjerësia dhe lartësia zero nuk kërkohet.

Duke kombinuar kufijtë, mund të merrni katër lloje të tjera trekëndëshash, të cilët, në kombinim me ato të përmendura tashmë, na japin tetë opsione. Lloji i tyre dhe kodi i kërkuar janë dhënë në tabelë. 1.

Tabela 1. Llojet e mundshme të trekëndëshave

Pamje	Stili
	kufiri: 20px transparent; kufiri i sipërm: 20 px jeshile e fortë;
	kufiri: 20px transparent; kufiri-djathtas: 20px jeshile e fortë;
	kufiri: 20px transparent; kufiri-fund: 20px jeshile e fortë;
	kufiri: 20px transparent; kufiri-majtas: 20px jeshile e fortë;
	kufiri: 20px transparent; kufiri i sipërm: 20 px jeshile e fortë; kufiri-djathtas: 20px jeshile e fortë;
	kufiri: 20px transparent; kufiri-djathtas: 20px jeshile e fortë; kufiri-fund: 20px jeshile e fortë;
	kufiri: 20px transparent; kufiri-fund: 20px jeshile e fortë; kufiri-majtas: 20px jeshile e fortë;
	kufiri: 20px transparent; kufiri-majtas: 20px jeshile e fortë; kufiri i sipërm: 20 px jeshile e fortë;

Tabela tregon se kufijtë e padukshëm zënë hapësirë, merrni parasysh këtë kur vendosni elementë. Stili duhet gjithashtu të plotësohet me gjerësi dhe lartësi zero ose të përdorë veçorinë e pozicionit, siç u bë në shembullin 1.

Trekëndëshi mund të bëhet në forma të tjera nëse vendosni trashësi të ndryshme kufiri. Kështu, kodi për krijimin e bllokut i paraqitur në Fig. 4, treguar në shembullin 2.

Oriz. 4. Trekëndësh i mprehtë

Shembulli 2. Trekëndëshi akut

Duke përdorur kufirin, marrim trekëndësha me ngjyra të forta për të krijuar kornizën e paraqitur në Fig. 5 duhet të përdorni një truk dhe të vendosni një element mbi tjetrin me një zhvendosje të lehtë. Përsëri, pseudoelementet :para dhe :past do të na ndihmojnë këtu (shembulli 3).

Oriz. 5. Kornizë me kënd

Shembulli 3: Mbivendosja e trekëndëshit

Për shkak se ne po shtrojmë një element me ngjyrë të fortë mbi një tjetër, kjo metodë është e përshtatshme vetëm për mbushje me ngjyra të forta dhe nuk është e përshtatshme për gradientët ose imazhet e sfondit.

Përdorimi i Transformimit

Duke përdorur transformimin, ne mund të rrotullojmë një element katror me 45º dhe të marrim një romb prej tij. Ky nuk është ende një trekëndësh si i tillë, kështu që ne e lëmë pjesën e spikatur që na nevojitet në pamje të qartë dhe pjesën tjetër e fshehim pas një elementi tjetër (shembulli 4).

Shembulli 3: Transformimi

Rezultati i këtij shembulli është paraqitur në Fig. 6.

Oriz. 6. Trekëndësh me hije

Pershendetje te gjitheve. Sot do të prekim një temë mjaft të pazakontë, domethënë të ardhmen e dizajnit të uebit, format CSS.

Siç e dini, tani është shumë në modë, por kryesisht përbëhet nga drejtkëndësha, të cilët, nga ana tjetër, kufizojnë shumë horizontet e stilistëve. Dhe pastaj ka përshtatshmëri.. Që është shumë kufizues për sa i përket krijimtarisë. Por ka një plus të madh këtu - është e lehtë të mbështillni tekstin rreth një drejtkëndëshi, por mënyra se si ta bëni tekstin të rrjedhë rreth formave të rrumbullakëta ose të parregullta është më e vështirë. Sepse fotografitë nuk mund të bëhen të rrumbullakëta.

Vetëm në këtë rast, shifrat na shkojnë në ndihmë. Faqja e njohur W3C CSS ka publikuar dokumentacionin e parë mbi format. Këtu është ky postim në nivelin 1 të Modulit të Formave CSS në anglisht. Ky modul u publikua së fundi më 20 qershor. Deri më tani ky është një version beta, i cili përfshin forma të tilla si drejtkëndësh, trekëndësh, elips, rreth dhe poligon.

Tani le të hedhim një vështrim më të afërt se cili është avantazhi i formave CSS duke përdorur një shembull.

Së pari, le të marrim disa shënime të thjeshta HTML, falë http://www.webdesignerdepot.com:

Ky është një tekst shembull