HTML-Färger

För att göra en snyggare sida kan man änvända färger och antingen färglägga sidan eller texten. Använder man de vanligaste engelska namnen på färgerna, så kan man klara sig med det. Det går alltså att skriva "white" så att webbläsaren förstår att det är vit färg. Sammanlagt går det att använda 140 olika beteckningar på färgerna utan att behöva kunna HTML-koden för dem:

AliceBlue - DarkOliveGreen - Indigo - MediumPurple - Purple - AntiqueWhite - DarkOrange - Ivory - MediumSeaGreen - Red - Aqua - DarkOrchid - Khaki - MediumSlateBlue - RosyBrown - AquaMarine - DarkRed - Lavender - MediumSpringGreen - RoyalBlue - Azure - DarkSalmon - LavenderBlush - MediumTurquoise - SaddleBrown - Beige - DarkSeaGreen - LawnGreen - MediumVioletRed - Salmon - Bisque - DarkSlateBlue - LemonChiffon - MidnightBlue - SandyBrown - Black - DarkSlateGray - LightBlue - MintCream - SeaGreen - BlanchedAlmond - DarkTurquoise - LightCoral - MistyRose - SeaShell - Blue - DarkViolet - LightCyan - Moccasin - Sienna - BlueViolet - DeepPink - LightGoldenrodYellow - NavajoWhite - Silver - Brown - DeepSkyBlue - LightGray - Navy - SkyBlue - BurlyWood - DimGray - LightGreen - OldLace - SlateBlue - CadetBlue - DodgerBlue - LightPink - Olive - SlateGray - Chartreuse - FireBrick - LightSalmon - OliveDrab - Snow - Chocolate - FloralWhite - LightSeaGreen - Orange - SpringGreen - Coral - ForestGreen - LightSkyBlue - OrangeRed - SteelBlue - CornFlowerBlue - Fuchsia - LightSlateGray - Orchid - Tan - Cornsilk - Gainsboro - LightSteelBlue - PaleGoldenRod - Teal - Crimson - GhostWhite - LightYellow - PaleGreen - Thistle - Cyan - Gold - Lime - PaleTurquoise - Tomato - DarkBlue - GoldenRod - LimeGreen - PaleVioletRed - Turquoise - DarkCyan - Gray - Linen - PapayaWhip - Violet - DarkGoldenRod - Green - Magenta - PeachPuff - Wheat - DarkGray - GreenYellow - Maroon - Peru - White - DarkGreen - HoneyDew - MediumAquaMarine - Pink - WhiteSmoke - DarkKhaki - HotPink - MediumBlue - Plum - Yellow - DarkMagenta - IndianRed - MediumOrchid - PowderBlue - YellowGreen -

HTML färgerna är uppdelade i sex delar och använder man hexadecimaler/"sifferkarta" för att färglägga ska man alltid skriva, hashtag, #, före färgen. Exempelvis: "#FFFFFF" är vitt och "#000000" är svart. Alltså sex nollor eller sex av ingenting blir så klart svart. Man kan antingen använda siffror eller bokstäverna A-F. De sex nollorna delar man sen upp i tre par: 00 00 00 - Den första ändras efter behag för rött: #FF0000 - blir rött, den andra delen är grönt: #00FF00 - blir grönt, och den tredje delen är blåa: #0000FF - blir blått. Exempel: för att få röd färg lägger man in följande CSS-kod där man vill få objektet exempelvis röd style="color:#FF0000". För att få lila färger skriver man då #550055 eller #220022 för mörkare ton - alltså rött blandat med blått.

Man kan även skriva speciella RGB-koder: rgba(0,0,0, 1) - den första nollan fylls i för röda färger (255 är högsta värdet), t.ex. rgba(200,0,0), den andra för gröna rgba(0,200,0) och den tredje för blåa färger rgb(0,0,200) och sist men inte minst den fjärde, för opacitet/genomskinlighet, där 1 symboliserar 100% genomskinligt och 0 är "originalopaciteten".
Exempel: <span style="box-shadow: 0px 0px 0px 0px rgba(100,100,100, 0.5); background-color: "000000; color:red"></span>. Ju högre siffra eller bokstav, desto ljusare färg. mellan taggarna > och </span> kommer den skrivna texten att ha de önskade attributen, med svart bakgrund, grå skugga med 50 opacitet/genomskinlighet & röd text.

reportaget.SE har som "färger" alla tre primärfärger: röd, blå och gul, samt nyanserna svart, vit och grått, men även andra kan förekomma vid behov eller från externt innehåll.Dessa färger uppstår inte genom en blandning av andra färger (däremot skulle gult kunna komma av rött, grönt från gult och blåa färger genom grönt, därav att vissa i media menar RGB (Rött Grönt & Blått) vara primära istället) medan de andra blir till genom att primärfärgerna mixas med varandra. Rött med gult blir orange, gult och blått blir grönt, blått och rött blir lila och så vidare. Utan färg är det svarta mörker medan tillsammans alstrar alla färgerna ett vitt ljus och en blandning av vit och svart blir som bekant grått. Lite kuriosa var detta fast dessa sex är sajtens färger

Det pratas alltså om RGB (Rött Blått och Grönt) som primärfärger i digital media, medan i måleri är det Rött, Blått och Gult, som man blandar för att få de andra färgerna, och i tryck är det CMYK - Cyan (ljusblått) Magenta (rosa-rött) Yellow (gult) och Keycolor (svart).

Väljer man att istället skriva namnet på färgen ska man inte använda hashtag utan bara style="color:RED", alltså man skriver bara namnet.

Text- och boxskuggning

Boxskugga är en skugga runt ett objekt likt "divar", bilder osv. medan textskuggor den skugga man tillämpar på text.

  • Boxskuggor bygger på Horizontellt- och Vertikalt avstånd, på kontrastens styrka och på utspriddhetens storlek.
    box-shadow { 0px 0px 0px 0px }, alltså den första nollan fylls i för hur den horizontella skuggan ska vara, den andra för vertikala skuggor, den tredje för styrkan och den fjärde för storleken. Sen kan man bara experimentera med siffrorna tills man lärt sig och är nöjd.
  • Man kan även ha innåtvänd skugga, ha flera skuggor på varandra (och skilja dem sinsemmellan åt med kommatecken) eller färglägga skuggan:
    style="box-shadow: inset 0px 0px 0px 0px, 0px 0px 0px 0px #000000" (alternativt bara det traditionella namnet - red green blue, etc.)
  • Textskuggor byggs på liknande sätt:
    text-shadow: 0px 0px 0px #000000
    Nollarna fylls i på samma för att ändra på skuggans attribut. Första nollan (X-kordinator) för Horizontell skugga , den andra (Y-kordinator) för Vertikala skuggor och den tredje för "blur" / suddigheten (textskuggor har ingen radius för storlek och utspriddhet som boxskuggor har).
  • Äldre "Läsare" kan i vissa fall inte visa dessa stylingar, utan att en extra-kod används för respektive. För att visa på andra browsers kan man exempelvis lägga till följande koder:

    -moz-box-shadow: (för Mozilla), respektive -moz-text-shadow:
    -webkit-box-shadow: (för Chrome, Safari mm.) respektive -webkit-text-shadow:
    -ms-box-shadow: (för Explorer mm.) respektive -ms-text-shadow: