Gradient control and background Hex values

This site is best viewed in a modern browser with JavaScript enabled.

Gradient control and background Hex values

toplisek

I have code to place icons like:

.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.

Sup3rkirby

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:

  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:

  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.

toplisek

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.


.message {
 -webkit-background-size: 40px 40px;
 -moz-background-size: 40px 40px;
 background-size: 40px 40px;
 background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)), color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent), to(transparent));
 background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
 background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
 background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
 background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
 background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
 -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
 width: 100%;
 border: 1px solid;
 color: #fff;
 padding: 15px;
 position: fixed;
 _position: absolute;
 text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
 -webkit-animation: animate-bg 5s linear infinite;
 -moz-animation: animate-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 {
 margin: 0 0 5px 40px;
}
.message p {
 margin: 0 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.

The attachments of this post were removed during the platform migration in 2018

simar

how we can use gradient color tool?