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

Question

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

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

Answer 1

Два шестнадцатеричных кода для верхнего и нижнего цветов: # FF7F00 и # ED3400, соответственно.Затем вы можете воспользоваться ссылкой , которую предоставил Чад фон Нау , и соответствующим образом отредактировать рамку, округление и текст.

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

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