{"id":264910,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-fantastiska-css3-tekniker-du-borde-prova\/"},"modified":"2022-12-20T14:27:00","modified_gmt":"2022-12-20T11:27:00","slug":"7-fantastiska-css3-tekniker-du-borde-prova","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/7-fantastiska-css3-tekniker-du-borde-prova\/","title":{"rendered":"7 fantastiska CSS3-tekniker du borde prova"},"content":{"rendered":"

\n Utvecklingen av CSS (Cascading Style Sheets) med HTML har varit otrolig. Det finns m\u00e4ngder av funktioner som Flexbox, CSS Grid och anpassade CSS-egenskaper som nyligen introducerades.\n<\/p>\n

\n Dess kontinuerliga framsteg och enorma potential \u00e4r vad som f\u00e4ngslar utvecklarna att prova nya CSS-tekniker och \u00f6verskrida gr\u00e4nserna f\u00f6r vad den kan g\u00f6ra. Kombinationen av b\u00e5de HTML 5 och CSS3-teknik \u00e4r utan tvekan en flash-killer.\n<\/p>\n

\n Det \u00e4r inte konstigt att en v\u00e4l genomf\u00f6rd CSS-plan n\u00e4stan kan styra vilken aspekt av design som helst och leda till b\u00e4ttre anv\u00e4ndarupplevelse, vilket \u00e4r ganska n\u00f6dv\u00e4ndigt. N\u00e4r allt kommer omkring har bes\u00f6kare vissa f\u00f6rv\u00e4ntningar n\u00e4r de tittar p\u00e5 din webbplats via en b\u00e4rbar dator, station\u00e4r, surfplatta eller n\u00e5got annat medium.\n<\/p>\n

\n Men vilka \u00e4r de popul\u00e4ra CSS-teknikerna? \u00c4r det inte en sj\u00e4lvklar fr\u00e5ga som g\u00e5r i huvudet n\u00e4r vi pratar om att designa en attraktiv anv\u00e4ndarv\u00e4nlig webbplats.\n<\/p>\n

\n Det \u00e4r d\u00e4rf\u00f6r vi har kommit med n\u00e5gra av de nya CSS-teknikerna och tipsen f\u00f6r att bem\u00e4stra dina webbdesignf\u00e4rdigheter. Var och en inneh\u00e5ller n\u00e5gra f\u00f6rklaringar och exempel p\u00e5 kodavsnitt.\n<\/p>\n

\n S\u00e5 l\u00e5t oss g\u00e5 direkt till det!\n<\/p>\n

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

\n Tidigare utvecklare brukade st\u00e4llas inf\u00f6r m\u00e5nga sv\u00e5righeter med att rikta in en text eller n\u00e5got annat element vertikalt. Men nu, efter introduktionen av den nya CSS3-specifikationen Flexbox<\/strong>, har det blivit mycket enklare.\n<\/p>\n

\n Egenskapen, display: flex<\/strong> ger ett enkelt s\u00e4tt f\u00f6r anv\u00e4ndare att rikta in text eller element i mitten. H\u00e4r \u00e4r exempelkoden!\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 ovanst\u00e5ende CSS-kod beskriver display: flex Flexbox-layouten f\u00f6r elementet, medan align-items: center; ansvarar f\u00f6r den vertikala centreringen av texten.\n<\/p>\n
\n  RESULTAT:<\/strong>\n<\/p>\n
\n  2 Responsivt CSS Grid
\n<\/h5>\n
\n  G\u00f6r inte ditt rutn\u00e4t till ett undantag g\u00f6r det ocks\u00e5 responsivt, som allt annat i din design.\n<\/p>\n
\n  Det finns s\u00e5 m\u00e5nga s\u00e4tt genom vilka du kan g\u00f6ra ditt rutn\u00e4t responsivt med CSS Grid. Och det b\u00e4sta med att anv\u00e4nda det \u00e4r att du kommer att kunna skapa ett mer flexibelt rutn\u00e4t som ger dig det \u00f6nskade utseendet, oavsett storleken p\u00e5 enheten.\n<\/p>\n
\n  Ut\u00f6ver detta l\u00e5ter CSS-rutn\u00e4tet dig ocks\u00e5 arbeta med oj\u00e4mna och lika stora kolumner. Det \u00e4r ett fantastiskt stycke teknik packad med alternativ som ger anv\u00e4ndarna frihet att ha kontroll \u00f6ver sin design.\n<\/p>\n
\n  Du kan anv\u00e4nda olika brytpunkter, h\u00f6jden p\u00e5 flera dimensioner och g\u00f6ra andra placeringar, som visas i exemplet nedan.\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  Fraktionsenheten (fr) som anv\u00e4nds i ovanst\u00e5ende CSS-kod \u00e4r den flexibla enheten som separerar det \u00f6ppna utrymmet enligt dina riktlinjer. Varje fr-sats \u00e4r f\u00f6r kolumnen, sedan kan du l\u00e4gga ihop luckorna och g\u00f6ra rutn\u00e4tet klart.\n<\/p>\n
\n  RESULTAT:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 Textanimationer
\n<\/h5>\n
\n  Du kanske har skapat bakgrundsanimationer med CSS, men nu p\u00e5verkar det ocks\u00e5 hur anv\u00e4ndare interagerar och engagerar sig med textelementen p\u00e5 en webbplats. Fr\u00e5n justering av sv\u00e4varen till att f\u00e5 ord att sv\u00e4va i luften, CCS3 har gjort allt m\u00f6jligt.\n<\/p>\n
\n  Webbplatser som inte har m\u00e5nga lockande element f\u00f6r att engagera sina anv\u00e4ndare kan g\u00f6ra det b\u00e4sta av denna egenskap. H\u00e4r \u00e4r ett litet exempel p\u00e5 det.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n