Here I created a coffee cup using css Coffee cup . Added new style to display logo in the cup.
I am using my previous employer logo. The same cup the given me on my first day of joining.
Here css changes
body{
background-color: tomato;
}
.cup {
position: fixed;
height: 110px;
width: 90px;
background-color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 0 0 20px 20px; }
.cup-bottom {
width: 90px;
border-radius: 0 0 45px 45px;
}
.cup-hand {
position: absolute;
height: 58px;
width: 32px;
margin-left: 89px;
margin-top: -40px;
background-color: whitesmoke;
border-top-left-radius: 2px 20px;
border-top-right-radius: 24px;
border-bottom-left-radius: 2px 20px;
border-bottom-right-radius: 24px;
}
.cup-hand-inside {
position: absolute;
height: 35px;
width: 22px;
margin-left: 1px;
margin-top: 11px;
background-color: tomato;
border-radius: 0px 25px 25px 0px;
}
.cnsi{
color: blue;
font-style: normal;
font-size: 20px;
margin-left: 35px;
margin-top: 36px;
}
.cnsi-logo{
position: absolute;
height: 25px;
width: 25px;
background-color: blue;
border-radius: 50%;
top: 35px;
left: 4px;
}
.cnsi-logo-ship{
position: absolute;
left: 6px;
top: 5px;
height: 21px;
width: 2px;
background-color: white;
transform: rotate(
330deg
);
}
.cnsi-logo-horns1{
position: absolute;
height: 0px;
width: 0px;
left: 2px;
top: -2px;
border-top: 1px solid transparent;
border-left: 15px solid white;
border-bottom: 5px solid transparent;
transform: rotate(
350deg
);
}
.cnsi-logo-horns2{
position: absolute;
height: 0px;
width: 0px;
left: 2px;
top: 4px;
border-top: 1px solid transparent;
border-left: 15px solid white;
border-bottom: 5px solid transparent;
transform: rotate(
350deg
);
}
.cnsi-logo-horns3{
position: absolute;
height: 0px;
width: 0px;
left: 2px;
top: 9px;
border-top: 1px solid transparent;
border-left: 15px solid white;
border-bottom: 5px solid transparent;
transform: rotate(
350deg
);
}
.cnsi-logo-horns4{
position: absolute;
height: 0px;
width: 0px;
left: 2px;
top: 15px;
border-top: 1px solid transparent;
border-left: 15px solid white;
border-bottom: 5px solid transparent;
transform: rotate(
350deg
);
}
HTML changes:
<div class="cup">
<div class="cnsi-logo">
<div class="cnsi-logo-ship">
<div class="cnsi-logo-horns1"></div>
<div class="cnsi-logo-horns2"></div>
<div class="cnsi-logo-horns3"></div>
<div class="cnsi-logo-horns4"></div>
</div>
</div>
<div class="cnsi">CNSI</div>
<div class="cup-hand">
<div class="cup-hand-inside"></div>
</div>
</div>
Output:
The above CSS works fine, but review it back it seems we are using bilateral code on cnsi-logo-horns1 to cnsi-logo-horns4. Lets fix the CSS code with good standard.
.cnsi-logo-horns1{
position: absolute;
height: 0px;
width: 0px;
left: 2px;
top: -2px;
border-top: 1px solid transparent;
border-left: 15px solid white;
border-bottom: 5px solid transparent;
transform: rotate(
350deg
);
}
if u see above and rest of cnsi-logo-horns* class, rest of top and left element are same for all these 4 selectors. Let make some changes without effecting style.
Here we split the differing element from classes and make them as different selector,
.cnsi-logo-horn{
position: absolute;
height: 0px;
width: 0px;
border-top: 1px solid transparent;
border-left: 15px solid white;
border-bottom: 5px solid transparent;
transform: rotate(
350deg
);
}
.horn1{
left: 2px;
top: -2px;
}
.horn2{
left: 2px;
top: 4px;
}
.horn3{
left: 2px;
top: 9px;
}
.horn4{
left: 2px;
top: 15px;
}
And HTML changes for that,
<div class="cnsi-logo-horn horn1"></div>
<div class="cnsi-logo-horn horn2"></div>
<div class="cnsi-logo-horn horn3"></div>
<div class="cnsi-logo-horn horn4"></div>
Output here as same as before and code also looks good.
No comments:
Post a Comment