How to Make a Square

The web's simplest gradient tutorial.

HTML

<div><span>That&rsquo;s a square</span></div>

CSS

div {
    border: 10px solid #333;
    box-shadow: 0 0 1em #000;
    height: 300px;
    margin: 1em auto;
    position: relative;
    width: 300px;
}

/* How to make a small square */
div {
    background-image:
        -webkit-linear-gradient(
            black,
            black
        );
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}

/* Alternative syntax
div {
    background:
        -webkit-linear-gradient(
            black,
            black
        ) 50% 50% no-repeat;
    background-size: 10px 10px;
} */

div span {
    background-color: white;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    color: hsl(0, 50%, 50%);
    display: block;
    font: 24px Futura, sans-serif;
    left: -150px;
    opacity: 0;
    padding: 10px 0;
    position: absolute;
    text-shadow: 0 0 1px white;
    text-transform: uppercase;
    top: 123px;
    
    -webkit-transition: all 0.5s;
}

div:hover span {
    left: -120px;
    opacity: 1;
}

div span:after {
    content: '→';
    display: block;
    position: absolute;
    right: -30px;
    top: 10px;
}