Logo 4programmers w CSS

Odpowiedz Nowy wątek
2016-12-22 14:51
17

Dla poćwiczenia zwojów mózgowych oraz ewentualnej zamiany obecnego logo (np. w mailach) z formy graficznej na wersję tekstową, zrobiłem swoje pierwsze logo w CSS. Póki co sama ikona, nie szperałem, czy font jest gdzieś dostępny (@Adam Boduch?).

Za eksperta się nie mam, więc jeśli ktoś chce się pobawić i zmniejszyć kod, to zapraszam, bo obecnie to nieco przydługi się wydaje.
W kodzie jest ukryty obrazek - eksport .svg sporego rozmiaru z Inkspace - dla porównania (są pomijalne niuanse rzędu pikseli).

Niestety, nie znalazłem sposobu, by wycinanki były przeźroczyste, więc obecnie są białe (większość :after) co wymusza kolor tła - w tej kwestii ta wersja przegrywa z .png. Może ktoś zna jakieś sztuczki w tej kwestii.

Przydałoby się też pewnie łatwiejsze ustalanie rozmiaru - choć zawsze można transform: scale() na parencie, ale wolę jednak konkretne wartości.
Zachęcam do poprawek :)

https://jsfiddle.net/d28sygtz/

<html>
<head>
<style>
body {
    align-items: center;
    background-color: lightgray;
    display: flex;
    height: 100%;
    justify-content: center;
}
img {
    position: absolute;
    display: none;
}
.icon-4p-background {
    background-color: white;
    height: 594px;
    position: relative;
    width: 616px;
}
.icon-4p {
    background-color: #97BE0D;
}
.icon-4p:before {
    border-radius: 50%;
    box-shadow: -69px 0 0 10px #A7A8AA;
    content: "";
    height: 478px;
    left: 87px;
    position: absolute;
    top: 58px;
    width: 478px;
}
.icon-4p:after {
    border-radius: 50%;
    box-shadow: 80px 0 0 12px #878889;
    content: "";
    height: 554px;
    left: -38px;
    position: absolute;
    top: 20px;
    width: 554px;
}
 
.icon-4p .level1 {
    background-color: inherit;
    border-radius: 25px;
    height: 100px;
    left: 311px;
    position: absolute;
    top: 123px;
    width: 100px;
}
.icon-4p .level1:before {
    background-color: inherit;
    content: "";
    height: 50px;
    left: -16px;
    position: absolute;
    top: 67px;
    width: 50px;
}
.icon-4p .level1:after {
    background-color: white;
    border-radius: 16px;
    content: "";
    height: 67px;
    left: 15px;
    position: absolute;
    top: 100px;
    width: 50px;
    z-index: 1;
}
 
.icon-4p .level2 {
    background-color: inherit;
    border-radius: 25px;
    height: 100px;
    left: 227px;
    position: absolute;
    top: 207px;
    width: 100px;
}
.icon-4p .level2:before {
    background-color: inherit;
    content: "";
    height: 25px;
    left: 95px;
    position: absolute;
    top: 65px;
    width: 25px;
}
.icon-4p .level2:after {
    background-color: white;
    border-radius: 16px;
    content: "";
    height: 50px;
    left: 34px;
    position: absolute;
    top: -50px;
    width: 50px;
}
 
.icon-4p .level3 {
    background-color: inherit;
    border-radius: 25px 25px 0;
    height: 100px;
    left: 143px;
    position: absolute;
    top: 290px;
    width: 268px;
}
.icon-4p .level3:before {
    background-color: inherit;
    content: "";
    height: 25px;
    left: 64px;
    position: absolute;
    top: -17px;
    width: 25px;
}
.icon-4p .level3:after {
    background-color: white;
    border-radius: 16px;
    content: "";
    height: 50px;
    left: 34px;
    position: absolute;
    top: -50px;
    width: 50px;
}
 
.icon-4p .level4 {
    background-color: inherit;
    border-radius: 0 0 25px 25px;
    height: 100px;
    left: 311px;
    position: absolute;
    top: 375px;
    width: 100px;
}
.icon-4p .level4:before {
    background-color: inherit;
    content: "";
    height: 25px;
    left: -22px;
    position: absolute;
    top: 11px;
    width: 25px;
}
.icon-4p .level4:after {
    background-color: white;
    border-radius: 16px;
    content: "";
    height: 50px;
    left: -50px;
    position: absolute;
    top: 15px;
    width: 50px;
}
</style>
</head>
<body>
    <img src="http://i.imgur.com/kqiJ5xp.png" width="600px">
    <div class="icon-4p-background">
        <div class="icon-4p">
            <div class="level1"></div>
            <div class="level2"></div>
            <div class="level3"></div>
            <div class="level4"></div>
        </div>
    </div>
</body>
</html>

"In the brave new world of the year 2000, a kiss can still break your heart." - Program from Cirque du Soleil's Alegría
Nad tymi gwiazdami jest wszechświat szybujących potworów! Wiedziałaś?
2GB za free :)
edytowany 1x, ostatnio: Marooned, 2016-12-22 14:55

Pozostało 580 znaków

2016-12-23 13:08
1

plik z kodem ponad 3kb, moje logo w png 1,11kb
ale jako ciekawostka fajne, nie można zaprzeczyć

screenshot-20161223130802.png

ale twoje logo w png, zostanie uwalone w klientach poczty. - Koziołek 2016-12-24 16:51
to już kwestia dopieszczenia, w jpegu 1,4kb, też do przeżycia :) - czysteskarpety 2016-12-24 19:20
Koziołkowi chodzi o to, że klienty poczty domyślnie nie pokazują obrazków - i stąd wersje w css mają jakiś sens - jak widać, nie do końca z racji wspierania styli - Marooned 2016-12-27 10:19
obrazek png/jpeg ma wg mnie jednak wiekszy sens przy grafice, grafika css z czasem, nawet ta dopieszczona degraduje do wygladu nie-wiadomo-czego (upgrady silnikow). - vpiotr 2017-01-03 04:49

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0