{"id":247488,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-vinget-css3-tehnikat-mida-peaksite-proovima\/"},"modified":"2022-12-20T14:33:00","modified_gmt":"2022-12-20T11:33:00","slug":"7-vinget-css3-tehnikat-mida-peaksite-proovima","status":"publish","type":"post","link":"https:\/\/inform.click\/et\/7-vinget-css3-tehnikat-mida-peaksite-proovima\/","title":{"rendered":"7 vinget CSS3 tehnikat, mida peaksite proovima"},"content":{"rendered":"

\n CSS-i (Cascading Style Sheets) areng HTML-iga on olnud uskumatu. Hiljuti tutvustati hulgaliselt funktsioone, nagu Flexbox, CSS Grid ja CSS-i kohandatud atribuudid.\n<\/p>\n

\n Selle pidev areng ja tohutu potentsiaal k\u00f6idavad arendajaid uusi CSS-i tehnikaid proovima ja \u00fcletama oma v\u00f5imete piire. Nii HTML 5 kui ka CSS3 tehnoloogia kombinatsioon on kahtlemata flash-killer.\n<\/p>\n

\n Pole ime, et h\u00e4sti teostatud CSS-plaan suudab peaaegu juhtida disaini mis tahes tahku ja viia parema kasutajakogemuseni, mis on \u00fcsna vajalik. L\u00f5ppude l\u00f5puks on k\u00fclastajatel teatud ootused, kui nad vaatavad teie saiti s\u00fclearvuti, lauaarvuti, tahvelarvuti v\u00f5i m\u00f5ne muu meediumi kaudu.\n<\/p>\n

\n Kuid millised on trendikad CSS-i tehnikad? Kas pole ilmselge k\u00fcsimus, mis p\u00e4he tuleb, kui r\u00e4\u00e4gime atraktiivse kasutajas\u00f5braliku veebisaidi kujundamisest.\n<\/p>\n

\n Seet\u00f5ttu oleme v\u00e4lja pakkunud m\u00f5ned v\u00e4rsked CSS-i tehnikad ja n\u00e4pun\u00e4ited teie veebikujundusoskuste valdamiseks. Iga\u00fcks neist sisaldab selgitusi ja n\u00e4idiskoodijuppe.\n<\/p>\n

\n Nii et asume otse asja juurde!\n<\/p>\n

\n 1 Joondage vertikaalselt Flexboxiga
\n<\/h5>\n

\n Varasematel arendajatel oli teksti v\u00f5i m\u00f5ne muu elemendi vertikaalselt keskele joondamisel palju raskusi. Kuid n\u00fc\u00fcd, p\u00e4rast uue CSS3 spetsifikatsiooni Flexbox<\/strong> kasutuselev\u00f5ttu, on asjad muutunud palju lihtsamaks.\n<\/p>\n

\n Atribuut Display: flex<\/strong> pakub kasutajatele lihtsat viisi teksti v\u00f5i elemendi keskele joondamiseks. Siin on n\u00e4idiskood!\n<\/p>\n

\n HTML:<\/strong>\n<\/p>\n

\n Vertically centered!<\/code>\n<\/div>\n
 <\/pre>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.align-vertically {\n  background: #FFA500;\n  color: #hhh;\n  display: flex;\n  align-items: center;\n  height: 200px;\n}<\/code><\/code><\/pre>\n
\n  \u00dclaltoodud CSS-koodis kirjeldab display: flex elemendi Flexboxi paigutust, samas kui align-items: center; vastutab teksti vertikaalse tsentreerimise eest.\n<\/p>\n
\n  TULEMUS:<\/strong>\n<\/p>\n
\n  2 Tundlik CSS-v\u00f5rk
\n<\/h5>\n
\n  \u00c4rge tehke oma ruudustikust erandit, muutke see ka tundlikuks, nagu k\u00f5ik muu teie kujunduses.\n<\/p>\n
\n  Saate oma ruudustiku CSS Gridiga tundlikuks muuta paljudel viisidel. Ja selle kasutamise parim osa on see, et saate luua paindlikuma ruudustiku, mis annab teile soovitud v\u00e4limuse, olenemata seadme suurusest.\n<\/p>\n
\n  Lisaks sellele v\u00f5imaldab CSS-i ruudustik t\u00f6\u00f6tada ka ebav\u00f5rdsete ja v\u00f5rdsete veergude suurustega. See on suurep\u00e4rane tehnoloogia, mis on t\u00e4is valikuid, mis annavad kasutajatele vabaduse oma disaini \u00fcle kontrollida.\n<\/p>\n
\n  Saate kasutada erinevaid murdepunkte, mitme m\u00f5\u00f5tme k\u00f5rgust ja teha muid paigutusi, nagu on n\u00e4idatud allolevas n\u00e4ites.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n  \u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n<\/div>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.grid\n {\n  display: grid;\n  grid-template-rows: repeat(5, 1fr);\n  grid-auto-columns: calc((100vh - 3em) \/ 4);\n  grid-auto-flow: column;\n  grid-gap: 1em;\n  height: 100vh;\n}\n.grid-item:nth-child(3n)\n {\n  background-color: purple;\n}\n.grid-item:nth-child(3n + 2)\n{\n  background-color: pink;\n}<\/code><\/code><\/pre>\n
\n  \u00dclaltoodud CSS-koodis kasutatav murd\u00fchik (fr) on paindlik \u00fchik, mis eraldab avatud ruumi vastavalt teie juhistele. Iga fr lause on veeru jaoks, siis saate l\u00fcngad kokku liita ja ruudustiku valmis teha.\n<\/p>\n
\n  TULEMUS:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 Tekstianimatsioonid
\n<\/h5>\n
\n  V\u00f5ib-olla olete loonud taustaanimatsioone CSS-iga, kuid n\u00fc\u00fcd m\u00f5jutab see ka seda, kuidas kasutajad veebisaidi tekstielementidega suhtlevad ja nendega suhtlevad. Alates h\u00f5ljumise reguleerimisest kuni s\u00f5nade \u00f5hus h\u00f5ljumiseni on CCS3 teinud k\u00f5ik v\u00f5imalikuks.\n<\/p>\n
\n  Veebisaidid, millel pole kasutajate kaasamiseks palju ahvatlevaid elemente, saavad sellest omadusest maksimumi v\u00f5tta. Siin on v\u00e4ike n\u00e4ide sellest.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n