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-22 14:53
2

Jakie ładne :)

Za eksperta się nie mam... i tak widać, że znasz CSS'y dużo bardziej niż większość populacji tego forum, ze mną włącznie.

edytowany 1x, ostatnio: grzesiek51114, 2016-12-22 15:32

Pozostało 580 znaków

2016-12-22 15:26
1

Wow, szacun za wykonaną pracę!

Pozostało 580 znaków

2016-12-22 16:46
0

fajne, chociaż sam przeźroczysty mały png chyba dużo miejsca nie zajmuje, a w mailach css różnie wygląda w zależności od klienta


Pozostało 580 znaków

2016-12-22 17:31
0

Niestety czyniki email nie obsłużą :after oraz :before :( A szkoda, bo fajnie wyszło.

Pozostało 580 znaków

2016-12-22 17:44
0

To akurat nie jest problemem. Zamiast tego wstawi się divy i tyle. To ma oszczędzić liczbę tagów i w sumie nic więcej. Czytniki to wycinają czy mają jakieś stare silniki?


"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 17:45

Pozostało 580 znaków

2016-12-22 17:46
0

Czytniki email zatrzymały się przy HTML i CSS z 2000 roku ;) Tak więc obsługują tylko podstawowe znaczniki HTML oraz CSS.

Pozostało 580 znaków

2016-12-23 09:31
0

Mistrzu!


Bardzo lubie Singletony, dlatego robię po kilka instancji każdego.

Pozostało 580 znaków

2016-12-23 12:13
0

@Adam Boduch: wersja bez after/before :)

<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 .crescentLeft {
    border-radius: 50%;
    box-shadow: -69px 0 0 10px #A7A8AA;
    content: "";
    height: 478px;
    left: 87px;
    position: absolute;
    top: 58px;
    width: 478px;
}
.icon-4p .crescentRight {
    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 .level1b {
    background-color: inherit;
    height: 50px;
    left: 295px;
    position: absolute;
    top: 190px;
    width: 50px;
}
.icon-4p .level1a {
    background-color: white;
    border-radius: 16px;
    height: 67px;
    left: 326px;
    position: absolute;
    top: 223px;
    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 .level2b {
    background-color: inherit;
    height: 25px;
    left: 322px;
    position: absolute;
    top: 272px;
    width: 25px;
}
.icon-4p .level2a {
    background-color: white;
    border-radius: 16px;
    height: 50px;
    left: 261px;
    position: absolute;
    top: 157px;
    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 .level3b {
    background-color: inherit;
    height: 25px;
    left: 207px;
    position: absolute;
    top: 273px;
    width: 25px;
}
.icon-4p .level3a {
    background-color: white;
    border-radius: 16px;
    height: 50px;
    left: 177px;
    position: absolute;
    top: 240px;
    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 .level4b {
    background-color: inherit;
    height: 25px;
    left: 289px;
    position: absolute;
    top: 386px;
    width: 25px;
}
.icon-4p .level4a {
    background-color: white;
    border-radius: 16px;
    height: 50px;
    left: 261px;
    position: absolute;
    top: 390px;
    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="crescentLeft"></div>
            <div class="crescentRight"></div>
            <div class="level1"></div>
            <div class="level1b"></div>
            <div class="level1a"></div>
            <div class="level2"></div>
            <div class="level2b"></div>
            <div class="level2a"></div>
            <div class="level3"></div>
            <div class="level3b"></div>
            <div class="level3a"></div>
            <div class="level4"></div>
            <div class="level4b"></div>
            <div class="level4a"></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 :)

Pozostało 580 znaków

2016-12-23 12:53
0

No dobra, to "tekstowe" logo to grafika wektorowa, która zajmuje mniej niż bitmapa. Więc SVG praktycznie robi to samo co Ty napisałeś z CSSem :)

edytowany 3x, ostatnio: Spine, 2016-12-23 12:54
Głównie Dla poćwiczenia zwojów mózgowych ;) zainspirowany http://www.bchanx.com/logos-in-pure-css i tym podobnymi - Marooned 2016-12-23 12:57

Pozostało 580 znaków

2016-12-23 12:58
0

@Marooned: przykro mi, ale position: absolute nie jest obsługiwane przez - np. gmail :(

Hehe, no cóż.. to pozostawiamy to w takim razie jako ciekawostkę :) - Marooned 2016-12-23 12:58

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