DIY#4 - Jak samemu zrobić logo Chrome w CSS3 | DailyWeb.pl - codziennie o sieci

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

Opublikowano 3 lata temu - 4


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:

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

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.


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

Oraz .border-radius:

.border-radius{
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
}

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

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

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:

.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;
}

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:
1

 

Dodajmy zielony element:

.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;
}

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:

2

 

No to lecimy z czerwonym:

.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;
}

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:

3

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

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

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:

4

Mamy ikonę Chrome!

Teraz dajmy jej trochę ruchu :)

Dopisujemy do .logo animacje ze wszystkimi prefixami:

    -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;

oraz efekt po najechaniu myszką:

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

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