{"id":2510,"date":"2020-11-28T14:03:00","date_gmt":"2020-11-28T14:03:00","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=2510"},"modified":"2025-10-14T18:00:04","modified_gmt":"2025-10-14T18:00:04","slug":"3-steg-for-att-skapa-moderna-ui-skuggor","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/sv\/3-steg-for-att-skapa-moderna-ui-skuggor\/","title":{"rendered":"Hur du skapar moderna UI skuggor med 3 enkla steg"},"content":{"rendered":"\n

Vill du l\u00e4ra dig hur du skapar fina och moderna UI skuggor? D\u00e5 \u00e4r det h\u00e4r guiden f\u00f6r dig!<\/em><\/strong><\/p>\n\n\n\n

En tydlig trend i UI design \u00e4r att skapa v\u00e4ldigt mjuka och naturliga UI skuggor. Att l\u00e4ra sig skapa s\u00e5dana skuggor \u00e4r viktigt f\u00f6r att kunna skapa mockups som inte ser f\u00f6r\u00e5ldrade ut. <\/p>\n\n\n\n

Steg 1. Skuggans f\u00e4rg<\/h2>\n\n\n\n

Ett av de vanligaste misstagen som g\u00f6rs med skuggor \u00e4r att man anv\u00e4nder #000 (helsvart) f\u00e4rg f\u00f6r skuggor i digital grafik. Det funkar s\u00e4llan<\/em>. Det \u00e4r l\u00e4tt att tro att skuggor i verkligheten \u00e4r svarta, men det \u00e4r dem inte. Dem \u00e4r ist\u00e4llet ett sn\u00e4pp m\u00f6rkare \u00e4n omgivningen eller har samma f\u00e4rg som objektet sj\u00e4lv. <\/strong><\/p>\n\n\n\n

Observera till exempel ett objekt i din n\u00e4rhet som har en skugga, t.ex. vecken p\u00e5 dina kl\u00e4der eller fr\u00e5n en v\u00e4xt. Vilken f\u00e4rg har skuggorna egentligen? <\/p>\n\n\n\n

Skuggans f\u00e4rg ska vara lik antingen<\/strong>:<\/p>\n\n\n\n

    \n
  1. Bakgrundsf\u00e4rgen<\/strong> (background-color i CSS). Till exempel med en bl\u00e5 skugga p\u00e5 en bl\u00e5 bakgrund.<\/li>\n\n\n\n
  2. Objektets f\u00e4rg<\/strong>. Till exempel r\u00f6d skugga bakom ett r\u00f6tt objekt.<\/li>\n<\/ol>\n\n\n\n

    Nedan \u00e4r ett exempel p\u00e5 hur mycket mer naturlig och mjuk en skugga blir om man baserar skuggf\u00e4rgen p\u00e5 kontexten ist\u00e4llet f\u00f6r att endast anv\u00e4nda en svart f\u00e4rg.<\/p>\n\n\n\n

    \"\"
    Exempel p\u00e5 skugga med samma f\u00e4rg j\u00e4mf\u00f6rt med en svart skugga<\/figcaption><\/figure>\n\n\n\n

    Steg 2. Stapla flera skuggor p\u00e5 varandra<\/h2>\n\n\n\n

    En annan enkel riktlinje f\u00f6r att skapa mjuka UI skuggor \u00e4r att stapla \u00e5tminstone tv\u00e5 olika skuggeffekter (i CSS) p\u00e5 varandra. Det h\u00e4r g\u00f6r att skuggan blir mer naturlig och dynamisk. Vissa staplar uppemot 5-7 st skuggor p\u00e5 varandra.<\/p>\n\n\n\n

    Dessutom \u00e4r det oftast s\u00e5 i verkligheten att ljus kan reflekera och studsa p\u00e5 ett objekt och dess omgivning p\u00e5 flera olika s\u00e4tt samidigt.<\/p>\n\n\n\n

    Nedan \u00e4r exempel p\u00e5 CSS kod f\u00f6r tv\u00e5 skuggor som man kan stapla p\u00e5 varandra. X st\u00e5r f\u00f6r hur l\u00e5ngt skuggan str\u00e4cker sig \u00e5t h\u00f6ger (eller v\u00e4nster om man anv\u00e4nder minus v\u00e4rden), Y st\u00e5r f\u00f6r hur l\u00e5ngt ner\u00e5t skuggan str\u00e4cker sig, och blur st\u00e5r f\u00f6r hur diffus\/hur mycket spridning skuggan ska ha.<\/p>\n\n\n\n

      \n
    1. X = 0, Y = 5-10, Blur = 10px<\/li>\n\n\n\n
    2. X = 0, Y = 10(+), Blur = 40-50px<\/li>\n<\/ol>\n\n\n\n
      box-shadow: 0 5px 10px rgba(154,160,185,.025), 0 15px 40px rgba(166,173,201,.2);<\/code><\/pre>\n\n\n\n
      Steg 3. S\u00e4nk opacitet f\u00f6r f\u00e4rgen (genomskinlighet)<\/h2>\n\n\n\n
      Den sista riktlinjen \u00e4r att s\u00e4nka f\u00e4rg genomskinligheten\/opaciteten p\u00e5 skuggorna till \u00e5tminstone 20-30%. I vissa fall kr\u00e4vs det att opaciteten \u00e4r \u00e4nnu l\u00e4ngre, t.ex. 10-12%.<\/p>\n\n\n\n
      \"\"
      Exempel p\u00e5 l\u00e5g vs h\u00f6g opacitet p\u00e5 skuggf\u00e4rgen. Alla andra inst\u00e4llningar \u00e4r identiska.<\/figcaption><\/figure>\n\n\n\n
      Fina UI skuggor g\u00f6r stor skillnad<\/h2>\n\n\n\n
      Om man inte har koll p\u00e5 hur man skapar moderna skuggorna kan det g\u00f6r att hela ens design concept ser gammal och icke-professionell ut. D\u00e4rf\u00f6r \u00e4r det bra att alltid se till att skuggor (och andra detaljer) ser s\u00e5 bra ut som m\u00f6jligt och vara uppdaterad p\u00e5 de designtrender som cirkulerar idag.<\/p>\n\n\n\n
      Tack f\u00f6r att du l\u00e4ste, och jag hoppas att denna guide kunde l\u00e4ra dig n\u00e5got!<\/p>\n\n\n\n
      Andra artiklar om UX\/UI Design<\/h2>\n\n\n\n
      H\u00e4r \u00e4r n\u00e5gra fler artiklar om design ifall du vill l\u00e4sa mer:<\/p>\n\n\n\n