www.webdeveloper.com
Results 1 to 4 of 4

Thread: Gradient control and background Hex values

Hybrid View

  1. #1
    Join Date
    Sep 2005
    Posts
    1,636

    Question Gradient control and background Hex values

    I have code to place icons like:
    PHP Code:
    .error {
     
    background#EE4366 url(images/erroricon1.gif) no-repeat 28px 28px !important ;
     
    border-color#E83D88;

    When I place background: there is an issue that background-image: -webkit-gradient will not work. How to do in the correct way to publish gradient controls and icon will be seen?

    Issue: #EE4366 will be priority and see as #EE4366 but gradient control will be lost.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    I'm not entirely sure what you want. Your code does not have any indication of a gradient so I'm not really sure what you are trying to achieve.

    Regardless, I do have some possible solutions for you. Firstly, a note on gradients since I see you mentioned '-webkit-gradient' which is actually only for older versions of Safari and Chrome. In general, I use the following code for gradients:
    HTML Code:
      background: #878787;
      background-image: -moz-linear-gradient(top, #FFFFFF, #000000);
      background-image: -webkit-linear-gradient(top, #FFFFFF, #000000);
      background-image: -ms-linear-gradient(top, #FFFFFF, #000000);
      background-image: -o-linear-gradient(top, #FFFFFF, #000000);
      background-image: linear-gradient(to bottom, #FFFFFF, #000000);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000', GradientType=0);
    However, your code also seems to have an image linked in the background and so it makes me think that maybe you want an image and gradient both in the background of an element. If this is the case you'll be wanting something more along the lines of:
    HTML Code:
      background: #878787;
      background-image: url('images/erroricon1.gif');
      background-image: url('images/erroricon1.gif'), -moz-linear-gradient(top, #FFFFFF, #000000);
      background-image: url('images/erroricon1.gif'), -webkit-linear-gradient(top, #FFFFFF, #000000);
      background-image: url('images/erroricon1.gif'), -ms-linear-gradient(top, #FFFFFF, #000000);
      background-image: url('images/erroricon1.gif'), -o-linear-gradient(top, #FFFFFF, #000000);
      background-image: url('images/erroricon1.gif'), linear-gradient(to bottom, #FFFFFF, #000000);
    You could add the '-webkit-gradient' property if you wanted, but again this is only used in older versions of Safari and Chrome, which isn't incredibly common (since both browsers should always auto-update) so I usually don't include it.

  3. #3
    Join Date
    Sep 2005
    Posts
    1,636
    Sorry for misunderstanding. Check please all code which I'm testing.
    Icons are not background but it should be placed inside message on the left hand side.
    PHP Code:

    .message {
     -
    webkit-background-size40px 40px;
     -
    moz-background-size40px 40px;
     
    background-size40px 40px;
     
    background-image: -webkit-gradient(linearleft topright bottomcolor-stop(.25rgba(255255255.05)), color-stop(.25transparent), color-stop(.5transparent), color-stop(.5rgba(255255255.05)), color-stop(.75rgba(255255255.05)), color-stop(.75transparent), to(transparent));
     
    background-image: -webkit-linear-gradient(135degrgba(255255255.0525%, transparent 25%, transparent 50%, rgba(255255255.0550%, rgba(255255255.0575%, transparent 75%, transparent);
     
    background-image: -moz-linear-gradient(135degrgba(255255255.0525%, transparent 25%, transparent 50%, rgba(255255255.0550%, rgba(255255255.0575%, transparent 75%, transparent);
     
    background-image: -ms-linear-gradient(135degrgba(255255255.0525%, transparent 25%, transparent 50%, rgba(255255255.0550%, rgba(255255255.0575%, transparent 75%, transparent);
     
    background-image: -o-linear-gradient(135degrgba(255255255.0525%, transparent 25%, transparent 50%, rgba(255255255.0550%, rgba(255255255.0575%, transparent 75%, transparent);
     
    background-imagelinear-gradient(135degrgba(255255255.0525%, transparent 25%,transparent 50%, rgba(255255255.0550%, rgba(255255255.0575%, transparent 75%, transparent); -moz-box-shadowinset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadowinset 0 -1px 0 rgba(255,255,255,.4); box-shadowinset 0 -1px 0 rgba(255,255,255,.4);
     -
    moz-box-shadowinset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadowinset 0 -1px 0 rgba(255,255,255,.4); box-shadowinset 0 -1px 0 rgba(255,255,255,.4);
     
    width100%;
     
    border1px solid;
     
    color#fff;
     
    padding15px;
     
    positionfixed;
     
    _positionabsolute;
     
    text-shadow0 1px 0 rgba(000.5);
     -
    webkit-animationanimate-bg 5s linear infinite;
     -
    moz-animationanimate-bg 5s linear infinite;
    }
    .
    info {
    background-color#4ea5cd;
    /* background: #4EA5CD url(images/infoicon1.gif) no-repeat 20px 20px !important ; */
     
    border-color#3B8EB5;
    }
    .
    error {
     
    background#DE4343 url(images/messages/erroricon1.gif) no-repeat 20px 20px !important ;
     
    border-color#C43D3D;
    }
    .
    warning {
     
    background#D99A36 url(images/warningicon1.gif) no-repeat 20px 20px !important ;
     
    border-color#D99A36;
    }
    .
    success {
     
    background#61B832 url(images/successicon1.gif) no-repeat 20px 20px !important ;
     
    border-color#CC0000c;
    }
    .
    message h3 {
     
    margin0 0 5px 40px;
    }
    .
    message p {
     
    margin0 0 0 40px;

    Inside .message is defined all background-image: -webkit-gradient etc.
    Each subject ot type (message) is defined with .info....success. Now check background: #4EA5CD inside .info where should be icons as posted enclosed image. This will prevent showing gradient inside each type of message.

    Need help how to solve this.
    Attached Images Attached Images

  4. #4
    Join Date
    Mar 2014
    Posts
    24
    how we can use gradient color tool?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles