In this post, we are going to be making a Daily UI logo in CSS. To help you personalise and make it your own, I'll walk you through the code and then explain how to apply it. Let's get started now!

Getting Started

Go ahead and initialise our new project using the CodePen playground or setup your own project on Visual Studio Code with the following file structure under your src folder.

DailyUI Starter Files
  |- CSS
      |- style.css 
  |- /src
    |- index.html

Part 1: Setting up our Document

In our examples, I'll stick to using only HTML and CSS, although you are free to use any technology you find most convenient. The following should go in the <body> of a new HTML document or a blank Pen on CodePen for the Daily UI Logo Design.

<body> 
   <div class="container">
     <div class="content__group">
       <h1>DAILY</h1>
       <p>ui</p>
     </div>
    </div>
</body>

Part 2: Specify colors, positions, font and sizes in our CSS.

Normally, you'll need to know the size and colour scheme of the visual you have in front of you before you can create one. I'll give you those measurements and colours in this particular situation.

Now let's include those measurements and colours in our css file.

:root{
  --clr-primary-black:  #000000;
  --clr-primary-vividBlue: #0B23FF;
}

*{
  margin: 0;
  padding: 0;
    -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: linear-gradient(109.92deg, rgba(171, 171, 171, 0.2) -7.86%, rgba(0, 0, 0, 0) 131.21%), #FFFFFF;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

.content__group h1{
position: absolute;
margin-top: 3.95rem;

font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 900;
font-size: 3.438rem;
line-height: 4.188rem;
/* identical to box height */

color: var(--clr-primary-black);

}

.content__group p{
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 18rem;
line-height: 21.938rem;
/* identical to box height */
color: var(--clr-primary-vividBlue);
text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

💡 Note - I advise using Figma to quickly prototype your static UX/UI design.

You can find my final product on my CodePen profile if you'd want to see it (below).

Part 3: Recap

After reading this, I sincerely hope you learnt something new and were inspired to try your hand at creating something lovely.

Create your first piece of CSS art from scratch.

Getting Started

Part 1: Setting up our Document

Part 2: Specify colors, positions, font and sizes in our CSS.

Part 3: Recap