2

私の目標は、本当にリアルに見えるネジの頭を作ることです。だから今私がやったことは次のとおりです：

<div class="screw"><div class="indent"></div></div>

.screw {

    position: absolute;
    top: 10px;
    left: 49%;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background-image: url('img/nail-head.jpg');
    -moz-box-shadow: 0px 3px 8px #000;
    -webkit-box-shadow: 0px 3px 8px #000;
    box-shadow: 0px 3px 8px #000;

}
.indent {

    height: 10px;
    width: 30px;
    margin-top: 10px;
    background-image: url('img/nail-head.jpg');
    -moz-box-shadow: inset 0px 3px 8px #222;
    -webkit-box-shadow: inset 0px 3px 8px #222;
    box-shadow: inset 0px 3px 8px #222;
    transform:rotate(150deg);
    -ms-transform:rotate(150deg); 
    -webkit-transform:rotate(150deg);
    border-radius: 2px;

}

また、ネジが飛び出しているように見えるように、ネジの周りに小さな影を追加します。これを「リアル」に見せるにはどうすればよいですか。どんなヒントも素晴らしいでしょう！

4

1 に答える 1

7

さて、これが私の試みです。

円にグレーのグラデーションを適用し、境界線を追加して影を変更しました。

box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.1);

http://jsfiddle.net/Hfw2D/

注: すべてのブラウザー (-ms、-moz など) のルールを書いたわけではありません。クロムでテスト済み。

于 2013-07-28T17:25:24.047 に答える