Showing posts with label HTML. Show all posts

Wednesday, 24 February 2016

Hi, I'm Arjun the author of this blog...
I've been designing webpages for quite some time and now i've developed a css buttons file especially for rookies into the css web development etc..
Using this css file you can give super styles to buttons in your html page...
You can watch the demo here:

This button is also created using the myButtons.css

You can link this file to your page using the code:

<link rel='stylesheet' href='https://googledrive.com/host/0B9LZUJ9ROeSrVnVXR0dVQUJ2STQ' />

Download the zip file:

Creating a Dropdown Navigation Bar Using just HTML and CSS

First of all start with the html

Create the basic syntax

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Drop down Navigation Bar</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>

Create the Navigation Bar

Inside the body element add the following code:

 <div class='navBar'>
 <ul>
 <li><a href="#">Home</a></li>
    <li><a href="http://shuttereditz.blogspot.com">Shutter</a></li>
    <li><a href="#link1">Link</a></li>
    <li><a href="#dropdown">Dropdown</a>
     <ul class='dropDown'> <!--the drop down menu -->
         <li><a href="http://www.facebook.com/shuttereditz">Facebook</a></li>
            <li><a href="#sub1">Sublink</a></li>
            <li><a href="#sub2">Sublink</a></li>
            <li><a href="#sub3">Sublink</a></li>
        </ul>
    </li>
 </ul>
 </div>

Now create the css

Inside the style tag add the following css code.

.navBar {
 display:block;
 padding:0;
 clear:both !important;
}
.navBar ul{
 list-style-type:none !important;
 display:inline-block !important; /*Removes the indent*/
 margin:0;
 padding:0;
 border-bottom:3px solid #A80059;
 background:#EDEDED;
}
.navBar ul li{
 float:left; /*align the links towards left in navBar Since it is Horizontal*/ 
 display:block;
 transition-duration:1s; /*CSS3 transition effect*/
}

Designing the Navigation links

To Design our navigation links add the following css.

.navBar ul li a{
 display:block;
 padding:5px;
 text-align:center;
 min-width:100px;
 height:30px;
 font-variant:small-caps;
 font-weight:bold;
 text-decoration:none; /*Removes Underline*/
 color:#292929;
 transition-duration:1s;
}
/*You can also give the font-family or any other css styles into this*/

.navBar li:hover >a{
 color:#fff;
 background:#A80059;
}

Creating Dropdown Effect

Let's Create the dropdown effect now. To do this add the following css.

.navBar ul.dropDown {
 height:0px; /*The height and */
 opacity:0; /* the opacity is used to hide the dropdown menu*/
    /*You can also use*/
    /*display:none;*/
    /*but this will alter your transition effect*/
 overflow:hidden !important;/*This also plays a major role in hiding the dropdown*/
    /*YOu don't need to use this if you are using the display:none; option*/
 position:absolute !important; /*This will make the dropdown menu to float over the rest of the web page*/
 transition-duration:1s;
}
.navBar ul.dropDown li{
 float:none !important;/*Removes the float from dropdown menu*/
}
.navBar li:hover >.dropDown{
 height:auto; /*Makes the dropdown menu visible on hovering the list item*/
 opacity:1; /*If you are using display:none; option change this to */
    /*display:inline-block;*/
}

Your Navigation bar is ready Enjoy...
DEMO PDF

AAMath-Function file (Updated)

It is a javascript file that can be linked to your html webpages to include some of the functions to save time generating such functions.

The functions included are:

fact()-factorial
ncr()-combination.
npr()-permutation.
sumToA()-sum to n terms of an Arithmetic Progression.
sumToG()-sum to n terms of a Geometric Progression.
factors()-factors of a number.
reverse()-reverse of a number.
swap()-swap between digits.
shift()-shift digits
multiples()-multiples of a number
isPrime()-Check whether the number is prime or not.
primes()-Generate a prime number series.New!
hcf()-find the hcf of two numbers.New!
lcm()-find the lcm of two numbers.New!
factorise()-prime factorise a number.New!

Get more information on these functions for the reference file along with the script file.
-download script and reference-
Download

External linking url:
https://googledrive.com/host/0B9LZUJ9ROeSreUl0b1ZuSHB5TDA

View Reference Download language file for Notepad++
Hope its helpful.....will continue to add more functions

HTML5 Clock-Sci-Fi-Tech

Download zip

HTML5 Clock4

SkyDrive:

Download

HTML5 Clock-3 [Code]

Creating a simple html clock using html, css and javascript

<html>
<head>
<style>
...
</style>
</head>
<body onload="runclock()">
<div class="cbg"></div>
<div id="clock" class="clock"></div>
<div id="min" class="min"></div>
<div id="day" class="day"></div>
<div id="date"></div>
<div id="sec" class="sec"></div>
<div id="sr1" class="sr" style="background:orange;"></div>
<div id="sr2" class="sr" style="background:yellow;"></div>
<div id="sr3" class="sr" style="background:lime;"></div>
<div id="sr4" class="sr" style="background:red;"></div>
<script>
...
</script>
</body>
</html>

The style part is:

.clock
{
    width:500px;
    height:500px;
    position:absolute;
    left:300px;
    top:100px;
    font-family:YouMurderer BB;
    font-size:300px;
    text-align:center;
    color:#900000;
    text-shadow:2px 2px black;
}

.min
{
    width:500px;
    height:500px;
    position:absolute;
    left:450px;
    top:150px;
    font-family:YouMurderer BB;
    font-size:250px;
    text-align:center;
    color:#b64500;
    text-shadow:2px 2px black;
}

.cbg
{
    width:500px;
    height:500px;
    border-radius:250px;
    position:absolute;
    left:300px;
    top:50px;
}

.day
{
    width:150px;
    height:150px;
    position:absolute;
    left:475px;
    top:100px;
    font-family:YouMurderer BB;
    font-size:100px;
    text-align:center;
    color:#009315;
    text-shadow:2px 2px black;
}

#date
{
    width:150px;
    height:150px;
    position:absolute;
    left:400px;
    top:120px;
    font-family:YouMurderer BB;
    font-size:150px;
    text-align:center;
    color:#00f6ff;
    text-shadow:2px 2px black;
}

.sec
{
    width:150px;
    height:150px;
    position:absolute;
    left:575px;
    top:250px;
    font-family:YouMurderer BB;
    font-size:150px;
    text-align:center;
    color:#ffde00;
    text-shadow:2px 2px black;
}
.sr
{
    position:absolute;
    left:300px;
    top:50px;
    width:20px;
    height:100px;
    background:red;
}

@keyframes secrun1
{
    0%{top:50px;left:300px;transform:rotate(0deg);}
    100%{top:400px;left:300px;transform:rotate(90deg);}
}

@keyframes secrun2
{
    0%{top:400px;left:300px;transform:rotate(90deg);}
    100%{top:400px;left:900px;transform:rotate(0deg);}
}

@keyframes secrun3
{
    0%{top:400px;left:900px;transform:rotate(0deg);}
    100%{top:50px;left:900px;transform:rotate(90deg);}
}

@keyframes secrun4
{
    0%{top:50px;left:900px;transform:rotate(90deg);}
    100%{top:50px;left:300px;transform:rotate(0deg);}
}

Script part is:

function runclock()
{
    var t = new Date();
    var h = t.getHours();
    var m = t.getMinutes();
    var s = t.getSeconds();
    var sec=s;
    var d = t.getDay();
    var da=t.getDate();
    d=day(d);
    m=putzero(m);
    h=format(h);
    h=putzero(h);
    da=putzero(da);
    s=putzero(s);

    //create animation

    if(sec%4==0)
    { 
        document.getElementById('sr1').style.animation="secrun1 1s";
        document.getElementById('sr2').style.animation="secrun2 1s";
        document.getElementById('sr3').style.animation="secrun3 1s";
        document.getElementById('sr4').style.animation="secrun4 1s";
    }

    else  if(sec%4==1)
    {
        document.getElementById('sr1').style.animation="secrun2 1s";
        document.getElementById('sr2').style.animation="secrun3 1s";
        document.getElementById('sr3').style.animation="secrun4 1s";
        document.getElementById('sr4').style.animation="secrun1 1s";
    }

    if(sec%4==2) 
    {
        document.getElementById('sr1').style.animation="secrun3 1s";
        document.getElementById('sr2').style.animation="secrun4 1s";
        document.getElementById('sr3').style.animation="secrun1 1s";
        document.getElementById('sr4').style.animation="secrun2 1s";
    }

    else  if(sec%4==3)
    {
        document.getElementById('sr1').style.animation="secrun4 1s";
        document.getElementById('sr2').style.animation="secrun1 1s";
        document.getElementById('sr3').style.animation="secrun2 1s";
        document.getElementById('sr4').style.animation="secrun3 1s";
    }

//Display Clock
    setTimeout(function(){runclock()},500);
    document.getElementById('clock').innerHTML=h;
    document.getElementById('min').innerHTML=m;
    document.getElementById('day').innerHTML=d;
    document.getElementById('date').innerHTML=da;
    document.getElementById('sec').innerHTML=s;
}

function putzero(i)
{
    if(i<10)
    {
        i="0"+i;
    }
    return i;
}

function format(j)
{
    if(j>12)
    {
        j=j-12;
    }
    return j;
}


function day(k)
{
    switch(k)
    {
        case 0:k="SUN";
        break;
        case 1:k="MON";
        break;
        case 2:k="TUE";
        break;
        case 3:k="WED";
        break;
        case 4:k="THU";
        break;
        case 5:k="FRI";
        break;
        case 6:k="SAT";
        break;
    }
    return k;
}

Javascript Code- Magic Square Generator

HTML code to generate an odd-Magic Square:

Magic Square is an arrangement of consecutive numbers such that the sum of elements of each column each row and along the diagonals are the same.
An odd sized magic square can be generated by using javascript

HTML part is:

<html>

<head>

<title>MAgic SQuaRe</title>

<style>

.box

{

font-weight:bold;

font-size:50px;

text-align:center;

outline:black solid thick;

}

</style>

</head>

<body>

<table id="table" border="2"></table>

<script>

....

</script>

</body>

</html>

Script part is:

for(t=0;;t++)
{
var n=prompt("Enter the dimension");
if(n%2!=0&&n>2) break;
else alert("MAgic Square cannot be made");
}
var last=n*n;
var a=[];

for(m=0;m<n;m++)
a[m]=[];


var i=0;
var j=Math.floor(n/2);;

for(var c=1;c<=last;c++)
{
 if(i<0)  i=n-(-i);
 if(i>=n) i=i-n;
 if(j<0)  j=n-(-j);
 if(j>=n) j=j-n;

 a[i][j]=c;

 if(c%n==0)
 {
  i++;
 }
 else
 {
  i--;
  j++;
 }
  
}
document.write("<table border='2'>");
for(k=0;k<n;k++)
{
document.write("<tr>");

 for(l=0;l<n;l++)
 {
  document.write("<td class='box' width='60' height='60'>"+a[k][l]+"</td>");
 }
 document.write("</tr>");
}
document.write("</table>");

Shutter

Likes Doesn't Matter... Looks Does

Menu

Wednesday, 24 February 2016

Custom Animated Draw Button using CSS only

Thursday, 24 September 2015

myButtons.css

Sunday, 3 May 2015

Creating a Dropdown Navigation Bar Using just HTML and CSS

First of all start with the html

Create the basic syntax

Create the Navigation Bar

Now create the css

Designing the Navigation links

Creating Dropdown Effect

Tuesday, 25 March 2014

AAMath-Function file (Updated)

Saturday, 22 March 2014

HTML5 Clock-Sci-Fi-Tech

Saturday, 15 March 2014

HTML5 Clock4

Wednesday, 5 March 2014

HTML5 Clock-3 [Code]

Sunday, 2 March 2014

Javascript Code- Magic Square Generator

Popular Posts

Blog Archive

Find Us On Facebook

Photoshop Hair & Makeup Tutorial