elliott richmond

Following on from my previous post about the thinking behind the logo, I now want to explain how I translated this for use on the web, if it’s useful to anyone then my work is done 🙂 If you think it can be done better then feel free to leave a comment, it’s always interesting to hear how it might be done differently.

So the first thing for me to do is to think about a single container div element, this will be declared with “relative” positioning so I can completely control the nested div elements that will be declared with “absolute” positioning [1].

With things like this, it’s not unusual for me to sketch it out so I can see the elements I need to build which in turn will help me to segment and animate the logo later. Wait for it… as I know you’ll think it looks a mess but believe me, if you can visualise like this first it will logically make more sense to you and your sanity as you build it later. My sketch is rough, probably makes no sense to anyone but me! However, in my eyes I can now see all the div elements and shapes I will need for the markup, it looks something like this…

This component is essentially made up of 1 parent div element and 8 nested child elements that will be absolutely positioned shaped div elements. Now I could visualise the logic it was easy enough to create the simple markup like so…

<div class="triggerb-container">
	<div class="leg"></div>
	<div class="eblock one"></div>
	<div class="eblock two"></div>
	<div class="eblock three"></div>
	<div class="eblock four"></div>
	<div class="eblock five"></div>
	<div class="innercircle"></div>
	<div class="circle"></div>
</div>

The parent element has a class of triggerb-container to represent the trigger button that I’ll use later with Javascript. leg is the leg of the letter R, followed by the letter E elements that I’ve given a shared class of eblock along with a sequential representation of each part of the letter E, the shared class means I can style it once with a height and width, the sequentially classes so I can position them and target them individually during the animation later. These are then followed by the circular elements that are effectively individual underlying elements.

If you haven’t noticed I’ve layered the markup logically from top to bottom for my own sanity. I will use z-index [2] in the CSS to move elements in the layer but because all HTML elements are 0 based meaning that any absolute positioning used on an element will be based on a z-index layer of 0 by default it makes sense to logically write your markup line by line in the manner which is readable at the time of coding it up, otherwise it might make things difficult later on. It’s worth pointing out that this is just what works for me on this component, depending on what needs to be achieved just use what works for you; there is no wrong or right way, just different ways 🙂

Let’s walk through my classes in my markup…

.triggerb-container {
	// starts with the basic space and shape
	width: 100px;
	height: 100px;
	// child elements will be relative to this
	position: relative;
	// UX to indicate a gesture on desktop
	cursor: pointer;
}

.triggerb-container .leg {
	// the starting shape
	width: 30px;
	height: 20px;
	// so we can control the positioning
	position: absolute;
	// its a white shape :)
	background: white;
	// bring it up the layers
	z-index: 30;
	// the all important positioning
	bottom: 10px;
	right: 10px;
	transform: rotate(45deg);
	// for later use in animation
	transition: all .3s ease-in-out;
}

.triggerb-container .eblock {
	// the shared shape
	height: 20px;
	width: 50px;
	// standardised position in the layers
	position: absolute;
	z-index: 100;
}

.triggerb-container .eblock.one {
	// its a black shape :)
	background: black;
	// for later use in animation
	transition: all .3s ease-in-out;
}

.triggerb-container .eblock.two {
	// its a white shape :)
	background: white;
	// the all important positioning
	top:20px;
	// for later use in animation
	transition: all .3s ease-in-out;
}

.triggerb-container .eblock.three {
	// its a black shape :)
	background: black;
	// soft rounds to match the letter R
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	// extend the shared shape & extend into the body
	width: 60px;
	// the all important positioning
	top:40px;
	// for later use in animation
	transition: all .3s ease-in-out;
}

.triggerb-container .eblock.four {
	// its a white shape :)
	background: white;
	// the all important positioning
	top:60px;
	// for later use in animation
	transition: all .3s ease-in-out;
}

.triggerb-container .eblock.five {
	// its a black shape :)
	background: black;
	// the all important positioning
	top:80px;
	// for later use in animation
 	transition: all .3s ease-in-out;
}

.triggerb-container .innercircle {
	// standardised position in the layers
	// this is needed later as a background 
	// for the finished animation 
	position: absolute;
	// setting the shape, because we are using a 20px
	// stoke this need to occupy a space minus the
	// stroke within the space which is 40px in total
	width: 60px;
	height: 60px;
	// for a nice radius, half the size is used
	border-radius: 30px;
	// its a white shape :)
	border: solid white 20px;
	// the all important positioning
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	// raised up in the layer but below the E
	z-index: 10;
}

.triggerb-container .circle {
	// standardised position in the layers
	position: absolute;
	// setting the shape
	width: 100px;
	height: 100px;
	// for a nice radius half size of the shape is used
	border-radius: 50px;
	// because we are using a 20px stoke
	border: solid black 20px;
	// for later use in animation
	transition: all .3s ease-in-out;
}

You’ll notice on some classes I’ve declared the ‘transition‘ [3] property, this will be essential for animation later when I create the post on adding the Javascript.

So at this point, we have styled markup that should looks something like this…

Next, I’ll show you how I created the animation on the click event.

References

[1] CSS tricks almanac on positioning
https://css-tricks.com/almanac/properties/p/position/

[2] CSS tricks almanac on z-index
https://css-tricks.com/almanac/properties/z/z-index/

[3] CSS tricks almanac on the transition property
https://css-tricks.com/almanac/properties/t/transition/