| <body> | |
| <div class="bg"></div> | |
| <div class="content"> | |
| <div class="container border-container"> | |
| <div class="hexagon hexagon-border"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="hexagon"><span><FRED></span></div> | |
| </div> | |
| </div> | |
| <div class="tagline">A Global Wide Community of Front-end Developer Meet up Groups</div> | |
| </body> | |
| </html> |
MCR FRED, front-end developer meet up group logo in CSS and HTML, no images or JavaScript (other than the super useful prefixfree.js to deal with browser CSS prefixes).
Cube outlines background with linear-gradients and lots of trial and error.
Hexagon drawing help from http://jsfiddle.net/CreativePunch/PjK84/light/
Little blog post on making this: http://brianbar.net/2015/08/mcr-fred-logo-and-background-in-html-and-css/
A Pen by Brian Barnett on CodePen.
| body { | |
| background-color: #3B42A3; | |
| width: 100%; | |
| } | |
| .bg { | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: linear-gradient(30deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(-30deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(150deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(-150deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(30deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(-30deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(150deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(-150deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(90deg, transparent 48%, #3B42A3 50%, transparent 52%, #0E0277 0), linear-gradient(90deg, transparent 48%, #3B42A3 50%, transparent 52%, #0E0277 0); | |
| background-position: 0 0, 0 0, 0 0, 0 0, 40px 70px, 40px 70px, 40px 70px, 40px 70px, 0 0, 40px 70px; | |
| background-size: 80px 140px; | |
| animation-name: bgFadeIn; | |
| animation-duration: 4s; | |
| animation-fill-mode: both; | |
| } | |
| .content { | |
| margin: 80px calc(50% + 80px); | |
| width: 626px; | |
| height: 100%; | |
| position: fixed; | |
| animation-name: fadeInDown; | |
| animation-duration: 5s; | |
| animation-delay: 1s; | |
| animation-fill-mode: both; | |
| } | |
| .container { | |
| text-align: center; | |
| margin: 20px 20px 20px -162px; | |
| position: absolute; | |
| display: inline-block; | |
| height: 200px; | |
| width: 200px; | |
| transform: rotate(30deg); | |
| transition: all 1s ease; | |
| } | |
| .container:hover { | |
| opacity: 0.85; | |
| } | |
| .border-container { | |
| transform: scale(1.05) rotate(30deg); | |
| } | |
| .hexagon { | |
| height: 100%; | |
| width: calc(100% * 0.5735); | |
| display: inline-block; | |
| background-color: #3B3AA3; | |
| } | |
| .hexagon-border { | |
| height: 100%; | |
| width: calc(100% * 0.5735); | |
| display: inline-block; | |
| background-color: #7271FF; | |
| } | |
| .hexagon:before { | |
| position: absolute; | |
| top: 0; | |
| right: calc((100% / 2) - ((100% * 0.57735) / 2)); | |
| background-color: inherit; | |
| height: inherit; | |
| width: inherit; | |
| content: ''; | |
| transform: rotateZ(-60deg); | |
| } | |
| .hexagon:after { | |
| position: absolute; | |
| top: 0; | |
| right: calc((100% / 2) - ((100% * 0.57735) / 2)); | |
| background-color: inherit; | |
| height: inherit; | |
| width: inherit; | |
| content: ''; | |
| transform: rotateZ(60deg); | |
| } | |
| .hexagon span { | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| left: 5px; | |
| z-index: 2; | |
| text-align: center; | |
| letter-spacing: 0.2em; | |
| font-size: 42px; | |
| line-height: 200px; | |
| font-weight: 300; | |
| font-family: 'Alegreya Sans SC', 'Arial Narrow', sans-serif; | |
| color: #FEFFFE; | |
| transform: rotate(-30deg); | |
| } | |
| .tagline { | |
| width: 100%; | |
| top: 350px; | |
| text-align: center; | |
| font-size: 22px; | |
| letter-spacing: -0.04em; | |
| font-family: sans-serif; | |
| color: #FEFFFE; | |
| position: fixed; | |
| animation-name: fadeInUp; | |
| animation-duration: 3s; | |
| animation-delay: 4.5s; | |
| animation-fill-mode: both; | |
| margin: 0 5px; | |
| } | |
| @keyframes bgFadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| @keyframes fadeInDown { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(0, -100%, 0); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| 61% { | |
| opacity: 0.8; | |
| transform: scale3d(1.003, 1.003, 1.003); | |
| } | |
| 80% { | |
| opacity: 1; | |
| transform: scale3d(1, 1, 1); | |
| } | |
| } |