Category: Web Design

Initials to Full Name Reveal CSS Only

My personal logo was made from just html and css. No javascript, and super fast to load. If you are interested in how I made this logo check it out on GitHub.

HTML

<div id="logo">
            <ul class="logo-text">
                <li>M</li>
                <li class="ghost">A</li>
                <li class="ghost">R</li>
                <li class="ghost">C</li>
                <li class="ghost">U</li>
                <li class="ghost">S</li>
                <li class="spaced">G</li>
                <li class="ghost">O</li>
                <li class="ghost">L</li>
                <li class="ghost">L</li>
                <li class="ghost">A</li>
                <li class="ghost">H</li>
                <li class="ghost">O</li>
                <li class="ghost">N</li>
            </ul>
        </div>

CSS

html {    
font-family: 'Roboto Slab', "Open Sans Regular", "Helvetica",   "Arial", sans-serif;    
font-size: 36px;    
background-color: #23272A;
}

ul, li { 
padding: none;    
float: none;    list-style: none;    
color: white;
}

.logo-text {    
color: #ffffff;    
padding: 0;    
margin: 0;    
float: left;    
cursor: pointer;    
border-bottom: 1px solid #ffffff;
}

.logo-text li {    
float: left;    
font-weight: 700;    
font-size: 2rem;    
opacity: 1;    
transition: all 750ms ease-in-out;   
max-width: 2rem;    
display: inline-block;
}

.logo-text li:first-child {
padding-left: 0;
}

.logo-text li.spaced {
padding-left: 0;
}

.logo-text:hover li.spaced {
padding-left: 0.5em;
}

.logo-text li.ghost {
opacity: 0;    
max-width: 0;
}

.logo-text:hover li {    
opacity: 1;    
max-width: 100%;
}

360 Virtual Tours