Skip to content

Instantly share code, notes, and snippets.

@stephenhay

stephenhay/index.html

Last active September 27, 2015 13:38
Show Gist options
  • Save stephenhay/1278541 to your computer and use it in GitHub Desktop.
Save stephenhay/1278541 to your computer and use it in GitHub Desktop.
Download ZIP
Smashing Magazine logo with HTML/CSS (just for fun: Fronteers CSS challenge)
Raw
index.html
<!DOCTYPE html>
<style>
body {
font-size: 100%;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-size: 2.4em;
letter-spacing: .05em;
text-transform: uppercase;
color: #f24026;
width: 6em;
position:relative;
}
span, span:before, span:after { position: absolute; }
span {
display:block;
top: 35px;
left: 2px;
color: #a9a9ab;
font-weight: 100;
font-size: .65em;
letter-spacing: .45em;
}
span:after {
content: '';
display: block;
width: 3.8em;
height: 3.8em;
top: 53px;
left: 53px;
background-color: #f24026;
background-image: -webkit-radial-gradient(65px 15px, rgba(253,123,71,1) 0, rgba(253,123,71,.4) 20%, rgba(253,123,71,.5) 32%, rgba(253,123,71,0) 33%), -webkit-radial-gradient(25px 70px, rgba(253,123,71,.8) 0, rgba(253,123,71,.4) 20%, rgba(253,123,71,.1) 32%, rgba(253,123,71,0) 33%, rgba(253,123,71,.5) 34%, rgba(253,123,71,0) 80%);
background-image: -moz-radial-gradient(65px 15px, rgba(253,123,71,1) 0, rgba(253,123,71,.4) 20%, rgba(253,123,71,.5) 32%, rgba(253,123,71,0) 33%), -moz-radial-gradient(25px 70px, rgba(253,123,71,.8) 0, rgba(253,123,71,.4) 20%, rgba(253,123,71,.1) 32%, rgba(253,123,71,0) 33%, rgba(253,123,71,.5) 34%, rgba(253,123,71,0) 80%);
background-image: -ms-radial-gradient(65px 15px, rgba(253,123,71,1) 0, rgba(253,123,71,.4) 20%, rgba(253,123,71,.5) 32%, rgba(253,123,71,0) 33%), -ms-radial-gradient(25px 70px, rgba(253,123,71,.8) 0, rgba(253,123,71,.4) 20%, rgba(253,123,71,.1) 32%, rgba(253,123,71,0) 33%, rgba(253,123,71,.5) 34%, rgba(253,123,71,0) 80%);
background-image: -o-radial-gradient(65px 15px, rgba(253,123,71,1) 0, rgba(253,123,71,.4) 20%, rgba(253,123,71,.5) 32%, rgba(253,123,71,0) 33%), -o-radial-gradient(25px 70px, rgba(253,123,71,.8) 0, rgba(253,123,71,.4) 20%, rgba(253,123,71,.1) 32%, rgba(253,123,71,0) 33%, rgba(253,123,71,.5) 34%, rgba(253,123,71,0) 80%);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
border: 2px solid #ca352f;
border-radius: .5em;
}
span:before {
content: 'S';
display:block;
position: absolute;
top: 16px;
left: 68px;
color: white;
font-family: Trebuchet, "Trebuchet MS", sans-serif;
font-weight: bold;
font-size: 6em;
z-index:9999;
-webkit-transform: scale(1.1,1);
-moz-transform: scale(1.1,1);
-ms-transform: scale(1.1,1);
-o-transform: scale(1.1,1);
transform: scale(1.1,1);
}
</style>
<h1>Smashing <span>Magazine</span></h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment