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>  
 <html>  
  <head>  
   <meta charset="utf-8">  
      <title>Game of Thrones intro</title>  
      <style>  
      * {  
           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;  
           }  
      }       
      </style>  
  </head>  
 <body>  
  <div class="container">  
   <span class="text_title">Game of Thrones</span>  
      <span class="text_subtitle">final season</span>  
  </div>  
 </body>  
 </html>  
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.

*_*

19 February 2019

Beating heart CSS animation


After reading more about CSS animations I found this topic very interesting. I have already done some simple css animations and wanted to take a look at other more demanding examples, so I found this great beating heart CSS animation from Codepen (by Elena Voytovich). HTML file has only one line of code:
 <div class="heart"></div>  
CSS is used to draw red heart inside div tag using transform rotation and most important setting border-radius to 50%. This is how you get heart curves. I can make small change in the code and set border-radius to 20% and make the heart more squared shape or I can set it to 60% for different look. Animation is done using 3 keyframes on 0, 20% and 40%. Here is the code:
 @keyframes heartbeat  
 {  
  0%  
  {  
   transform: scale( 1 )  
    rotate(-45deg);    
  }  
  20%  
  {  
   transform: scale( 1.25 )  
    rotate(-45deg);   
  }  
   40%  
  {  
   transform: scale( 1.5 )  
    rotate(-45deg);  
  }  
 }  
The heart scale is changing first to 1.25 and than to 1.5 of original size, which makes this animation imitating heartbeat. Nice. One more thing, class .heart have animation property set like this: animation: heartbeat 1s infinite; which means it will loop infinite number of times (whatever that means) and one iteration of animation lasts for 1 second. *_*

13 February 2019

Simple CSS Animation


You don't need Flash or JavaScript anymore to create animations for your page. CSS is quite capable of doing animations too.

The secret is in @keyframes CSS rule. With this rule you can change style from one state to another over some time period.

Let's jump to simple example and use DIV element to bind animation to it. We will change position of this DIV element.

 
<!DOCTYPE html>  
 <html>  
 <head>  
 <style>   
 div {  
  width: 200px;  
  height: 50px;  
  background-color: blue;  
  position: relative;  
  animation-name: example;  
  animation-duration: 5s;  
 }  
 @keyframes example {  
  0%  {left:0px; top:0px;}  
  100% {left:300px; top:0px;}  
 }  
 </style>  
 </head>  
 <body>  
 <div></div>  
 </body>  
 </html>  


Next, you are not limited to position, you can change other properties too. So, let's change background color also.

 
<!DOCTYPE html>  
 <html>  
 <head>  
 <style>   
 div {  
  width: 200px;  
  height: 50px;  
  background-color: blue;  
  position: relative;  
  animation-name: example;  
  animation-duration: 5s;  
 }  
 @keyframes example {  
  0%  {background-color:blue; left:0px; top:0px;}  
  100% {background-color:green; left:300px; top:0px;}  
 }  
 </style>  
 </head>  
 <body>  
 <div></div>  
 </body>  
 </html>  


There it is. Very simple CSS animation example, easy too understand. However, this will not work in IE or Safari. Next time more on that.

*_*

Pure CSS Rain effect

Some time ago there was on this blog tutorial about how to make rain effect on your website. That was 11 years ago! It was different time when dinosaurs Flash ruled the web and Humans HTML5 was still distant future.

Today it is possible to do the same thing using pure CSS.

Here is how. Click on Run Pen.





Using some simple CSS trick and techniques you can do a lot. How about this option to have numbers optimized for reading in tables using font-feture-settings: "tnum"




Nice looking and useful.

*_*

13 January 2019

Resources for Phaser game makers

Hello.

Just a quick recommendation for those of you who use Phaser for game development. Apart from Phaser home site, there is a Facebook group Phaser Game Makers currently with over 1k members. 



Group is created by William Clarkson, online instructor who published good books and have courses about making games in Phaser. Visit his site for Phaser tutorials. He also offers free Phaser Template for you to start working on your game, check Toolbox / downloads section. Great way to jump start with development.

Thanks, have fun.




09 January 2019

Some promising indie gamedev work in progress

Hello again.

There are plenty of new games releases every week, nobody can keep track on them. Unfortunately, majority of games are copycats or just bad school projects when it comes to indie gamedev scene. Nothing wrong there, but who has time to lose on something that is not fun to play.

If something catch my eye, whether it's great graphics or original idea I would like to support the developer(s) and hope they will finish the project.

First game I would like to see is Arrow Rider by Whistling Wizard ( @wwgamingnz ) team from New Zealand. Art is fun and gameplay looks ok.






Another very interesting project is this hand-drawn HOA the game ( @hoathegame ) which really looks awesome.




Thanks. Have fun.

 

template by blogger templates