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:
Download the zip file:
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:
Note:The data_array takes the value 'default' and the suggestion are taken from an inbuilt dictionary.
Output:
Download the file :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
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
Subscribe to:
Posts (Atom)