color codes with effects

Discussion in 'CSS' started by E-QueenEve, Dec 5, 2012.

  1. #1
    i want to know how can i get the codes of the colors with effects on it like this code

    e3e3e3

    i want to get the same effect on other colors , can anybody help me how to get it???
     
    Solved! View solution.
    E-QueenEve, Dec 5, 2012 IP
  2. abusschaert

    abusschaert Active Member

    Messages:
    265
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    65
    #2
    Ok for future reference the #e3e3e3 is actually call a hex value. Second of all, your not giving enough information. What effect are you talking about.
     
    abusschaert, Dec 6, 2012 IP
  3. #3
    Yeah, no clue what you mean by "effect" -- turns everything else into gibberish.

    As to the color code, as abusschaert said it's hexadecimal.

    If you are unaware of hex, it is base 16, each digit representing a value 0..15 (instead of the 0..9 of decimal). The values 10..15 are represented by the letters A..F... so the first digit is *1, next digit is *16, etc, etc...

    So:

    0A == 10
    A0 == 160 (16*10)
    A000 == 40960 (16*16*16*10)

    Hex colors are broken into either three sets of one digit, or three sets of two digits... in the order Red, Green, Blue.

    #FF0000 == 255 red, 0 green, 0 blue == pure red
    #00FF00 == 0 red, 255 green, 0 blue == pure green
    #0000FF == 0 red, 0 green, 255 blue == pure blue

    The three digit shorthand just doubles each digit per color channel.

    #F0F == #FF00FF == magenta
    #FF0 == #FFFF00 == yellow

    etc, etc...

    If you understand emissive colorspace, you know that:
    red + green = yellow
    green + blue = cyan
    red + blue = magenta

    Hence the original 8 'core' computer colors of black, blue, green, cyan, red, magenta, yellow and white.

    Light is added together using RGB, just as reflected media (paints/pigments) are built from CMY... As with paints:

    cyan + magenta = blue
    cyan + yellow = green
    magenta + yellow = red

    Basically spinning the color wheel 60 degrees... It's also why the paint color combinations you were likely taught in grade school are 100% BS that results in muddy impure color results. (when you mixed yellow and blue paints, the resulting green sucked...)
     
    deathshadow, Dec 7, 2012 IP
  4. E-QueenEve

    E-QueenEve Active Member

    Messages:
    90
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #4
    Thanks for your reply , and sorry for not being clear with the question as I am not a css or graphic expert

    what I mean by the word effect , is that the color is darker in the bottom then becoming lighter when you go to the top
    I wish I am explaining it properly
     
    E-QueenEve, Dec 7, 2012 IP
  5. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #5
    Rukbat, Dec 7, 2012 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Though if you want a color gradient on the text itself, you can't do that with HTML/CSS... and probably shouldn't anyways since that may cause accessibility issues... and there are MORE than enough places to screw up accessibility without adding one more.
     
    deathshadow, Dec 8, 2012 IP
  7. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #7
    It is actually possible with HTML/CSS3:

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));  
    HTML:
    Source: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/

    I wouldn't use it for compatibility reasons though. If you do use it, I'd urge you to have a solid color as backup for incompatible browsers such as IE6, 7 & 8.
     
    scottlpool2003, Dec 14, 2012 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    That is NOT CSS3, has nothing to do with the CSS3 specification as there is no such thing as mask-image. That is vendor specific to webkit based browsers such as Safari and Chrome.

    So 'incompatible browsers' would include Firefox and Opera, not just IE.
     
    deathshadow, Dec 14, 2012 IP
  9. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #9
    Well I didn't know it wasn't CSS3 I haven't fully read up on CSS3 to be honest, and W3Schools (probably not the best source) readily use these things without explaining that it is in-fact not CSS3 even though it's in a CSS3 tutorial.

    Thanks for highlighting that.
     
    scottlpool2003, Dec 14, 2012 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    See why I don't recommend W3Schools for learning ANYTHING... but I'm one of the nutters who will sit down and actually READ the specifications... Hence why I think HTML 5 is complete trash. Unlike the people trying to use it or dumb enough to see merit in it, I've actually read the specification and comprehended it. :D

    There are a LOT of sites out there calling the vendor specific prefixed versions "CSS3" when they aren't -- some sites don't even list the proper CSS3 versions of the commands only listing the -webkit ones or if you are lucky they might mention -mozilla. It's shamefully bad and an indicator that the writers of such articles don't understand the topics enough to be flapping their gums about it. If you only see it being used with a certain vendor's prefixes and not the others and without a prefix-less version, you probably need to find some other source for information about it... because it may not even exist outside that one browser engine. Which to be frank, is the part of the WORST of the late '90's browser wars making rounds again!

    Makes it all the harder for people who actually want to learn about these things... Of course you combine it with disastrously bad mis-information ridden web-rot like W3Schools... well, there's a reason there's an intervention group for it!
     
    Last edited: Dec 14, 2012
    deathshadow, Dec 14, 2012 IP
  11. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #11
    W3Fools is excellent, never heard of it before thanks.
     
    scottlpool2003, Dec 17, 2012 IP
  12. sadamsam

    sadamsam Greenhorn

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    13
    #12
    Hi,
    you can use the color picker software to get accurate code. For download this software go to Just color picker download.

    Color picker tool also available in IE.(Settings - Developer tools - tools - Show color picker)
     
    sadamsam, Jan 10, 2013 IP
  13. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #13
    Color picker software will give you A color. The OP wanted a color gradient, which you can't get from a color picker. (And shouldn't use for text anyway.)
     
    Rukbat, Jan 11, 2013 IP