Projektowanie logo za pomocą czystego CSS

Question

Tak więc widziałem kilka naprawdę fajnych rzeczy wykonanych przy użyciu CSS i widziałem, że niektóre strony internetowe logo zostały wykonane w czystym CSS, bez obrazów.

Naprawdę chcę zrozumieć, jak to się stało, wyciągnąłem logo, które miałem zamiar przeprojektować za pomocą CSS, ale zdałem sobie sprawę, jak ciężko jest naprawdę! Aby pomóc mi to zrozumieć, mógłbym trochę poprawić mój kod, abym mógł zrozumieć, jak to się robi!

Każda pomoc jest doceniana :) Dzięki.

(ps strasznie kodowanie ale można zobaczyć, gdzie się bierze?)

Jest to szybki szkic tego, co chciałem osiągnąć

#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

Internecie istnieje wiele konwerterów img na css, takich jak THIS, ale powinieneś zrobić obraz dobrej jakości i spróbować go przekonwertować.

convetor że właśnie zaproponował wam używać piksela na piksel odrobina tabela tak:

<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

To nie jest łatwe do wyjaśnienia, ponieważ nie ma „dokładnych zasad " wytłumaczyć. Możesz użyć narzędzia, takiego jak narzędzie Paolobasso, ale jest to oparte na pikselach narzędzie, które po prostu odtwarza obraz za pomocą macierzy (tabela -> komórka).

O czym mówisz, jest to dekompozycja liczby w N rectagles.

Każdy prostokąt

• to umieszczone z marginesami (przykład: margin-left: auto, margin-right: auto środki "skoncentrowane") i przepływu (atrybut position).

• Jest barwiona właściwością background.

• Jest zwymiarowany przez width i height.

• To kształcie (wygięte) przez border-radius i podobny spadek do każdej przeglądarki (es: moz-border-radius)

• to kształt i wymiary przez obrót w stopniach (transform: rotate(315deg))

Tak więc, trudno jest robić takie rzeczy, ale jeśli chcesz zrozumieć, że musisz uczyć się czegoś takiego jak OpenGL, a nie czystego css, zasady są takie same jak w przypadku grafiki 2D, w każdym razie nie ma nic więcej do powiedzenia, odpocznij wszystko zależy od przepływu css i przepływu, aby twoje "prostokąty" pozostały na zawsze d pozostać w prawidłowej odległości. Często potrzebujesz trochę nakładania się i, jeśli masz dużo kolorów (wyobraź sobie przycisk na koszulce), aby zarządzać także własnością css z-index.