DIY#4 – Jak samemu zrobić logo Chrome w CSS3

Dawno nie było nic z „jak zrobić”, więc dziś zapraszam na lekcję o robieniu loga Chrome w CSS3.
Trochę teorii: logo Chrome jakie jest każdy wie. Cztery kształty w czterech kolorach :)

Dziś pokaże Ci jak je odtworzyć w HTMLu. Zapraszam
Na początek struktura:

[html]
<div class="logo border-radius">
<div class="yellow"></div>
<div class="center border-radius"></div>
</div>
[/html]

Oraz jej objaśnienie:
Potrzebujemy 4 elementów:

• Zielony
• Czerwony
• Żółty
• Niebieski

Użyjemy dla nich odpowiednio klas:

• .logo:after
• .logo:before
• .yellow oraz .logo (dlaczego tak? Dowiesz się poniżej)
• .center

Oraz klasy .border-radius w celu ładnego zaokrąglenia całego logo jak i jego środka. Użyjemy tego samego CSSa w 2 miejscach więc tworzymy klasę w celu optymalizacji (bardzo mądre i popularne słowo).

Na początek ustalmy sobie właściwość box-sizing dla wszystkich elementów na border-box czyli wszelkie bordery i paddingi będą się liczyły do wewnątrz od ustalonych wymiarów. Nie zapominamy o prefixach przeglądarek.

[css]

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

[/css]

Oraz .border-radius:

[css]
.border-radius{
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}
[/css]

Zacznijmy działać. Na początek jako tło dajemy sobie element żółty:

[css]
.logo {
width: 338px;
height: 338px;
overflow: hidden;
position: relative;
margin: 50px auto 0;
background-image: linear-gradient(45deg, #e1b131, #fdd901);
cursor: pointer;
}
[/css]

Wysokości oraz szerokości powinny być wartościami parzystymi. Dzięki temu nasze logo będzie symetryczne. Wszystko co poza naszym obszarem chowamy, oddalamy od góry żeby lepiej się prezentowało i nadajemy żółte tło jako gradient.
Następnie tworzymy nasz środkowy okrąg:

[css]
.center-element {
width: 154px;
height: 154px;
background-color: #4695ce;
position: absolute;
top: 50%;
left: 50%;
margin: -77px 0 0 -77px;
z-index: 4;
border: 15px solid #fff;
}
[/css]

Tak samo jak wcześniej – widht i height parzyste. Tło niebieskie. Centrujemy element idealnie na środek: top: 50%, margin -połowa wysokości elementu czyli -77px. Tak samo robimy ze środkiem horyzontalnym: left i margin. Mamy 4 elementy, więc nasz środek musi być na samej górze: z-index: 4. Dodajemy białe obramowanie od krawędzi do wewnątrz (dzięki box-sizing). Aktualnie powinno to wyglądać tak:

Dodajmy zielony element:

[css]
.logo:after {
    content: ”;
    width: 350px;
   height: 350px;
   position: absolute;
   background-image: linear-gradient(45deg, #419756, #5bc154);
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   left: -188px;
   top: 36px;
   z-index: 2;
}
[/css]

Wysokość i szerokość tutaj już parzysta nie musi być, ale niech będzie nieco większa niż szerokość całego logo – dla bezpieczeństwa ;) Dodajemy zielone tło oraz obracamy element pod kątem 45 stopni. Z-index:2 żeby wszystko było po kolei. Left i top ustawiamy tak, żeby wyglądało dobrze – zależeć będzie od całkowitych wymiarów naszego logo.

Efekt:

No to lecimy z czerwonym:

[css]
.logo:before {
content: ”;
width: 350px;
height: 350px;
position: absolute;
background-image: linear-gradient(45deg, #e43731, #f3806b);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
left: 2px;
top: -192px;
z-index: 3;
}
[/css]

Podobnie jak z zielonym: Wysokość i szerokość większa niż całe logo, tło czerwone, obracamy o 60 stopni, z-index większy o 1 i ustawiamy w odpowiedniej pozycji.

Efekt:

Już prawie na miejscu. Prawie bo ten żółty nie jest taki jaki powinien :) po to mamy element .yellow:

[css]
.yellow {
width: 180px;
height: 55px;
position: absolute;
right: 0;
z-index: 3;
top: 95px;
background-color: #F6CF0D;
}
[/css]

Już wyjaśniam. Ten żółty prostokąt jest nam potrzebny po to aby żółta część wyglądała tak jak powinna czyli: zmiana kąta nachylenia końcówki:)  Nie ma tutaj zbyt wiele tłumaczenia: kolor taki jak koniec gradientu w miejscu styku z czerwienią i odpowiednia pozycja.

Efekt:

Mamy ikonę Chrome!

Teraz dajmy jej trochę ruchu :)

Dopisujemy do .logo animacje ze wszystkimi prefixami:

[css]
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
[/css]

oraz efekt po najechaniu myszką:

[css]
.logo:hover {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
[/css]

Jeśli wymiary logo będą nieparzyste podczas kręcenia będzie się wydawało scentrowane :)

Dziękuję za uwagę. Gotowy efekt możecie zobaczyć tutaj. 

Zapraszam również na wcześniejsze DIY:

DIY#3 – Elementy menu zawsze wyjustowane na całej szerokości kontenera

DIY#2.5 – Custom checkbox i radio button – tylko CSS

DIY#2 – Custom checkbox i radio button – na obrazkach

DIY#1 – Selektor plików