Fresh Beginning
  • Home
  • Portfolio
  • My Clothing Shop
  • Etsy Clothing Store
  • Buy Me A Coffee
  • Patreon
  • Speaking
  • Reading
  • About Me
  • Contact Me
Subscribe
CSS

Making Wayfair logo with CSS

  • Jayesh Kawli

Jayesh Kawli

Jul 24, 2016 • 4 min read

Right now I am so excited to get a job offer from Wayfair Inc. I cannot tell how happy I am. One of the things I liked most about Wayfair was their creative logo. It is as vibrant as it could get.

This weekend having spend my most of the time working on finding apartments and movers I finally had couple of hours to do something creative. It'd been a while since I wrote web code, may it be a CSS, JavaScript or HTML. So I though why not try my brain at recreating Wayfair logo with CSS and HTML?

To give you an idea, here's how Wayfair logo looks like

Wayfair_logo

So, as opposed to my expectation this task turned out to be more challenging and fun than I initially expected. I will save you from reading the entire code, but will take you through the approach I took to make a logo.

Let's make out an hierarchy of subparts associated with this logo first,

wayfair_logo_with_annotations

  • Center Square (E)
  • Top left pointer
    • A triangle (A)
    • An associated rectangle (B)
  • Top right pointer
    • A triangle (D)
    • An associated rectangle (C)
  • Bottom left pointer
    • A triangle (F)
    • An associated rectangle (G)
  • Bottom right pointer
    • A triangle (I)
    • An associated rectangle (H)

Also, I used a tool to pick colors from images for which I used an original Wayfair logo. This tool actually made my task much easier

Wayfair_logo_color_picker
Source: http://html-color-codes.info/colors-from-image

Here are some of the rules I followed

  1. Use 5 different type of color, each unique for every section
  2. There are only 2 different type of shapes in terms of size and shape. The one with triangular pointer and other, a center square piece. Albeit they all have different colors
  3. Triangular shapes which appear on the corner sides are divided into two regions. One with triangular pointer (e.g. A, D, F and I) and other remaining portion (e.g. B, C, G and H)
  4. Use the similar styles for same shape. Only thing that changes is their position and background color

Here's the timeline of making this logo from scratch along with required screenshots,

1. Creating scaffold along with main and sub-regions. Used dummy colors to make sure everything is laid out as expected

wayfair_logo_1

2. Adding triangular pointers on both end

wayfair_logo_2

3. Applying rotational transformation to both bars (45 and -45) and extending parent view (With Red color) to accommodate logo

wayfair_logo_3

4. Clearing out parent background color
wayfair_logo_4

