CSSを使用して表面の影効果を実現する方法のサンプルコードの共有

プロジェクトに取り組んでいるときに、とてもゴージャスなデザイン画に出会ったらどうなるかわかりません。デザイン画の中には、より立体的に見せるために影を使ったりすることがよくありますが、私のような怠け者は、ただ単に図面を切り出すだけです。コードの実装方法を勉強することさえ考えていませんでした。

その後、私たちのデザイン草案は何度も修正され、もし彼が図面を変更した場合、私はそれらを切り取って元の図面に置き換えるでしょう。そこで私はこれを研究することにしました。実際、それは達成できるのです。

写真に示すように:

上記の効果は、毎日のライティング プロジェクトの最も典型的な効果です。PS が数分で実行できることは知っているはずですが、コードで実装することもできますか? ——彼らにこう伝えてください。それはきっと可能です!ハハオ(∩_∩)o; 偉そうなことを言うなら、研究に力を入れるべきですよ！

パート 1: HTML

ページ パーツの内容は非常にシンプルです。次に、CSS パーツを見てみましょう。

<p class="con yy">
     <h1 id="曲线阴影">曲线阴影</h1></p><ul class="box">
     <li><img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="CSSを使用して表面の影効果を実現する方法のサンプルコードの共有" ></li>
     <li><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="CSSを使用して表面の影効果を実現する方法のサンプルコードの共有" ></li>
     <li><img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="CSSを使用して表面の影効果を実現する方法のサンプルコードの共有" ></li></ul>

パート 2: CSS3

上の図を見たとき、誰もが CSS3 の box-shadow を第一印象に思うでしょう でも、このままなら達成できるでしょうか?そうではないことは明らかです。

曲がっていても、歪んでいても、box-shadowは単独では実現できません。それを実現するにはCSS3の疑似クラス要素と連携する必要があります。

コードを見てみましょう!

次のコードで表面の影を実装できます。疑似クラス要素に詳しくない人は、ドキュメントを自分で確認してください。

*{ padding: 0; margin: 0; list-style: none;}.con{ 
    width: 70%; 
    height: 200px;
    margin: 50px auto;
    background:#FFFFFF;
    line-height: 200px;
    text-align: center;
    font-size: 24px;
}.yy{
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}.yy:after , .yy:before{
    position: absolute;
    content: '';
    top: 50%;
    bottom: -1px;
    left: 10px;
   right: 10px;
    background:#fff;
    z-index: -1;    /* 圆角水平为100px 垂直为10px 必须用‘/’分开 ，不可以为空格 */
    border-radius: 100px/10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);
   -o-box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

次のコードは、シャドウをワープする効果を実現する方法です:

.box{ 
    width: 980px;
    height: 300px;
    margin: 0 auto; 
}.box li img{
    display: block;
    width: 290px;
    height: 200px;
}.box li{
   position: relative;
    float: left;
    width: 290px;
    height: 200px;
    background: #FFFFFF;
    padding: 5px;
    margin-right: 25px;
    box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset; 
}.box li:before{
    position:absolute;
    content: '';
    width: 90%;
    height: 80%;
    left: 18px;
    bottom: 11px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    transform: skew(-12deg) rotate(-5deg);
    -moz-transform: skew(-12deg) rotate(-5deg);
    -webkit-transform: skew(-12deg) rotate(-5deg);
    -o-transform: skew(-12deg) rotate(-5deg); 
}.box li:after{
    position:absolute;
    content: '';
    width: 90%;
    height: 80%;
    right: 18px;
    bottom: 11px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    transform: skew(12deg) rotate(5deg);
    -moz-transform: skew(12deg) rotate(5deg);
    -webkit-transform: skew(12deg) rotate(5deg);
    -o-transform: skew(12deg) rotate(5deg); 
}

以上がCSSを使用して表面の影効果を実現する方法のサンプルコードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。