CSS Challenge

Earlier today my friend @taybenlor tweeted the following:

Today's pure-css challenge: Duplicate this dribbble.com/shots/235024-F… My attempt so far jsfiddle.net/taybenlor/da4Z…

@taybenlor

I, of course, accepted the challenge was instantly!

The Source

F • • R, by for Luke Lisi
F • • R, by Luke Lisi

The Result

F • • R recreated in CSS
My recreation in CSS

A Glimpse to the Code

Here is a basic example of the CSS I used to create the effect (Note: I didn't used the same font as Luke, but it is the effect I was recreating, not the image). (Vendor prefixes stripped for brevity.) You can always check out the fiddle for the full code.

body {
    background-color: #151426;
    padding: 50px;
}

h1 {
    display: block;
    font-family: Orbitron;
    font-size: 150px;
    letter-spacing: 20px;
    position: relative;
    text-transform: uppercase;
    text-shadow: 6px -12px 0 #4a4957, [...]
}

h1:before, h1:after {
    content: attr(data-inner-text);
    color: transparent;
    left: 0;
    position: absolute;
    text-shadow: none;
    top: 0;
}

h1:before {
    background-color: transparent;
    background-image: linear-gradient(45deg, #151426, #151426 1px, transparent 1px, transparent 3px);
    -webkit-text-fill-color: #c4be9a;
    text-shadow: -5px  -5px 0 #535262, [...]
}

h1:after {
    background-color: transparent;
    background-image: linear-gradient(-45deg, #151426, #151426 1px, transparent 1px, transparent 3px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Conclusion

I think pretty darn close using only one element, the only thing missing is the striping on the inner wall.

I challenge everyone to try and recreate this image in pure CSS. Leave a response with a link to your solution below.

0 Responses

Leave a Response

Cancel reply
Google+