5. Finally adding true logo colors

  • Top left corner (#AEBD20)
  • Top right corner (#BCDDB1)
  • Bottom left corner (#E6D000)
  • Bottom right corner (#9A5AA3)
  • Center pieces (#592048)

wayfair_logo_5

6. At the end I realized that there are tiny spaces around center piece which I got rid of by mistake. So adding these teeny-tiny spaces back.

And this is how the final logo looks like

wayfair_logo_6

The full code along with HTML and CSS is Hosted on jsFiddle. You can tweak the code and add any more improvements if applicable

For curious, here is the full code with both HTML and CSS styles.


<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">
        .topParentView {
            width: 200px;
            height: 200px;
            position: relative
        }
        .innerRectangleView {
            width: 240px;
            height: 80px;
        }
        .floatLeft {
            float: left;
        }
        .innerSquare {
            float: right;
        }
        .innerSquareView {
            float: left;
            height: inherit;
        }
        .shortInnerSquareView {
            width: 26.67px;
        }
        .largeInnerSquareView {
            width: 80px;
        }
        .triangleLeft {
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-right: 26.67px solid #fdf;
            border-bottom: 40px solid transparent;
        }
        .triangleRight {
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 26.67px solid #fdf;
            border-bottom: 40px solid transparent;
        }
        .clearBackground {
            background: white
        }
        .negativeRotatedDiv {
            -ms-transform: translate(-20px, -20px) rotate(-45deg);
            -webkit-transform: translate(-20px, -20px) rotate(-45deg);
            transform: translate(-20px, -20px) rotate(-45deg);
        }
        .topTransformDiv {
            -ms-transform: translate(-20px, 60px) rotate(45deg);
            -webkit-transform: translate(-20px, 60px) rotate(45deg);
            transform: translate(-20px, 60px) rotate(45deg);
        }
        .centerColor {
            background: #592048
        }
        .topLeftColor {
            background: #AEBD20
        }
        .topRightColor {
            background: #BCDDB1
        }
        .bottomLeftColor {
            background: #E6D000
        }
        .bottomRightColor {
            background: #9A5AA3
        }
        .topLeftTriangleColor {
            border-right-color: #AEBD20
        }
        .topRightTriangleColor {
            border-left-color: #BCDDB1
        }
        .bottomLeftTriangleColor {
            border-right-color: #E6D000
        }
        .bottomRightTriangleColor {
            border-left-color: #9A5AA3
        }

        .mediumInnerSquareView {
            width: 53.54px;
            margin-right: -1px;
            margin-left: -1px;
        }
    </style>

    <title>Wayfair Logo</title>

</head>

<body>
    <div class='topParentView clearBackground'>
        <div class='innerRectangleView topTransformDiv'>
            <div class='innerSquareView largeInnerSquareView'>
                <div class='innerSquareView shortInnerSquareView triangleLeft topLeftTriangleColor'></div>
                <div class='innerSquareView mediumInnerSquareView topLeftColor'></div>
            </div>
            <div class='innerSquareView largeInnerSquareView'></div>
            <div class='innerSquareView largeInnerSquareView'>
                <div class='innerSquareView mediumInnerSquareView bottomRightColor'></div>
                <div class='innerSquareView shortInnerSquareView triangleRight bottomRightTriangleColor'></div>
            </div>
        </div>

        <div class='innerRectangleView negativeRotatedDiv'>
            <div class='innerSquareView largeInnerSquareView'>
                <div class='innerSquareView shortInnerSquareView triangleLeft bottomLeftTriangleColor'></div>
                <div class='innerSquareView mediumInnerSquareView bottomLeftColor'></div>
            </div>
            <div class='innerSquareView largeInnerSquareView centerColor'></div>
            <div class='innerSquareView largeInnerSquareView'>
                <div class='innerSquareView mediumInnerSquareView topRightColor'></div>
                <div class='innerSquareView shortInnerSquareView triangleRight topRightTriangleColor'></div>
            </div>
        </div>
    </div>

</body>
</html>
Please check out my Patreon and BuyMeACoffee pages too.
If you like my articles and want to keep me going on this journey, please consider donating on these platforms.
Your support in any form is much appreciated.
Buy me a coffee support

Patreon support

Sign up for more like this.

Enter your email
Subscribe
Announcing my Clothing Shop - Burnousstraat Designs

Announcing my Clothing Shop - Burnousstraat Designs

Life is too short to wear boring clothes - Anonymous Hey folks, this is going to be a slightly different post than usual. I've got some exciting news to share with you all – we've officially launched Burnousstraat Designs, your new go-to destination for one-of-a-kind and unique graphic apparel! At Burnousstraat
Mar 20, 2024 2 min read
Using RxSwift to Populate Data on UITableView (iOS and Swift)

Using RxSwift to Populate Data on UITableView (iOS and Swift)

It's been a while since I posted. But better late than never. In today's blog post, I am going to write about how to use RxSwift to populate data in UITableView on iOS. RxSwift is a library for composing asynchronous and event-based code by using observable sequences and functional style
Oct 26, 2023 6 min read
SwiftUI: Apply Custom Formatting to Localized Strings

SwiftUI: Apply Custom Formatting to Localized Strings

In today's post, I am going to touch on a niche area in SwiftUI designs and string formatting. This is about how to apply custom formatting to localizable strings. It sounds complicated, so let me explain it with an example, Suppose I have a localizable string like this, Going from
Sep 27, 2023 6 min read
Fresh Beginning © 2025
Powered by Ghost