Tiger Bird Webdesign: January 2015

Wednesday, 28 January 2015

CSS Animation: Let's Rotate Something

Reload the page to invoke the animation again

Jazz up your website with a bit of animation!

If you use the CSS animation property it's super easy to create some eye-catching effects. In the example above, the boxes rotate to the right side within a certain time.

For each alphabet create a div element and put a unique id on it. The CSS animation property defines the duration of the animation:

animation:
[name of the animation] [duration in seconds s] [timing] [frequency] [how the animation should be played][effect of the animation on the element after the animation].

You need to put the prefix -webkit- in front of animation in order to display it in all browsers.

After you have decided the duration of the animation you need to set the details of it. What kind of changes do you want to apply on the element? Does the color, width or size etc. change? @keyframes enables you to make the change. In the example above, I want to change the angle of the div boxes from 315 to 360 degrees. Here are the details of the syntax:
@keyframe rotate45(name of animation){
from{ transform:rotate(315deg);}
to{ transform:rotate(360deg);}
}
And finito!

HTML and CSS Code

<html>
<head>
#title29
{position:relative;}
  
#t29a
{position:absolute;
top:20px;
left:20px;
width:50px;
height:40px;
padding:10px 0px 0px 0px;
text-align:center;
font-size:200%;
color:#0099FF;
background-color:yellow;
border-style:solid;
border-width:3px;
border-color:orange;
/*the animation*/
-webkit-animation:rotate45 1s ease-in 0s 1 normal none;
animation:rotate45 1s ease-in 0s 1 normal none;
}

#i29
{position:absolute;
top:20px;
left:80px;
width:50px;
height:40px;
padding:10px 0px 0px 0px;
text-align:center;
font-size:200%;
color:#0099FF;
background-color:yellow;
border-style:solid;
border-width:3px;
border-color:orange;
/*the animation*/
-webkit-animation:rotate45 1.5s ease-in 0s 1 normal none;
animation:rotate45 2s ease-in 1.5s 1 normal none;
}
  
#t29b
{position:absolute;
top:20px;
left:140px;
width:50px;
height:40px;
padding:10px 0px 0px 0px;
text-align:center;
font-size:200%;
color:#0099FF;
background-color:yellow;
border-style:solid;
border-width:3px;
border-color:orange;
/*the animation*/
-webkit-animation:rotate45 2s ease-in 0s 1 normal none;
animation:rotate45 2s ease-in 0s 1 normal none;
}
  
#l29
{position:absolute;
top:20px;
left:200px;
width:50px;
height:40px;
padding:10px 0px 0px 0px;
text-align:center;
font-size:200%;
color:#0099FF;
background-color:yellow;
border-style:solid;
border-width:3px;
border-color:orange;
/*the animation*/
-webkit-animation:rotate45 2.5s ease-in 0s 1 normal none;
animation:rotate45 2.5s ease-in 0s 1 normal none;
}
  
#e29
{position:absolute;
top:20px;
left:260px;
width:50px;
height:40px;
padding:10px 0px 0px 0px;
text-align:center;
font-size:200%;
color:#0099FF;
background-color:yellow;
border-style:solid;
border-width:3px;
border-color:orange;
/*the animation*/
-webkit-animation:rotate45 3s ease-in 0s 1 normal none;
animation:rotate45 3s ease-in 0s 1 normal none;
}

@-webkit-keyframes rotate45{
 from{ transform:rotate(315deg);}
 to{ transform:rotate(360deg);}
  }
  
@keyframes rotate45{
 from{ transform:rotate(315deg);}
 to{ transform:rotate(360deg);}
}
</style>
</head>

<body>

Thursday, 22 January 2015

Glowing Tabs With CSS Hover And Transition

Glowing Tabs With CSS Hover

Top
About
Privacy

Let's spice up a website with more blinky blinky effects.

I thought, tabs which will glow like neon signs when you rollover with your mouse on them would look fantastic. You even don't need JavaScript just CSS!

