CSS-градиент с изображения

Question

Мне было предоставлено несколько изображений из моего отдела рекламы, чтобы разместить его на сайте для вкладок и т. Д. Однако я уверен, что это замедлит рендеринг страницы. Поэтому я думал, что сделаю это в css. Однако после нескольких испытаний я не могу приблизиться к следующим изображениям. Я был бы признателен за любую помощь с этими двумя изображениями.

Удалить этот вопрос Я думаю, что мне нужно будет поработать над этим, а затем повторить, если я не могу что-то выяснить. Можете ли вы голосовать на закрытие этого вопроса спасибо

Answer 1

Два hexcodes для верхних и нижних цветов # ff7f00 и # ED3400, соответственно. Затем вы можете использовать link that Chad von Nau provided и отредактировать границу, округление и текст соответствующим образом.

Вот что я придумал для вашего изображения.

<style type="text/css"> 
classname{ 
    -moz-box-shadow:inset 0px 1px 0px 0px #db8f4c; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #db8f4c; 
    box-shadow:inset 0px 1px 0px 0px #db8f4c; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff8000), color-stop(1, #ed3300)); 
    background:-moz-linear-gradient(center top, #ff8000 5%, #ed3300 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8000', endColorstr='#ed3300'); 
    background-color:#ff8000; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #dcdcdc; 
    display:inline-block; 
    color:#ffffff; 
    font-family:arial; 
    font-size:21px; 
    font-weight:bold; 
    padding:11px 54px; 
    text-decoration:none; 
    text-shadow:-1px -1px 0px #ed3300; 
}.classname:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ed3300), color-stop(1, #ff8000)); 
    background:-moz-linear-gradient(center top, #ed3300 5%, #ff8000 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed3300', endColorstr='#ff8000'); 
    background-color:#ed3300; 
}.classname:active { 
    position:relative; 
    top:1px; 
} 
</style> 

Answer 2

Попробуйте это: http://www.cssbuttongenerator.com/