Wednesday, 24 February 2016

Thursday, 24 September 2015

myButtons.css

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:

Sunday, 28 June 2015

Tuesday, 16 June 2015

Photoshop Hair & Makeup Tutorial





Photoshop is a versatile graphics software.
It'll be a drawing pad or a designing studio an animation specialist and most commonly it becomes a beauty saloon. So I'm introducing my first hair and make up tutorial. Hoe this helps atleast some people. Hope to get back soon with more tutorials.

Download the .pdf file:
Download

Saturday, 6 June 2015

Thursday, 21 May 2015

Auto Suggest Java Script File


Most of the Web Designers are really suffering to find an easy way to input javascript tools into their pages. One of the best tool is the auto suggestion like we see in google search box which automatically display matching items that may be what we are searching for. Most of the script files found today are very difficult to understand and use. So I've created a Javascript file to help you achieve the autosuggestion very easily. In this Javascript method the suggestion are added as items in a list. You can apply css style to it to customize and make it better.

The basic syntax is very simple:

 autoSuggest(input_selector,list_id,max_suggestion,data_array);
  • input_selector: selector for the input type to which autosuggest is to be enabled.
  • list_id : id of the list which holds suggestions.
  • max_suggestion: maximum no. of suggestions to appear.
  • data_array: The array which holds the suggestions.

Note:The data_array takes the value 'default' and the suggestion are taken from an inbuilt dictionary.

Example:

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="autoSuggest.js"></script>
<script>
 ARR = ['apple','ball','cup','dog','engine','food','ginger','hook','ink','joker','kite'];
 autoSuggest('#sText','autoC',10,ARR);
</script>
</head>

<body>
<input id='sText' type='search'/>
<ul id='autoC'>
 <li><a>Hai</a></li>
</ul>
</body>
</html>

Output:

Download the file :
Download

Link to your website using the code snippet: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B9LZUJ9ROeSrb2VCUHpqNk9SY1E" type="text/javascript"></script>

Tuesday, 5 May 2015

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

Thursday, 30 April 2015

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

 

Subscribe to: Posts (Atom)