7

練習と楽しみのために、純粋な CSS で次のロゴを 1 つの要素で再作成しようとしています。

お気付きのように、各「バー」には小さな影付きの灰色の領域があり、奥行き感があります。可能であれば、これらを純粋な CSS で作成したいと考えています。私にとってトリッキーなことは、それらがバーの上にあるバーの後ろにあるように見えることです。そのため、全体にマスクを適用するのではなく、それを行うには個々のバーレベルにする必要があります.

これまでのところ、疑似要素といくつかのボックス シャドウを使用してバーを作成し、グラデーションと を使用して B に色を与えることができましたbackground-clip: text。

通常、回転した要素またはマスクを使用して影を適用しますが、ボックス シャドウを使用してバーを作成したため、それらを個々の影に適用する方法がわかりません。すべて 1 つの影ですが、他のバーを覆わずに 1 つのバーに適用することを意味します)

これが私がこれまでに持っているものです

私のコード

<div class='B'>B</div>

body {
    background:#FFF8E6;
}
.B {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-150px;
    line-height:236px;
    font-size:225pt;
    font-weight:bold;
    font-family:'Carrois Gothic SC', sans-serif;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(9%, #FFBF7F), color-stop(9%, #F4A668), color-stop(19.6%, #F4A668), color-stop(19.9%, #F38669), color-stop(28.7%, #F38669), color-stop(29%, #AF9F88), color-stop(49%, #AF9F88), color-stop(49%, #cfb698), color-stop(70%, #cfb698), color-stop(70%, #ecd2b1));
    color:transparent;
    -webkit-background-clip: text;
}
.B:after {
    content:'';
    z-index:-1;
    position:absolute;
    left:-387px;
    height:45px;
    width:150px;
    border-radius: 0px 0px 0px 50px;
    box-shadow: 180px -12px 0 -9pt #FFBF7F, 220px -12px 0 -9pt #FFBF7F, 276px -12px 0 -9pt #FFBF7F, 215px 11px 0 -8pt #F4A668, 220px 11px 0 -8pt #F4A668, 275px 11px 0 -8pt #F4A668, 255px 33px 0 -8pt #F38669, 275px 33px 0 -8pt #F38669, 255px 56px 0 -9pt #898481, 276px 56px 0 -9pt #898481,
    /* I DON'T KNOW HOW TO FLIP THESE WITHOUT ADDING AN ELEMENT */
    275px 78px 0 -8pt #A4978E, 300px 101px 0 -8pt #B8A28A,
    /************************************************************/
    250px 90px 0 0px #CABBA8, 190px 45px 0 0px #CCBCAC, 150px 0 0 0px #FCCDA1;
}

今、私はこれが可能だとは思いませんが、SO ユーザーの創意工夫にはいつも驚かされます。

TL,DR要素を追加せずにこれらの斜めの影を作成するにはどうすればよいですか? 必要に応じて、現在使用している方法以外の方法も受け入れます

編集：これが最終結果です

4

2 に答える 2

1

ええと、私はその質問を開いたままにすることができませんでした...

私はあなたのアプローチを使用してそれを解決することができませんでした。傾斜した影を作成することは可能で、円形の境界線の下でクリップすることはできませんでした (少なくとも私は方法を見つけていません)。

別の方法: 大量の背景を使用する:

.B:before {
    content:'';
    position:absolute;
    left: -237px;
    height:135px;
    width: 258px;
    background-image: linear-gradient(0deg,#898481,#898481),
            radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
            linear-gradient(0deg,#898481,#898481),
            radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
            linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px),            
            radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
            linear-gradient(0deg,#ccbcac,#ccbcac),
            linear-gradient(0deg,#898481,#898481), 
            radial-gradient(circle at top right, #898481 22px, transparent 22px),
            linear-gradient(187deg,#B46550 2px,#f38669 24px),
            radial-gradient(circle at top right, #f38669 22px, transparent 22px),
            linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px),
            radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
            linear-gradient(0deg,#ccbcac,#ccbcac), 
            linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px),
            radial-gradient(circle at top right, #f4a668 22px, transparent 22px),
            linear-gradient(0deg,#ffbf7f,#ffbf7f), 
            radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
            radial-gradient(circle at top right, #fccda1 44px, transparent 30px),
            linear-gradient(0deg,#FCCDA1,#fccda1); 
    background-position: 
          185px 110px, 163px 110px, 163px 88px, 144px 88px, 106px 88px,
          41px 88px, 137px 88px,            
          142px 66px, 120px 66px,
          142px 44px, 120px 44px,
           64px 44px,42px 44px, 
78px 44px,   97px 22px, 76px 22px, 65px 0px, 43px -1px, 0px 0px, 44px 0px;
    background-size: 198px 22px, 22px 22px,198px 22px, 22px 22px, 76px 22px, 96px 44px, 200px 44px,198px 22px, 22px 22px,198px 22px, 22px 22px, 96px 44px, 44px 44px, 200px 44px, 198px 22px, 22px 22px, 198px 22px, 22px 22px, 44px 44px, 200px 44px;
    background-repeat: no-repeat;    
}

背景のほとんどは、すでに持っているデザインの一部を再現するために使用されます。形状を取得するには、左側に円形の背景がある長方形の背景が必要です。

影には、2 つのテクニックが使用されます。

簡単なのは、長方形の領域にすべての影が含まれている場合です。次に、長方形の領域を作成しているのと同じ線形グラデーションを使用して、より暗い色合いを与えるだけで取得できます。

丸の部分に重なるものほど難しい。ここでは、影用に別の背景画像を使用する必要がありました。

結果

Chrome で結果を検証しただけです。

もちろん、このテクニックは手紙にも使えます:

手紙の更新された CSS

.B {
    position:absolute;
    top: 200px;
    left: 300px;
    margin-top:-150px;
    line-height:236px;
    font-size:225pt;
    font-weight:bold;
    font-family:'Carrois Gothic SC', sans-serif;
    background-image: 
         linear-gradient(187deg,#FFBF7F,#FFBF7F),
         linear-gradient(187deg,#cc8650,#F4A668),
         linear-gradient(195deg,#B46550,#F38669),
         linear-gradient(187deg,#8A7668 25px,#AF9F88 35px),
         linear-gradient(187deg,#af9678,#cfb698),
         linear-gradient(187deg,#dcc2a1,#ecd2b1);
    background-position: 
          0px 0px, 0px 9%, 0px 20%, 0px 30%, 0px 60%, 0px 100%;
    background-size: 200px 9%, 200px 11%, 200px 10%, 200px 30%, 200px 30%, 200px 30%, 200px 40%;
    background-repeat: no-repeat;
    color: transparent;
    -webkit-background-clip: text;
}

コメント付きの背景 CSS

background-image: linear-gradient(0deg,#898481,#898481),   /* second small bar in last big bar */
    radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
    linear-gradient(0deg,#898481,#898481),                 /* first small bar in last big bar */
    radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
    linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px),        /* shadow */    
    radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),    /* last big bar */ 
    linear-gradient(0deg,#ccbcac,#ccbcac),
    linear-gradient(0deg,#898481,#898481),          /* second small bar in second big bar */
    radial-gradient(circle at top right, #898481 22px, transparent 22px),    
    linear-gradient(187deg,#B46550 2px,#f38669 24px),  /* first small bar in 2nd big bar (shadowed) */
    radial-gradient(circle at top right, #f38669 22px, transparent 22px),     
    linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px),   /* shadow on second big bar */
    radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),   /* second big bar */    
    linear-gradient(0deg,#ccbcac,#ccbcac), 
    linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px),  /* second small bar on top (shadowed) */
    radial-gradient(circle at top right, #f4a668 22px, transparent 22px),   
    linear-gradient(0deg,#ffbf7f,#ffbf7f),                        /* first small bar on top */
    radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
    radial-gradient(circle at top right, #fccda1 44px, transparent 30px), /* big bar on top */
    linear-gradient(0deg,#FCCDA1,#fccda1);

完璧ではありませんが、放射状グラデーションの別のステップで円に影を付けることができます。

radial-gradient(circle at top right, #fccda1 42px, #AC8D70 44px, transparent 45px)

その場合の影は境界線と同心でなければならないという制限があります。代わりに、別の背景を設定することもできます。楕円形の背景にすることもできます。

円の影

于 2014-01-18T18:57:37.357 に答える
0

すべての行を個別の DIV に分割し、次のコードを使用して目的の SHADOW EFFECT を作成することをお勧めします。

/*==================================================
 *                SHADOW EFFECT 
 * ===============================================*/

.div
{
  position: relative;
}
.div:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 9px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 19px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

これは、望ましい結果を達成するのに非常に役立ちます。ニーズや要件に応じて変更できます。

これがあなたを助けることを願っています！

于 2014-01-18T06:23:54.587 に答える