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.
Top comments (1)
Thanks for this post. Minor point, but I think your code would be a little easier to read if you included a code type after the opening backticks - for example
cssorhtml.