{"id":257270,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-fantastiske-css3-teknikker-du-bor-prove\/"},"modified":"2022-12-20T14:23:00","modified_gmt":"2022-12-20T11:23:00","slug":"7-fantastiske-css3-teknikker-du-bor-prove","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/7-fantastiske-css3-teknikker-du-bor-prove\/","title":{"rendered":"7 fantastiske CSS3-teknikker du b\u00f8r pr\u00f8ve"},"content":{"rendered":"

\n Utviklingen av CSS (Cascading Style Sheets) med HTML har v\u00e6rt utrolig. Det er mengder av funksjoner som Flexbox, CSS Grid og egendefinerte CSS-egenskaper introdusert nylig.\n<\/p>\n

\n Dens kontinuerlige fremgang og enorme potensial er det som fengsler utviklerne til \u00e5 pr\u00f8ve nye CSS-teknikker og overskride grensene for hva den kan gj\u00f8re. Kombinasjonen av b\u00e5de HTML 5 og CSS3-teknologi er uten tvil en flash-killer.\n<\/p>\n

\n Det er ikke rart at en godt utf\u00f8rt CSS-plan nesten kan kontrollere enhver fasett av design og f\u00f8re til bedre brukeropplevelse, noe som er ganske n\u00f8dvendig. Tross alt har bes\u00f8kende visse forventninger n\u00e5r de ser p\u00e5 nettstedet ditt via en b\u00e6rbar datamaskin, stasjon\u00e6r, nettbrett eller et annet medium.\n<\/p>\n

\n Men hva er de mest popul\u00e6re CSS-teknikkene? Er det ikke et \u00e5penbart sp\u00f8rsm\u00e5l som krysser hodet n\u00e5r vi snakker om \u00e5 designe en attraktiv brukervennlig nettside.\n<\/p>\n

\n Dette er grunnen til at vi har kommet opp med noen av de ferske CSS-teknikkene og tipsene for \u00e5 mestre webdesignferdighetene dine. Hver av dem inneholder noen forklaringer og eksempelkodebiter.\n<\/p>\n

\n S\u00e5 la oss g\u00e5 rett til det!\n<\/p>\n

\n 1 Juster vertikalt med Flexbox
\n<\/h5>\n

\n Tidligere utviklere pleide \u00e5 m\u00f8te mange problemer med \u00e5 justere en tekst eller et annet element vertikalt. Men n\u00e5, etter introduksjonen av den nye CSS3-spesifikasjonen Flexbox<\/strong>, har ting blitt mye enklere.\n<\/p>\n

\n Egenskapen, display: flex<\/strong> gir en enkel m\u00e5te for brukere \u00e5 justere tekst eller element i midten. Her er pr\u00f8vekoden!\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  I CSS-koden ovenfor beskriver display: flex Flexbox-oppsettet for elementet, mens align-items: center; er ansvarlig for vertikal sentrering av teksten.\n<\/p>\n
\n  RESULTAT:<\/strong>\n<\/p>\n
\n  2 Responsive CSS Grid
\n<\/h5>\n
\n  Ikke gj\u00f8r rutenettet til et unntak gj\u00f8r det responsivt ogs\u00e5, som alt annet i designet ditt.\n<\/p>\n
\n  Det er s\u00e5 mange m\u00e5ter du kan gj\u00f8re rutenettet ditt responsivt med CSS Grid. Og det beste med \u00e5 bruke det er at du vil kunne lage et mer fleksibelt rutenett som gir deg \u00f8nsket utseende, uansett hvilken enhetsst\u00f8rrelse du har.\n<\/p>\n
\n  I tillegg til dette lar CSS-nettet deg ogs\u00e5 jobbe med ulik og like kolonnest\u00f8rrelser. Det er et flott stykke teknologi fullpakket med alternativer som gir frihet til brukerne til \u00e5 ha kontroll over designene deres.\n<\/p>\n
\n  Du kan bruke ulike bruddpunkter, h\u00f8yden p\u00e5 flere dimensjoner og gj\u00f8re andre plasseringer, som vist i eksemplet nedenfor.\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  Fraksjonsenheten (fr) brukt i CSS-koden ovenfor er den fleksible enheten som skiller det \u00e5pne rommet i henhold til retningslinjene dine. Hver fr-setning er for kolonnen, s\u00e5 kan du legge sammen hullene og gj\u00f8re rutenettet klart.\n<\/p>\n
\n  RESULTAT:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 tekstanimasjoner
\n<\/h5>\n
\n  Du har kanskje laget bakgrunnsanimasjoner med CSS, men n\u00e5 p\u00e5virker det ogs\u00e5 hvordan brukere samhandler og engasjerer seg med tekstelementene p\u00e5 et nettsted. Fra svevejusteringer til \u00e5 f\u00e5 ord til \u00e5 flyte i luften, CCS3 har gjort det hele mulig.\n<\/p>\n
\n  Nettsteder som ikke har mange lokkende elementer for \u00e5 engasjere brukerne sine, kan f\u00e5 det beste ut av denne egenskapen. Her er et lite eksempel p\u00e5 det.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n