{"id":249428,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-mahtavaa-css3-tekniikkaa-joita-kannattaa-kokeilla\/"},"modified":"2022-12-20T14:47:00","modified_gmt":"2022-12-20T11:47:00","slug":"7-mahtavaa-css3-tekniikkaa-joita-kannattaa-kokeilla","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/7-mahtavaa-css3-tekniikkaa-joita-kannattaa-kokeilla\/","title":{"rendered":"7 mahtavaa CSS3-tekniikkaa, joita kannattaa kokeilla"},"content":{"rendered":"

\n CSS:n (Cascading Style Sheets) kehitys HTML:n kanssa on ollut uskomatonta. Hiljattain esiteltyj\u00e4 ominaisuuksia, kuten Flexbox, CSS Grid ja CSS mukautettuja ominaisuuksia, on runsaasti.\n<\/p>\n

\n Sen jatkuva edistyminen ja valtava potentiaali houkuttelevat kehitt\u00e4j\u00e4t kokeilemaan uusia CSS-tekniikoita ja ylitt\u00e4m\u00e4\u00e4n sen kykyjen rajat. Sek\u00e4 HTML 5- ett\u00e4 CSS3-tekniikan yhdistelm\u00e4 on ep\u00e4ilem\u00e4tt\u00e4 flash-killer.\n<\/p>\n

\n Ei ole ihme, ett\u00e4 hyvin toteutettu CSS-suunnitelma voi hallita melkein mit\u00e4 tahansa suunnittelun puolia ja johtaa parempaan k\u00e4ytt\u00f6kokemukseen, mik\u00e4 on aivan v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4. Loppujen lopuksi vierailijoilla on tiettyj\u00e4 odotuksia, kun he katselevat sivustoasi kannettavan tietokoneen, p\u00f6yt\u00e4tietokoneen, tabletin tai mink\u00e4 tahansa muun v\u00e4lineen kautta.\n<\/p>\n

\n Mutta mitk\u00e4 ovat trendikk\u00e4imm\u00e4t CSS-tekniikat? Eik\u00f6 se ole ilmeinen kysymys, joka tulee mieleen, kun puhumme houkuttelevan k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisen verkkosivuston suunnittelusta.\n<\/p>\n

\n T\u00e4st\u00e4 syyst\u00e4 olemme keksineet joitain tuoreita CSS-tekniikoita ja vinkkej\u00e4 web-suunnittelutaitosi hallitsemiseen. Jokainen niist\u00e4 sis\u00e4lt\u00e4\u00e4 selityksi\u00e4 ja esimerkkikoodinp\u00e4tki\u00e4.\n<\/p>\n

\n Joten menn\u00e4\u00e4n suoraan asiaan!\n<\/p>\n

\n 1 Kohdista pystysuunnassa Flexboxin kanssa
\n<\/h5>\n

\n Aiemmat kehitt\u00e4j\u00e4t kohtasivat paljon vaikeuksia kohdistaa teksti tai jokin muu elementti pystysuoraan keskelle. Mutta nyt, uuden CSS3-m\u00e4\u00e4rityksen Flexbox<\/strong> k\u00e4ytt\u00f6\u00f6noton j\u00e4lkeen, asiat ovat tulleet paljon helpommaksi.\n<\/p>\n

\n Ominaisuus, display: flex<\/strong>, tarjoaa k\u00e4ytt\u00e4jille vaivattoman tavan tasata mink\u00e4 tahansa tekstin tai elementin keskelle. T\u00e4ss\u00e4 esimerkkikoodi!\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  Yll\u00e4 olevassa CSS-koodissa display: flex kuvaa elementin Flexbox-asettelua, kun taas align-items: center; vastaa tekstin pystykeskitt\u00e4misest\u00e4.\n<\/p>\n
\n  TULOS:<\/strong>\n<\/p>\n
\n  2 Responsiivinen CSS-ruudukko
\n<\/h5>\n
\n  \u00c4l\u00e4 tee ruudukostasi poikkeusta, tee siit\u00e4 my\u00f6s responsiivinen, kuten kaikesta muusta suunnittelussasi.\n<\/p>\n
\n  Voit tehd\u00e4 ruudukostasi responsiivisen CSS Gridin avulla monella eri tavalla. Ja paras osa sen k\u00e4yt\u00f6ss\u00e4 on, ett\u00e4 voit luoda joustavamman ruudukon, joka antaa sinulle haluamasi ulkoasun laitteen koosta riippumatta.\n<\/p>\n
\n  T\u00e4m\u00e4n lis\u00e4ksi CSS-ruudukon avulla voit my\u00f6s ty\u00f6skennell\u00e4 ep\u00e4tasaisten ja samansuuruisten sarakkeiden kanssa. Se on hieno teknologia, joka on t\u00e4ynn\u00e4 vaihtoehtoja, jotka antavat k\u00e4ytt\u00e4jille vapauden hallita suunnitteluaan.\n<\/p>\n
\n  Voit k\u00e4ytt\u00e4\u00e4 erilaisia \u200b\u200bkeskeytyspisteit\u00e4, useiden ulottuvuuksien korkeutta ja tehd\u00e4 muita sijoitteluja alla olevan esimerkin mukaisesti.\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  Yll\u00e4 olevassa CSS-koodissa k\u00e4ytetty murtoyksikk\u00f6 (fr) on joustava yksikk\u00f6, joka erottaa avoimen tilan ohjeidesi mukaan. Jokainen fr-lause on sarakkeelle, jonka j\u00e4lkeen voit laskea yhteen aukot ja tehd\u00e4 ruudukon valmiiksi.\n<\/p>\n
\n  TULOS:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 Tekstianimaatioita
\n<\/h5>\n
\n  Olet ehk\u00e4 luonut taustaanimaatioita CSS:n avulla, mutta nyt se vaikuttaa my\u00f6s siihen, miten k\u00e4ytt\u00e4j\u00e4t ovat vuorovaikutuksessa verkkosivuston tekstielementtien kanssa. CCS3 on tehnyt kaiken mahdolliseksi leijunnan s\u00e4\u00e4t\u00e4misest\u00e4 sanojen leijumiseen ilmassa.\n<\/p>\n
\n  Verkkosivustot, joilla ei ole paljon houkuttelevia elementtej\u00e4 k\u00e4ytt\u00e4jien sitouttamiseen, voivat hy\u00f6dynt\u00e4\u00e4 t\u00e4t\u00e4 ominaisuutta parhaalla mahdollisella tavalla. T\u00e4ss\u00e4 pieni esimerkki siit\u00e4.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n