Imitation Halken Logo built with only CSS


by Jeremy Caudle
notes

Today I made the mistake of trying to reproduce the Halken logo with just CSS. In the future I think I would opt to do this as an SVG. I ran into an odd issue with selectors on the green bits.

View the code:

HTML and JS 
<div class="codedoodle-block">
			<div class="halken-logo">
					<div class="logo-blue-rounded-rect"></div>
					<div class="logo-blue-rounded-rect"></div>
					<div class="logo-blue-rounded-rect"></div>
					<div class="logo-green-rounded-rect"></div>
					<div class="logo-green-rounded-rect-b"></div>
					<div class="logo-green-circle"></div>
					<div class="logo-green-circle"></div>
			<span class="logo-text">halken</span>
			</div>
			
		</div>
CSS 
body {
tab-size: 1em;
}

.codedoodle-block {
			max-width: 7rem;
			max-height: 7rem;
			margin: 1rem auto;
			padding: 1rem;
			background-image: linear-gradient(-30deg, red 10%, black 33%, black 66%, red 90%);
		}
			
		.halken-logo, .logo-parts {
			margin: 0 auto;
			width: 6rem;
			max-width: 8rem;
			height: 8rem;
			text-align: center;
			position: relative;
		}	
		
		.logo-green-circle {
			position: absolute;
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			background-color: green;
			border: solid 1px transparent;
		}
		
		.logo-green-circle:first-of-type {
			top: -2rem;
			left: -0.125rem;
		}
		.logo-green-circle:last-of-type {
			top: 3.25rem;
			right: .875rem;
		}
		
		.logo-green-rounded-rect {
			position: absolute;
			width: 1rem;
			height: 4.75rem;
			transform: rotate(30deg);
			background-color: green;
			border-radius: 1rem;
			border: solid 1px transparent;
			left: 1rem;
			top: -.25rem;
		}
		
		.logo-green-rounded-rect-b {
			position: absolute;
			width: 1rem;
			height: 4.75rem;
			transform: rotate(30deg);
			background-color: green;
			border-radius: 1rem;
			border: solid 1px transparent;
			left: 3rem;
			top: -.25rem;
		}
		
		.logo-blue-rounded-rect {
			position: absolute;
			width: 1rem;
			height: 4.25rem;
			background-color: blue;
			border-radius: 1rem;
			border: solid 1px transparent;
		}
		
		.logo-blue-rounded-rect:nth-of-type(1) {
			left: 0;
		}
		.logo-blue-rounded-rect:nth-of-type(2) {
			left: 2rem;
		}
		.logo-blue-rounded-rect:nth-of-type(3) {
			left: 4rem;
		}
		
		.logo-text {
			position: absolute;
			top: 4.375rem;
			left: .5rem;
			display: block;
			font-family: sans-serif;
			text-transform: uppercase;
			color: white;
			font-weight: bolder;
			font-size: 1rem;
			text-shadow: 0 0 1px black, 0 1px 1px black, 1px 0 1px black, -1px 0 1px black, 0 -1px 1px black, 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
			transform: scaleX(1.3);
		}

Tags