{"id":32,"date":"2022-10-26T17:35:00","date_gmt":"2022-10-26T17:35:00","guid":{"rendered":"https:\/\/mjonesdesign.co.uk\/blog\/?p=32"},"modified":"2023-02-25T17:37:53","modified_gmt":"2023-02-25T17:37:53","slug":"colour-typography-with-css-images-and-colour-with-css","status":"publish","type":"post","link":"https:\/\/mjonesdesign.co.uk\/blog\/2022\/10\/26\/colour-typography-with-css-images-and-colour-with-css\/","title":{"rendered":"Colour, Typography with CSS & Images and Colour with CSS<\/strong>"},"content":{"rendered":"\n

Class 6: What I Learned This Week…<\/strong><\/h2>\n\n\n\n

Colour<\/strong><\/h3>\n\n\n\n

A range of different colours can have a variety of different meanings and interesting historical reasons. For example, whilst it is quite commonly known that purple is a colour used a lot by royals, I didn’t know that this was because back in the day purple was the most expensive colour to dye, and so the royal family used it a lot to show their wealth. Red can also be percieved as hatred, anger or a warning, as well as love.<\/p>\n\n\n\n

Colour Combinations<\/strong><\/p>\n\n\n\n

    \n
  • Depending on the background colour, it can either illuminate the foreground or make it blend into the background and disappear.<\/li>\n\n\n\n
  • Certain combinations are bad for colour blindless aspects such as red and blue. High brightness and saturation also hurts the eyes to look at.<\/li>\n\n\n\n
  • For logo design it is best practice to start in black and white so that you can work with shape and from first, and then you can match colours to the density of the shade later on.<\/li>\n\n\n\n
  • Monochromatic is the combination of tones and shades within the same colour\/hue.<\/li>\n\n\n\n
  • Analogues – The combination of adjacent colours<\/li>\n\n\n\n
  • Complementary – The combination of two colours from opposite sides<\/li>\n\n\n\n
  • Triadic – The combination of three colours evenly spaced around the colour wheel<\/li>\n\n\n\n
  • Compound – Combination of colours that are often in two groups.<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Methods To Choose Colour Scheme<\/strong><\/p>\n\n\n\n

      \n
    • Brand Based – We need to reserve an accent colour for buttons<\/li>\n\n\n\n
    • Rooted in Content<\/li>\n\n\n\n
    • Looking Sideways – Put together a moodboard of items such as tea leaves, tea cup, tea pots etc and draw colour schemes from that<\/li>\n<\/ul>\n\n\n\n

      Typography with CSS<\/strong><\/p>\n\n\n\n

        \n
      • The width should be 80% of the parent element. You need to include a max-width to stop the content from stretching too far on a larger screen. Similarly the min-width is needed so that text doesn\u2019t become too narrow on a smaller screen size.<\/li>\n\n\n\n
      • Margin: 0 auto; centres the elements within the parent element with equal margin on either side. This means 0 top and bottom, auto left and right.<\/li>\n\n\n\n
      • <div id=…> allows you to have a shape underneath your content to act as a visual container and can make the background more interesting.<\/li>\n\n\n\n
      • 960px is the comfortable measurable width for screen that is the most commonly used. Screen width is always measured in pixels.<\/li>\n\n\n\n
      • It is good practice to use off-black and off-white so that the contrast isn\u2019t as high and is easier to read, making your website more accessible.<\/li>\n\n\n\n
      • Use margin-top or margin-bottom for typographic design. One or the other should be used, but never both as ideally you don\u2019t want two margins coming together.<\/li>\n<\/ul>\n\n\n\n

        Images and Colour with CSS<\/strong><\/p>\n\n\n\n

          \n
        • JPEG \u2013 Joint photographic experts group. They are true colour, 24 bit, have variable compression and used for photographs<\/li>\n\n\n\n
        • GIF \u2013 A gif has 256 colours, 8 bit, and used for frame animation or simple graphics<\/li>\n\n\n\n
        • PNG-8 \u2013 Has 256 colours, 8 bit, smaller than equivalent GIF, good for logos and used for simple graphics<\/li>\n\n\n\n
        • PNG-24 \u2013 True colour, 24 bit, alpha transparency \u2013 no other file format has this and is used for complex graphics<\/li>\n\n\n\n
        • WebP \u2013 Developed by google. One file format for the web<\/li>\n\n\n\n
        • Colour dithering \u2013 mosaic\/pixelated effect on photos when not using the true colour formats<\/li>\n\n\n\n
        • Make sure image is under 100KB for use on web<\/li>\n\n\n\n
        • Vector file formats \u2013 SVG (scalable vector graphics) are flexible to edit, you can edit the colour in html file.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

          Class 6: What I Learned This Week… Colour A range of different colours can have a variety of different meanings and interesting historical reasons. For example, whilst it is quite commonly known that purple is a colour used a lot by royals, I didn’t know that this was because back in the day purple was […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-applied-art-for-the-web"],"_links":{"self":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":1,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}