Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Wednesday, 24 February 2016

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

<!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

Monday, 6 April 2015

Creating A Calculator App in Android Studio


I have started using Android Studio recently. This is a very useful utility for developers to build Android Apps very easily and efficiently.
One of the apps I started off developing was a calculator.
Here is a simple tutorial to build a Simple Calculator in Android Studio.
Hope It Helps...

You Can Download the Android Studio here:
Download
Download the PDF Tutorial here:
Download

Tuesday, 10 March 2015

Best Photoshop Tutorials

 

Draw a Realistic eye in photoshop - stephanievalentin.deviantart

Type: Art


 

Create an Abstract Sci-Fi Scene with Photoshop - photoshop tutorials

Type: Photo Manipulation


 

Create an Awesome Splashing Sneaker in Photoshop - photoshop tutorials

Type: Photo Manipulation

 

 

Space Lighting Effects in 10 Steps - abuzeedo

Type:Abstract

 

 

Creating a Mac-Type Background in Photoshop - tuts+

Type: Abstract

 

Monday, 26 January 2015

Wednesday, 21 January 2015

Monday, 1 December 2014

Sunday, 23 November 2014

Thursday, 20 November 2014

Sunday, 16 November 2014

Saturday, 15 November 2014

Saturday, 8 November 2014

Tuesday, 26 August 2014

Easy way to Create Abstract Pictures in Photoshop

There are many easy ways to create beautiful Abstract pictures in Photoshop.
One of the way which uses only eraser as tool is described in this post.


1. Create a new document.
2. Create a new Layer and Fill it with any color (Use attractive colors).
3. Select a big hard round eraser possibly larger size than the document.
4. Change the opacity to 20%.
5. Start clicking on the document to erase.(Don't click and hold).
6. Experiment with colors and erasers. Also by creating more layers and changing the blend modes.to create beautiful abstract images like this:


 

Friday, 11 April 2014

Tuesday, 25 March 2014

Subscribe to: Posts (Atom)