Hover selector and transition property are the magical words to make things happen. After finishing writing the code for the tabs make them look nice with CSS (#tabs). To add a glowing effect to the tabs we want to change the shadow. The CSS property box-shadow allows us to change the color and shadow of a box. Here is the code: box-shadow:[x-coordinate] [y-coordinate] [blur] [color]; . By assigning the hover (:hover) selector to the tab class (.tabs) it will create the rollover effect.

.tabs:hover describes how the property box-shadow should change. Property details, duration and timing of the effect is set by transition. Don't forget to make that property browser friendly to all browsers and the prefixes -o-, -webkit-, -moz- and -ms- to transition.
Since we want to change all box-shadow properties use "all" to change them all.
Hover is both a blessing and a curse- it's not really Android and iPhone compatible. I will work on this issue!

HTML, CSS and JavaScript Code all in one

<title> Glowing Tabs With CSS Hover</title>

<style>

#background
{background-color:black;
width:400px;
height:300px;
}

#ul
{list-style-type:none;}

.tabs
{float:left;
clear:left;
text-align:center;
width:150px;
margin:10px;
padding:20px;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
/*box-shadow*/
box-shadow: 
1px 1px 10px #FF1975,
-1px -1px 10px #FF1975; /*fuchsia*/

/*text*/
font-weight:bold;
font-size:150%;
color:#FF1975;
text-shadow:
1px 1px 10px #FF1975,
-1px -1px 10px #FF1975;

/*transition*/
transition: box-shadow 1s linear;
-webkit-transition: box-shadow 1s linear;
}

.tabs:hover{-webkit-box-shadow: 
5px 5px 50px #FF1975,
-5px -5px 50px #FF1975;
-moz-box-shadow: 
5px 5px 50px #FF1975,
-5px -5px 50px #FF1975;
box-shadow: 
5px 5px 50px #FF1975,
-5px -5px 50px #FF1975;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-kthtml-transition: all 1s linear;
transition: all 1s linear;
}

</style>
</head>

<body>

<div id="background">
<ul id="ul">
<li class="tabs">Top</li>
<li class="tabs">About</li>
<li class="tabs">Privacy</li>
</ul>
</div>
</body>

Tuesday, 20 January 2015

Star With CSS

all cover rectangles displayed in different colors

It's time to create a star with CSS!

The first step is to create a huge square which has the tag div and the id="body27". Using invisible cover rectangles colored in white and with different degrees on the left and right site of this square forms the star shape.

A picture says more than thousand words-I've put different colors on the cover rectangles to make it crystal clear how the object is created so please have a look at the code below.

HTML and CSS Code

#body{
position:relative;
top:100px;
left:100px;
width:150px;
height:150px;
background-color:orange;
}

#left_cover{
position:absolute;
left:-35px;
height:150px;
width:75px;
-webkit-transform:skew(155deg);
-ms-transform:skew(155deg);
transform:skew(155deg);
background-color:white;
}

#right_cover{
position:absolute;
left:110px;
width:75px;
height:150px;
-webkit-transform:skew(25deg);
-ms-transform:skew(25deg);
transform:skew(25deg);
background-color:white;
}

#bottom_cover_left{
position:absolute;
top:90px;
left:0px;
width:50px;
height:150px;
-webkit-transform:rotate(55deg);
-ms-transform:rotate(55deg);
transform:rotate(55deg);
background-color:white;
}

#bottom_cover_right{
position:absolute;
left:96px;
top:90px;
width:50px;
height:150px;
-webkit-transform:rotate(125deg);
-ms-transform:rotate(125deg);
transform:rotate(125deg);
background-color:white;
}

#right_part{
position:absolute;
top:50px;
left:25px;
width:50px;
height:50px;
-webkit-transform:skew(45deg);
-ms-transform:skew(45deg);
transform:skew(45deg);
background-color:orange;
}

#left_part{
position:absolute;
top:50px;
left:75px;
width:50px;
height:50px;
-webkit-transform:skew(135deg);
-ms-transform:skew(135deg);
transform:skew(135deg);
background-color:orange;
}
</style>
</head>

Monday, 19 January 2015

How To Filter Certain Characters with JavaScript RegExp

Nice to meet you! What's your name?

Jean the Pig wants to greet you!
If you type in your name and push the button a greeting message from Jean the Pig will appear below the text field. To filter certain characters I've used the metacharacter \w of the RegExp object. \w means that you can only type in word characters like alphabets or numbers. /\^w{1,10}$/g means that it has to begin (^) and end ($) with a word character (\w) and should be no longer than 10 characters ({1,10}). The modifier g means it'll do a global match on the text which was typed in inside the text field.

Now, how do we get the text inside the text field? The value attribute of the input tag, input type="text" value="", describes the text which was typed in by the user. To get the use input use document.getElementById("inputtext").value in JavaScript. To exclude non-word character inputs I've used the match() method just matching \w characters.

For details, have a look at the code!

HTML, CSS and JavaScript Code

<html>
<head>
<style>
  
#pigtext26
{position:relative;
top:50px;
left:150px;
}

#pighead
{position:absolute;
width:100px;
height:100px;
top:50px;
left:10px;
background-color:pink;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
z-index:1;
}

#lefteyepig
{position:absolute;
width:40px;
height:40px;
top:10px;
left:10px;
border-style:solid;
border-width:2px;
border-color:gray;
background-color:white;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
z-index:2;
}

#leftblackpig
{position:absolute;
width:20px;
height:20px;
top:10px;
left:10px;
background-color:black;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
z-index:3;
}

#righteyepig
{position:absolute;
width:40px;
height:40px;
top:10px;
left:52px;
border-style:solid;
border-width:2px;
border-color:gray;
background-color:white;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
z-index:2;
}

#rightblackpig
{position:absolute;
width:20px;
height:20px;
top:10px;
left:10px;
background-color:black;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
z-index:3;
}
  
  
#pignose
{position:absolute;
width:70px;
height:30px;
top:50px;
left:15px;
border-style:solid;
border-width:2px;
border-color:gray;
background-color:pink;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
z-index:2;
}

#leftnostrils
{position:absolute;
width:10px;
height:20px;
top:5px;
left:15px;
background-color:black;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
z-index:2;
}
  
#rightnostrils
{position:absolute;
width:10px;
height:20px;
top:5px;
left:45px;
background-color:black;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
z-index:2;
}
  
#leftearpig
{position:absolute;
width:20px;
height:40px;
top:-20px;
left:10px;
background-color:pink;
border-radius:70%;
-moz-border-radius:70%;
-webkit-border-radius:70%;
transform:rotate(305deg);
-ms-transform:rotate(305deg);
-webkit-transform:rotate(305deg);
z-index:1;
}
  
#rightearpig
{position:absolute;
width:20px;
height:40px;
top:-20px;
left:70px;
background-color:pink;
border-radius:70%;
-moz-border-radius:70%;
-webkit-border-radius:70%;
transform:rotate(55deg);
-ms-transform:rotate(55deg);
-webkit-transform:rotate(55deg);
z-index:1;
}

#leftlegpig
{position:absolute;
width:10px;
height:20px;
background-color:pink;
top:90px;
left:20px;
  }
  
#rightlegpig
{position:absolute;
width:10px;
height:20px;
background-color:pink;
top:90px;
left:70px;
  }
  
#lefteyestarwhite
{position:absolute;
width:10px;
height:10px;
top:24px;
left:30px;
background-color:white;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
z-index:3;
visibility:hidden;
 }
  
#righteyestarwhite
{position:absolute;
width:10px;
height:10px;
top:24px;
left:72px;
background-color:white;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
z-index:3;
visibility:hidden;
 }
  
</style>
</head>

<body>

function filter(){
var x = document.getElementById("inputtext").value;
var allowed =/^\w{1,10}$/g;

if(x.match(allowed))
{document.getElementById("greeting").innerHTML = "Welcome  "+x+" ,to my wonderland!";
document.getElementById("lefteyestarwhite").style.visibility="visible";
document.getElementById("righteyestarwhite").style.visibility="visible";
}

else{
document.getElementById("greeting").innerHTML ="Type in your name in alphabets!";
document.getElementById("lefteyestarwhite").style.visibility="hidden";
document.getElementById("righteyestarwhite").style.visibility="hidden";}
}

</script>

</body>
</html>

Tuesday, 13 January 2015

Stylish Blue Tabs with CSS and JavaScript

Top
About
Privacy Policy

A stylish website needs stylish tabs. Here are some design ideas for tabs. If you rollover the tabs with your mouse pointer they will protrude.

The mouse events onmouseenter and onmouseleave of JavaScript creates this effect.First of all, get the info of each tab with document.getElementById("id") and assign a variable to it. Then assing a mouse event to each variable. In the example, the tabs should protrude if the mouse enters them and return to their initial state if the mouse leaves the tabs which is done with onmouseenter and onmouseleave.
So, what kind of event would you like to create? In my event, the CSS text-shadow and box-shadow property should change therefore I have written the following function: function (){variable.style.textShadow xp xp xp color; variable.style.boxShadow xp xp xp color;}.
Very important: insert the script inside the HTML body elment because if you put it inside the head element nothing will fire.

I will create more stylish tabs.

HTML, CSS and JavaScript Code all in one

<html>
<head>
  
  <style>
    #tab_ul
    {list-style-type:none;}
    
    .tab_li
    {float:left;
    clear:right;
    text-align:center;
    width:150px;
    margin:10px;
    border-color:#005CB8;
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-style:solid;
    border-width:1px;
    /*text*/
    color:#FFFF99;
    font-weight:bold;
    font-size:120%;
    padding:20px;
    text-shadow:0px 1px 0px #CCCC7A;
    /*box*/
    box-shadow:0px 1px 10px #00248F;
    background-color:#0099FF;
    padding:10px;}
    
    </style>

</head>
  
<body>
     
 <div>
     <ul id="tab_ul">
<li class="tab_li" id="top">Top</li>
<li class="tab_li" id="about">About</li>
<li class="tab_li" id="privacy">Privacy Policy</li>
</ul>
</div>
<script>
var a = document.getElementById("top");
var b = document.getElementById("about");
var c = document.getElementById("privacy");
 
a.onmouseenter = function (){a.style.textShadow=
"0px 1px 0px #CCCC7A,0px 2px 0px #CCCC7A,0px 3px 0px #CCCC7A,0px 4px 0px #CCCC7A,0px 5px 5px #CCCC7A";
a.style.boxShadow=
"0px 1px 0px #00248F,0px 2px 0px #00248F,0px 3px 2px #00248F,0px 4px 3px #00248F,0px 5px 4px #00248F";}

a.onmouseleave = function (){a.style.textShadow="0px 1px 0px #CCCC7A";
a.style.boxShadow="0px 1px 10px #00248F";}

b.onmouseenter = function(){
b.style.textShadow=
"0px 1px 0px #CCCC7A,0px 2px 0px #CCCC7A,0px 3px 0px #CCCC7A,0px 4px 0px #CCCC7A,0px 5px 0px #CCCC7A";
b.style.boxShadow=
"0px 1px 0px #00248F,0px 2px 0px #00248F,0px 3px 2px #00248F,0px 4px 3px #00248F,0px 5px 4px #00248F";}

b.onmouseleave = function(){b.style.textShadow="0px 1px 0px #CCCC7A";
b.style.boxShadow="0px 1px 10px #00248F";}

c.onmouseenter =function(){
c.style.textShadow=
"0px 1px 0px #CCCC7A,0px 2px 0px #CCCC7A,0px 3px 0px #CCCC7A,0px 4px 0px #CCCC7A,0px 5px 0px #CCCC7A";
c.style.boxShadow=
"0px 1px 0px #00248F,0px 2px 0px #00248F,0px 3px 2px #00248F,0px 4px 3px #00248F,0px 5px 4px #00248F";}

c.onmouseleave = function(){c.style.textShadow="0px 1px 0px #CCCC7A";
c.style.boxShadow="0px 1px 10px #00248F";}
</script>

</body>
</html>

Monday, 12 January 2015

Pixel Bunny: Growing and Shrinking Objects with Offset and Client

Pixel Bunny

Grow or shrink the bunny!

The code does not work within this blog so please save the code on your desktop and try it out.

I was mindlessly doodling around on a Sunday afternoon when I had the idea to make a bunny with CSS and grow and shrink it with JavaScript.

The whole bunny is designed just with CSS. I won't go into details so please have a looksee at the code below.

I thought, I want to grow and shrink that little bunny. Yes, sounds like we need JavaScript. Growing and shrinking the body of the bunny means in other words adding pixels to it.

A perfect object for that are the 2 event objects offsetX and clientX. ClientX outputs the x-coordinate of the mouse pointer on the screen. For example, if you put the mouse on the top left corner of the browser the coordinate will be x = 0. OffsetX returns the x-coordinate of the div element.

Since it is an event object you have to write "event" inside the expression of the function otherwise nothing will fire. In the example it is "change(event)". The event is triggered when the move is moved horizontally.

HTML, CSS and JavaScript Code

The code below has to be saved as a .html file!

<html>
<head>
<title>Pixel Bunny</title>
   
  <style>

