Logo 4programmers w CSS

19

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

1

Wow, szacun za wykonaną pracę!

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

0

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

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?

0

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

1

Mistrzu!

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

0

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

2

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

screenshot-20161223130802.png

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