Logo 4programmers w CSS :: 4programmers.net

Marooned

2016-12-22 13:51

Marooned2016-12-22 13:51

Administrator

Rejestracja:ponad 22 lata
Ostatnio:około 6 godzin
Lokalizacja:Poznań

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/

Kopiuj

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

edytowany 1x, ostatnio: Marooned 2016-12-22 13:55

grzesiek51114

2016-12-22 13:53

~~grzesiek51114~~2016-12-22 13:53

Rejestracja:ponad 11 lat
Ostatnio:ponad 4 lata
Postów:2442

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 14:32

Adam Boduch

2016-12-22 14:26

Adam Boduch2016-12-22 14:26

Administrator

Rejestracja:około 23 lata
Ostatnio:około 2 godziny
Postów:11948

1

Wow, szacun za wykonaną pracę!

czysteskarpety

2016-12-22 15:46

~~czysteskarpety~~2016-12-22 15:46

Rejestracja:około 10 lat
Ostatnio:ponad 4 lata
Lokalizacja:Piwnica
Postów:7697

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

Adam Boduch

2016-12-22 16:31

Adam Boduch2016-12-22 16:31

Administrator

Rejestracja:około 23 lata
Ostatnio:około 2 godziny
Postów:11948

0

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

Marooned

2016-12-22 16:44

Marooned2016-12-22 16:44

Administrator

Rejestracja:ponad 22 lata
Ostatnio:około 6 godzin
Lokalizacja:Poznań

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?

edytowany 1x, ostatnio: Marooned 2016-12-22 16:45

Adam Boduch

2016-12-22 16:46

Adam Boduch2016-12-22 16:46

Administrator

Rejestracja:około 23 lata
Ostatnio:około 2 godziny
Postów:11948

0

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

jarekr000000

2016-12-23 08:31

jarekr0000002016-12-23 08:31

Rejestracja:ponad 8 lat
Ostatnio:około 2 godziny
Lokalizacja:U krasnoludów - pod górą
Postów:4709

1

Mistrzu!

Marooned

2016-12-23 11:13

Marooned2016-12-23 11:13

Administrator

Rejestracja:ponad 22 lata
Ostatnio:około 6 godzin
Lokalizacja:Poznań

0

@Adam Boduch: wersja bez after/before :)

Kopiuj

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

Spine

2016-12-23 11:53

Spine2016-12-23 11:53

Rejestracja:około 22 lata
Ostatnio:2 minuty
Postów:6693

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 11:54

Marooned 2016-12-23 11:57

Głównie Dla poćwiczenia zwojów mózgowych ;) zainspirowany http://www.bchanx.com/logos-in-pure-css i tym podobnymi

Adam Boduch

2016-12-23 11:58

Adam Boduch2016-12-23 11:58

Administrator

Rejestracja:około 23 lata
Ostatnio:około 2 godziny
Postów:11948

0

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

Marooned 2016-12-23 11:58

Hehe, no cóż.. to pozostawiamy to w takim razie jako ciekawostkę :)

czysteskarpety

2016-12-23 12:08

~~czysteskarpety~~2016-12-23 12:08

Rejestracja:około 10 lat
Ostatnio:ponad 4 lata
Lokalizacja:Piwnica
Postów:7697

2

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

screenshot-20161223130802.png (1 KB) - ściągnięć: 167

Koziołek 2016-12-24 15:51

ale twoje logo w png, zostanie uwalone w klientach poczty.

~~czysteskarpety~~ 2016-12-24 18:20

to już kwestia dopieszczenia, w jpegu 1,4kb, też do przeżycia :)

Marooned 2016-12-27 09:19

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

~~vpiotr~~ 2017-01-03 03:49

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

Logo 4programmers w CSS

Marooned

grzesiek51114

Adam Boduch

czysteskarpety

Adam Boduch

Marooned

Adam Boduch

jarekr000000

Marooned

Spine

Adam Boduch

czysteskarpety

PHP + Codeigniter 4 programista, aplikacja do fakturowania

React Frontend Developer

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami