純粋なCSSを使用したロゴデザイン

Question

CSSを使用して作成されたいくつかの人々のウェブサイトのロゴが純粋なCSS、画像なしで完成したものを見ました。

私は実際にその仕組みを理解したいと思っています。私はロゴを引き出しました。私はCSSを使って再設計しようとしていましたが、どれほど難しいかを実感しました！だから私はもう少し理解するのを助けるために誰かが自分のコードを訂正できるので、私はそれがどのように完了したかを理解することができます！

ご協力いただきありがとうございます。ありがとうございます。

（PSひどいコーディングが、私はから来ていたどこで見ることができますか？）

これは私がオンライン

#logotop{ 
 
    height:45px; 
 
    width:90px; 
 
    border-radius: 90px 90px 0 0; 
 
    -moz-border-radius: 90px 90px 0 0; 
 
    -webkit-border-radius: 90px 90px 0 0; 
 
    background:green; 
 
} 
 
#logobottom{ 
 
\t overflow: hidden; 
 
    height:45px; 
 
    width:45px; 
 
\t -webkit-border-radius: 0 0 0 150px; 
 
    -moz-border-radius: 0 0 0 150px; 
 
    border-radius: 0 0 0 150px; 
 
\t 
 
    background:green; 
 
\t -webkit-transform: rotate(315deg); 
 
    -moz-transform: rotate(315deg); 
 
    -o-transform: rotate(315deg); 
 
    -ms-transform: rotate(315deg); 
 
    transform: rotate(315deg); 
 

 
\t margin-left: auto ; 
 
    \t margin-right: auto ; 
 
} 
 
#logocenter{ 
 
\t overflow: hidden; 
 
\t position: relative; 
 
    height:55px; 
 
    width:55px; 
 
    border-radius: 90px 90px 90px 90px; 
 
    -moz-border-radius: 90px 90px 90px 90px ; 
 
    -webkit-border-radius: 90px 90px 90px 90px ; 
 
    background:white; 
 
\t margin-top: -72px; 
 
\t margin-left: auto ; 
 
    \t margin-right: auto ; 
 
} 
 
#logocenter2{ 
 
\t overflow: hidden; 
 
\t position: relative; 
 
    height:25px; 
 
    width:25px; 
 
    border-radius: 90px 90px 90px 90px; 
 
    -moz-border-radius: 90px 90px 90px 90px ; 
 
    -webkit-border-radius: 90px 90px 90px 90px ; 
 
    background:green; 
 
\t margin-top: -40px; 
 
\t margin-left: auto ; 
 
    \t margin-right: auto ; 
 
\t 
 
} 
 
#content{ 
 
\t height: 90px; 
 
\t width: 90px; 
 
\t background-color: white; 
 
\t 
 
}

<div id="content"> 
 
<div id="logotop"> 
 
</div> 
 
<div id="logobottom"> 
 
</div> 
 
<div id="logocenter"> 
 
</div> 
 
<div id="logocenter2"> 
 
</div> 
 
</div>

Answer 1

を達成するために何を望むかの簡単なスケッチですTHISのような多くのimg to cssコンバータがありますが、良質の画像を作成して変換してください。

私はちょうどあなたに提案してきたconvetorはピクセル単位を使用するが、そのようなテーブルを聖霊降臨祭：なし「正確な規則はありませんので

<table cellpadding=0 cellspacing=0 height=50 width=50 style="font-size:0px;height:50;width:50"> 
    <tr> 
    <td> 
     <table cellpadding=0 cellspacing=0 height=50 width=50 style="font-size:0px;height:50px;width:50px"> 
     <tr height=0> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
     </table 

DEMO

Answer 2

それは説明するのは簡単ではありません" 説明する。 paolobassoのようなツールを使うことができますが、イメージを行列（テーブル - >セル）で再作成するピクセルベースのツールです。

あなたはN字形の図形の分解ではなく、それについて話していますか？

それは余白に位置決めい

• 各矩形（例：マージン左：オート、マージン右：自動手段 "中心"）および流れ（位置属性）。

• これはbackgroundという特性で色付けされています。

• 寸法はwidthとheightです。

• これは、各ブラウザに低下するborder-radiusと似によって（湾曲）形状の：（transform: rotate(315deg)）それは度で回転することにより形状および寸法'S（ES MOZボーダー半径）

• を

だから、手作りではそういうことはやっかいですが、OpenGLのようなものを純粋なCSSではなく勉強しなければならないということを理解したいのであれば、原則は2Dグラフィックスと同じですが、それはあなたの "四角形"を維持するためのCSSの流れと流れに関するすべてです。 d正しい距離にとどまる。多くの場合、いくつかのオーバーラッピングが必要になります。また、多くの色（シャツのボタンを想像する）があれば、CSS z-indexのプロパティも管理できます。