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.

*_*

 

template by blogger templates