Maker Party Logo with CSS

Maker Party Logo with CSS

Advert

Maker Party Logos with CSS

Maker Party Logos with CSS

Maker Party is Mozilla's global campaign to teach the web, with help from thousands of volunteers and community-run events around the world. Maker Party unites educators, organizations and enthusiastic web users with hands-on learning and making. More Information on Maker Party

Maker Party is a Campaign that is all about making, after organizing few maker parties and getting thrilled with makes generated during the event, I thought of making something on my own. CSS has been my favorite web scripting so I planned on to go ahead with some CSS mix-ups. I choose to remake the Maker Party resources (logo and word mark), because I didn't find one.

It has been an year since since I used the extreme features in CSS to make logo's or shapes, my previous experiments with CSS :

To make it easier to understand the CSS styles are arranged into different files.

  • shapes.css contains the CSS that make the hexagonal shapes
  • letters.css contains the CSS that makes the Maker Party Word-mark
Maker Party logo

Maker Party Word-Mark

Maker Party Wordmark

Let's get started with the Maker Party Word mark, The word Mark is composed of rectangular Blocks arranged in different positions & directions. In this example the rectangular boxes are given a dimension of Width = 20px and Height = 100px for Vertically aligned rectangles and the opposite for the horizontal once.

The slant boxes in the word marks are Parallelogram, made by applying transform: and skew() property to a rectangular box, in this example the angle of transformation are 20degrees, 30 degrees & their negative values for reverse.

The semicircular rings for P & R is made of rectangular boxes with border-radius greater than their height, this doesn't make them completely. but you will end up with a capsule like object. Now set the background to transparent and give a border of desired thickness and color.

This makes up all the shapes required to make the Maker Party word mark, with a little more magics using CSS position you can end with Maker Party with CSS.


.letter{
         width: 25px;
         height: 100px;
         background-color: #00B0B7;
}
.parallelogram-letter{
         display: inline-block;
         width: 25px;
         -webkit-transform: skew(15deg);
         -moz-transform: skew(15deg);
         -o-transform: skew(15deg);
}
.parallelogram-letter-inv{
         width: 25px;
         -webit-transform: skew(-20deg);
         -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);
}
.horizontal-letter{
         height: 20px; 
         width: 60px;
}
.circuar-letter{
         width: 30px;
         height: 20px;
         background: transparent;
         border: 20px solid #00B0B7;
         border-left-color: transparent;
         -moz-border-radius: 50px;
         -webkit-border-radius: 50px;
         border-radius: 50px;
}

Adding the Positional Magic to the styles will end up in a Maker Party word mark made of CSS and HTML.



<div class="text">
	<div class="letter-container M">
		<div class="M1 letter"></div>
		<div class="M2 letter parallelogram-letter"></div>
		<div class="M3 letter parallelogram-letter-inv"></div>
		<div class="M4 letter "></div>
	</div>
	<div class="letter-container A">
		<div class="A1 letter parallelogram-letter-inv"></div>
		<div class="A2 letter parallelogram-letter"></div>
		<div class="A3 letter horizontal-letter"></div>
	</div>
	<div class="letter-container K">
		<div class="K1 letter"></div>
		<div class="K2 letter parallelogram-letter-inv h55"></div>
		<div class="K3 letter parallelogram-letter h55"></div>
	</div>
	<div class="letter-container E">
		<div class="E1 letter"></div>
		<div class="E2 letter horizontal-letter"></div>
		<div class="E3 letter horizontal-letter"></div>
		<div class="E4 letter horizontal-letter"></div>
	</div>
	<div class="letter-container R">
		<div class="R1 letter"></div>
		<div class="R2 letter circuar-letter"></div>
		<div class="R3 letter parallelogram-letter h55"></div>
	</div>
</div>
<div class="text">
	<div class="letter-container P">
		<div class="P1 letter"></div>
		<div class="P2 letter circuar-letter"></div>
	</div>
	<div class="letter-container A">
		<div class="A1 letter parallelogram-letter-inv"></div>
		<div class="A2 letter parallelogram-letter"></div>
		<div class="A3 letter horizontal-letter"></div>
	</div>
	<div class="letter-container R">
		<div class="R1 letter"></div>
		<div class="R2 letter circuar-letter"></div>
		<div class="R3 letter parallelogram-letter h55"></div>
	</div>
		<div class="letter-container T">
		<div class="T1 letter horizontal-letter"></div>
		<div class="T2 letter"></div>
	</div>
	<div class="letter-container Y">
		<div class="Y1 letter parallelogram-letter"></div>	
		<div class="Y2 letter parallelogram-letter-inv"></div>	
		<div class="Y3 letter"></div>	
	</div>
</div>

Maker Party Logo

Maker Party Logo

With Word Mark in hand, all you need is a hexagonal container to wrap the Maker party Logo in place.The hexagonal shapes consist of three sections

  1. Top Triangle
  2. Center Rectangle
  3. Bottom Triangle

.hexagon .top{
         width: 0;
         border-bottom: 180px solid #00B0B7;
         border-left: 280px solid transparent;
         border-right: 280px solid transparent;
}
.hexagon .bottom{
         width: 0;
         border-top: 180px solid #00B0B7;
         border-left: 280px solid transparent;
         border-right: 280px solid transparent;
}
.hexagon .center{
         width: 560px;
         height: 240px;
         background-color: #00B0B7;
}

HTML codes for the hexagon


With easy to hack build ready, I am hoping to find more hacks & creative ones of Maker Party word mark soon.

Comments

Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain in name field, it might end up as a Spam. Thanks for reading.

Last 5 Articles

All Articles >

  1. Software Testing

     
  2. Best WordPress Themes For Photographers And Photography

     
  3. Problems That Affect Conversion Rates

     
  4. Best WordPress Themes in 2017

     
  5. SEO in 2017: Mobile optimization as a competitive advantage

     

News Letter

Subscribe to our email newsletter for useful tips and valuable resources, sent out every new article release.