21 March 2019

Game of Thrones Final Season CSS Intro Animation

While waiting for White Walkers to kill us all, I've decided to play a little bit more with CSS animations. 

This simple text intro have 4 keyframes where letter-spacing is changing, creating interesting movie-like effect. Title text is fading in from black to white and subtitle appears at the end giving the animation dramatic ending, which is expected from this kind of show.

In this case animation lasts for 3 seconds, feel free to play with parameters as you like.

Here is the code and demo:

<!DOCTYPE html>  
   <meta charset="utf-8">  
      <title>Game of Thrones intro</title>  
      * {  
           padding: 0;  
           margin: 0;  
           font-family: sans-serif;  
      body {  
           background: #000;  
      .container {  
           text-align: center;  
           position: absolute;  
           top: 50%;  
           left: 50%;  
           transform: translate(-50%,-50%);  
      .container span {  
           text-transform: uppercase;  
           display: block;  
      .text_title {  
           color: white;  
           font-size: 60px;  
           font-weight: 700;  
           letter-spacing: 8px;  
           margin-bottom: 20px;  
           background: black;  
           position: relative;  
           animation: text 3s 1;  
      .text_subtitle {  
           font-size: 30px;  
           color: #5DADE2;  
      @keyframes text {  
           0% {  
                color: black;  
                margin-bottom: -40px;  
           25% {  
                letter-spacing: 25px;  
                margin-bottom: -40px;  
           75% {  
                letter-spacing: 5px;  
                margin-bottom: -40px;  
           95% {  
                letter-spacing: 8px;  
  <div class="container">  
   <span class="text_title">Game of Thrones</span>  
      <span class="text_subtitle">final season</span>  
The Spring is coming! Happy Coding :) *_*

01 March 2019

How To use Google Fonts in your projects

This is tutorial for beginners in web design but also a self reminder.

If you want to build a website sometimes it is not enough to have only fonts already available on user computer. Those fonts are limited in number and more generic. Best way to include more fonts and make design more fun is to use fonts hosted on external server like Google Fonts.

Navigate to fonts.google.com and select the fonts you want. Currently there are 915 font families hosted on this server and it is likely this number will grow. Search for the fonts you want and select them by clicking on red circle with plus sign on top right side of the font. 

When you are done selecting fonts, click on black rectangle at the bottom of the page.

Then select @import option and copy everything between style tag. 

Paste selected text into your css file and you are done. Doing this you won't need to worry if users have fonts you wanna use, unless Google shuts down this service when company collapses in few hundred years.



template by blogger templates