#pixel_bunny
    {position:relative;
    top:200px;
    left:100px;
    }
    
    #grow_shrink
    {position:absolute;
    top:170px;
    left:0px;
    width:300px;
    height:10px;
    background-color:#0099CC;
    }
    
    #head 
    {position:absolute;
    width:100px;
    height:100px;
    background-color:#CC6600;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #eye_left
    {position:absolute;
    top:15px;
    left:10px;
    width:40px;
    height:40px;
    background-color:white;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #left_iris
    {position:absolute;
    top:10px;
    left:10px;
    width:20px;
    height:20px;
    background-color:black;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #eye_right
    {position:absolute;
    top:15px;
    left:52px;
    width:40px;
    height:40px;
    background-color:white;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #right_iris
    {position:absolute;
    top:10px;
    left:10px;
    width:20px;
    height:20px;
    background-color:black;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #nose
    {position:absolute;
    top:55px;
    left:40px;
    width:20px;
    height:10px;
    background-color:pink;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #mouth
    {position:absolute;
    top:66px;
    left:30px;
    width:40px;
    height:2px;
    background-color:red;
    }
    
    #teeth
    {position:absolute;
    top:67px;
    left:40px;
    width:20px;
    height:10px;
    background-color:white;
    display:-webkit-flex;
    display:flex;
    }
    
    #teeth .tooth
    {-webkit-flex:1;
    -ms-flex:1;
    flex:1;
    }
    
    .tooth
    {border-width:1px;
    border-style:solid;
    border-color:gray;
    }
    
    #left_ear
    {position:absolute;
    top:-80px;
    left:-10px;
    width:25px;
    height:100px;
    z-index:-1;
    background-color:#CC6600;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    -webkit-transform:rotate(145deg);
    -ms-transform:rotate(145deg);
    transform:rotate(145deg);
    }
    
    #left_inside_ear
    {position:absolute;
    top:10px;
    left:5px;
    width:15px;
    height:80px;
    background-color:pink;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    -webkit-transform:rotate(178deg);
    -ms-transform:rotate(178deg);
    transform:rotate(178deg);
    }
    
    #right_ear
    {position:absolute;
    top:-80px;
    left:80px;
    width:25px;
    height:100px;
    z-index:-1;
    background-color:#CC6600;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    -webkit-transform:rotate(35deg);
    -ms-transform:rotate(35deg);
    transform:rotate(35deg);
    }
    
     #right_inside_ear
    {position:absolute;
    top:10px;
    left:5px;
    width:15px;
    height:80px;
    background-color:pink;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    -webkit-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    transform:rotate(2deg);
    }
    
    #bunny_body
    {position:absolute;
    top:50px;
    left:60px;
    width:80px;
    height:80px;
    z-index:-1;
    background-color:#CC6600;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    }
    
    #tail
    {position:absolute;
    top:50px;
    left:130px;
    width:30px;
    height:30px;
    background-color:#CC6600;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%
    }
    
    #front_leg
    {position:absolute;
    top:50px;
    left:20px;
    width:20px;
    height:50px;
     background-color:#CC6600;
    -webkit-border-radius:30%;
    -moz-border-radius:30%;
    border-radius:30%;
    }
    
    #back_leg
   {position:absolute;
    top:100px;
    left:115px;
    width:20px;
    height:50px;
     background-color:#CC6600;
    -webkit-border-radius:30%;
    -moz-border-radius:30%;
    border-radius:30%;
    }
    
  </style>

</head>
  
  <body>
  <div id="pixel_bunny">
  
  <div id="head">
    
    <div id="eye_left">
      <div id="left_iris">
</div>
</div>
<div id="eye_right">
      <div id="right_iris">
</div>
</div>
<div id="nose">
</div>
<div id="mouth">
</div>
<div id="teeth">
      <div class="tooth">
</div>
<div class="tooth">
</div>
</div>
<div id="left_ear">
      <div id="left_inside_ear">
</div>
</div>
<div id="right_ear">
      <div id="right_inside_ear">
</div>
</div>
</div>
<div id="tail">
        </div>
<div id="back_leg">
</div>
<div id="bunny_body">
 <div id="front_leg">
</div>
</div>
<div id="grow_shrink" onmousemove="change(event)">
<p>
Grow or shrink the bunny!</p>
</div>
</div>
</body>
</html>