создать «блестящий» эффект с использованием градиента css

Возможно ли создать такой градиент, как эффект блестящего на iphone, в приведенной ниже ссылке, используя только css?
http://prntscr.com/22oa4f

Я попытался, используя следующий код, но он не "блестящий"
создать «блестящий» эффект с использованием градиента css

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); 
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); 
background-image: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));

Я создал контейнер в этом jsfiddle ->http://jsfiddle.net/3qWYL/

источник

2013-11-08 surfs up

как "блестящий" вы хотите? в вашем jsFiddle есть только черный ящик. – Raptor

Вот пример всего iPhone, созданного с помощью CSS3: http://codepen.io/lazyronin/pen/oEzwJ –

Попробуйте this:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));

источник

2013-11-08 06:11:06

Но он не был блестящим .. –

ermhh .. он выглядит блестящим для меня на хроме. –

Проверьте это, это то, что вы ищете. jsFiddle demo

HTML

<div class="d shine"></div>

CSS

.d { 
    width: 300px; 
    height: 500px; 
    background: #111; 
} 
.shine:before { 
    content:""; 
    position:absolute; 
    width: 300px; 
    height: 500px; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); 
    background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); 
    background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); 
}

источник

2013-11-08 06:24:51

На самом деле, это недостаточно блестяще –

Попробуйте изменить цвет, непрозрачность и положение, чтобы получить желаемый результат. –

Это не работает в IE 11 в Windows 10 Tech Preview. –

.background { 
background-image: linear-gradient(right, #111 11%, #333 56%); 
background-image: -o-linear-gradient(right, #111 11%, #333 56%); 
background-image: -moz-linear-gradient(right, #111 11%, #333 56%); 
background-image: -webkit-linear-gradient(right, #111 11%, #333 56%); 
background-image: -ms-linear-gradient(right, #111 11%, #333 56%); 
background-image: gradient(right, #111 11%, #333 56%); 
}

источник

2015-05-01 21:01:49 JacobG182

.btn { 
 
    position: relative; 
 
    width: 150px; 
 
    text-align: center; 
 
    padding: .61538462em 1em; 
 
    cursor: pointer; 
 
    vertical-align: middle; 
 
    color: #FFF; 
 
    border: 1px solid #07c; 
 
    border-radius: 2px; 
 
    background-color: #0095ff; 
 
    box-shadow: inset 0 1px 0 #66bfff; 
 
} 
 
.shiny::after { 
 
    content: ''; 
 
    display: block; 
 
    width: 70%; 
 
    background: rgba(255, 255, 255, 0.2); 
 
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2)50%, rgba(255, 255, 255, 0.7)100%); /* Safari 5.1-6.0 */ 
 
    background: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.2)50%, rgba(255, 255, 255, 0.7)100%); /* Opera 11.1-12.0 */ 
 
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.2)50%, rgba(255, 255, 255, 0.7)100%); /* Firefox 3.6-15 */ 
 
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2)50%, rgba(255, 255, 255, 0.7)100%); /* Standard syntax */ 
 

 
    left: -100%; 
 
    top: 0; 
 
    height: 100%; 
 
    position: absolute; 
 
    transition: none; 
 
    -webkit-transition: none; 
 
    -moz-transition: none; 
 
    -o-transition: none; 
 
    -ms-transition: none; 
 
    -ms-transform: skewX(-20deg); /* IE 9 */ 
 
    -webkit-transform: skewX(-20deg); /* Safari */ 
 
    transform: skewX(-20deg); 
 
} 
 

 
.shiny:hover::after { 
 
    left: 150%; 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -o-transition: all 1s; 
 
    -ms-transition: all 1s; 
 
}

<div class="btn shiny">Hover Me</div>

источник

2017-06-18 08:33:43 Amr

создать «блестящий» эффект с использованием градиента css

ответ

Смежные вопросы