Как создать такой "блестящий" эффект, используя CSS градиенты?

Question

Как создать такой "блестящий" эффект, используя CSS градиенты?

Можно ли создать следующее, используя только CSS?

Введите описание изображения здесь

Я создал контейнер и закругленные углы. Скрипка здесь .

Но я не знаю, как получить легкий блестящий эффект. Можно ли это сделать в CSS? Если да, то как?

Ниже приведен код, который я написал до сих пор.

HTML

<div id="phone-outer">

    <div id="phone-inner">



    </div>

</div>

CSS

#phone-outer {

    margin-bottom:200px;

    margin:0 auto;  

    width:400px;

    height:500px;

    background-color:#333;

    -webkit-border-bottom-right-radius:25px;

    -webkit-border-bottom-left-radius:25px;

    -moz-border-radius-bottomright:25px;

    -moz-border-radius-bottomleft:25px;

    border-bottom-right-radius:25px;

    border-bottom-left-radius:25px;

}



#phone-inner {

    margin:0 auto;

    background-color:#FFF;

    width:360px;

    height:460px;   

}

797 4

html css css3 gradient

4 ответов:

Comments

Ничего не найдено.

KBN · Accepted Answer · 2013-02-13 16:16:34

Достаточно близко, я надеюсь:

Http://jsfiddle.net/UxSdU/13/

#phone-outer {    
    border: 1px solid #FFFFFF;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;

    box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;

    height: 500px;
    width: 400px;
    margin: 0 auto;


    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%);
}

David · Accepted Answer · 2013-02-13 15:47:28

Если вы ищете тонкое градиентное свечение, что-то вроде этого должно сделать это:
background:#222 -webkit-radial-gradient(20% 80%, 60% 60%, rgba(255,255,255,.15), rgba(255,255,255,0));
Это для webkit, вы можете применить эквиваленты-moz и-o в зависимости от вашей таблицы поддержки.

Вы также можете добавить несколько теней коробки, чтобы создать черную тень, например:
box-shadow:0px 2px .7px 1px #777, inset 0 -7px rgba(0,0,0,.4);
Вот демо: http://jsbin.com/opinaj/4

defau1t · Accepted Answer · 2013-02-13 15:22:24

Да, вы можете использовать свойство Box-Shadow,
 box-shadow:0px 0px 0px 3px #666;
Обновленная скрипка здесь:

Http://jsfiddle.net/UxSdU/2/

Обновление:

Для этого можно использовать border:

Обновленная Скрипка:

Http://jsfiddle.net/UxSdU/6/

James Coyle · Accepted Answer · 2013-02-13 15:11:35

Немного поиграйте с этим http://www.colorzilla.com/gradient-editor/ и вы, возможно, сможете что-то выяснить. Хотя фоновое изображение было бы намного проще. Есть причины, почему вы не можете просто использовать этот образ?