Scribd Logo
Carica

Benvenuto in Scribd!

  • Css Fundamentals: Color

    Caricato da

    cancermuzamil
    12 visualizzazioni37 pagine

    Titolo originale

    css-fundamentals-color-200413225725

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    12 visualizzazioni37 pagine

    Css Fundamentals: Color

    Caricato da

    cancermuzamil

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 37

    CSS CSS FUNDAMENTALS

    Color
    IN A ROCKET
    Learn front-end development at rocket speed
    NAMED COLORS

    The color property sets the foreground color of an element's text content, and its decorations.

    p { color: green }
    With this code all paragraphs are shown in green.

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    NAMED
 HEX
    COLORS COLORS

    RGB/RGBA HSL/HSLA
    COLORS COLORS

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    NAMED COLORS
    White Hex RGB Gray & black Hex RGB Red Hex RGB Green Hex RGB

    Orange Hex RGB

    Yellow Hex RGB

    Pink Hex RGB

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    NAMED COLORS
    Blue Hex RGB Cyan Hex RGB Purple Hex RGB Brown Hex RGB

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    NAMED COLORS

    HTML CSS
    <body> p { color: red; }
    <p>CSS rocks!</p>
    </body>

    Browser
    Web page title
    index.html

    CSS rocks!

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    NAMED
 HEX
    COLORS COLORS

    RGB/RGBA HSL/HSLA
    COLORS COLORS

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HEX COLORS

    Red Green Blue

    p { color: #000000 }

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HEX COLORS

    RED GREEN BLUE


    F F F
    E E E
    D D D
    C C C
    B B B
    A A A

    #
    9 9 9
    8 8 8
    7 7 7
    6 6 6
    5 5 5
    4 4 4
    3 3 3
    2 2 2
    1 1 1
    0 0 0

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HEX COLORS

    RED GREEN BLUE


    F F F
    E E E
    D D D
    C C C
    B B B
    A A A

    #
    9 9 9
    8
    7
    6
    8
    7
    6
    8
    7
    6
    = #ff0000
    5 5 5
    4 4 4
    3 3 3
    2 2 2
    1 1 1
    0 0 0

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HEX COLORS

    RED GREEN BLUE


    F F F
    E E E
    D D D
    C C C
    B B B
    A A A

    #
    9 9 9
    8
    7
    6
    8
    7
    6
    8
    7
    6
    = #00ff00
    5 5 5
    4 4 4
    3 3 3
    2 2 2
    1 1 1
    0 0 0

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HEX COLORS

    RED GREEN BLUE


    F F F
    E E E
    D D D
    C C C
    B B B
    A A A

    #
    9 9 9
    8
    7
    6
    8
    7
    6
    8
    7
    6
    = #0000ff
    5 5 5
    4 4 4
    3 3 3
    2 2 2
    1 1 1
    0 0 0

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HEX COLORS

    #000000 #ff0000
    #000 #f00

    #ffffff #00ff00
    #fff #0f0

    #0000ff
    #00f

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HEX COLORS

    HTML CSS
    <body> p { color: #f00; }
    <p>CSS rocks!</p>
    </body>

    Browser
    Web page title
    index.html

    CSS rocks!

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    GAME: GUESS THE COLOR

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    NAMED
 HEX
    COLORS COLORS

    RGB/RGBA HSL/HSLA
    COLORS COLORS

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    RGB / RGBA COLORS

    Red Green Blue

    p { color: rgb(0,0,255) } 255 255 255

    0 0 0

    With this code all paragraphs are shown in blue.

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    RGB / RGBA COLORS

    rgb(0,0,0) rgb(255,0,0)

    rgb(255,255,255) rgb(0,255,0)

    rgb(0,0,255)

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    RGB / RGBA COLORS

    HTML CSS
    <body> p { color: rgb(0,0,255) }
    <p>CSS rocks!</p>
    </body>

    Browser
    Web page title
    index.html

    CSS rocks!

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    RGB / RGBA COLORS

    Alpha

    (transparency)

    p { color: rgba(0,0,255,0.5) }
    1

    With this code all paragraphs are shown in blue with 50% transparency.

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    RGB / RGBA COLORS

    HTML CSS
    <body> p { color: rgba(0,0,255,0.5) }
    <p>CSS rocks!</p>
    </body>

    Browser
    Web page title
    index.html

    CSS rocks!

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    NAMED
 HEX
    COLORS COLORS

    RGB/RGBA HSL/HSLA
    COLORS COLORS

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HSL/HSLA COLORS

    Hue Saturation Lightness

    p { color: hsl(240,100%,50%) }
    0 360

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HSL/HSLA COLORS

    hsl(0,0%,0%) hsl(0,100%,50%)

    hsl(0,0%,100%) hsl(120,100%,50%)

    hsl(240,100%,50%)

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HSL/HSLA COLORS

    HTML CSS
    <body> p { color: hsl(240,100%,50%) }
    <p>CSS rocks!</p>
    </body>

    Browser
    Web page title
    index.html

    CSS rocks!

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HSL/HSLA COLORS

    Alpha

    (transparency)

    p { color: hsla(240,100%,50%,0.5) }
    1

    0
    With this code all paragraphs are shown in blue with 50% transparency.

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    HSL/HSLA COLORS

    HTML CSS
    <body> p { color: hsla(240,100%,50%,0.5) }
    <p>CSS rocks!</p>
    </body>

    Browser
    Web page title
    index.html

    CSS rocks!

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    in a
    ROCKET

    TOOLS
    ~~~
    TOOLS: CSS PEEPER

    Inspect a color palette used on a website.

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    TOOLS: COLOR CONVERTER

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    TOOLS: IMPALETTE

    Find the most dominant color in an image

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    TOOLS: MATERIAL DESIGN PALETTE

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    TOOLS: BRANDS IN COLOURS

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    TOOLS: BRANDCOLORS

    CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


    YOU CAN CONTINUE THIS COURSE FOR FREE ON

    inarocket .com
    Learn front-end development at rocket speed
    + READY TO USE CODE
    + QUIZZES
    + FREE UPDATES

    by miguelsanchez.com
    inarocket .com
    Learn front-end development at rocket speed

    We respect your time
 Step by step guides
 Ready to use code



    No more blah blah videos. Just straight to Clear and concise steps to build real use Real code you can just copy and paste into
    the point slides with relevant information. solutions. No missed points. your real projects.
    CSS CSS FUNDAMENTALS

    Color
    IN A ROCKET
    Learn front-end development at rocket speed

    Potrebbero piacerti anche