Posts

Showing posts from November, 2012

Login form | Using CSS3

Image
Here is an awesome demo of a login form, which makes good use of CSS3 and HTML5. In this demo, i have made extensive use of gradients, text-shadows and box-shadows to achieve a beautiful and modern looking login form. The design of this login form was originally taken for codrops.com, hope you'll like and use this login form in your projects.
ViewDemo |  Download Source





Adding a button in HTML | styling a button

Image
To add a button in a HTML page use <input> tags and specify the type as button like so
<input type=”button” value=”submit” action=”submit.php”> this code will be rendered in browser like in Figure 1.1
Further more if you wish to style this button we can apply a set of CSS rules to make the buttons look pretty here are a few examples: Download code for these buttons here



15 Simple HTML buttons | Download

Image
Here is a few simple looking html buttons styled using CSS3 .
See Demo | Download

Social media Icons | Icons Download

Image
Social media icons free download , Download all social media icons in a Single PSD File and use it in your web development and design projects


Download this Social Media Icons
Credits: artimonier.tk and Icondeposit.com

HTML Tags | Adding Scripts in HTML

Adding Scripts in HTML (i.e. JavaScript, Action script and others) requires the use of opening and closing <script> tags. The script is entered between theses tags.
Here is an example: <script> //this is just an example for adding scripts $(document).ready(function(){ $(‘h1’).click(function(){ $(this).addclass(‘.animate’) }); }); </script>
To included external script files we have to included the ‘src’ attribute in the script tags like so

<script src=http:/faqwebdevelopmenet.js type=”text/javascript”></script>
In the above HTML code the ‘src’ attribute specifies the source location of the script file and type attribute specifies the type of script being used. (Note: in HTML5 you don’t need to specify the type attribute the browsers will automatically understand the type of script).

HTML Tags | Adding a link in HTML

Image
Adding a link in HTML is fairly simple all we need to do is add the file location and link title in between the opening and closing <a> tags. like this:
<a href="http://fawwebdevelopment.blogspot.com">Link to my Blog</a>
The above code will be rendered in a browser like this:





After adding the above code the browser will change appearance of the link, the text color will be changed to blue and text will be also underlined this is the default behavior by browsers to indicate links. To style this links to appear the way you want please read the tutorial on “how to style links”.
In the HTML Code “<a href="http://faqwebdevelopment.blogspot.com">Link to my Blog</a>” <a> stands for Anchor text , “href” attribute specifies the file path .

Syntax for Inserting Linebreak, Horizontal line, Paragraphs and Headings in Html | HTML Elements introduction

LineBreak : <br/> provides a single line break
Horizontal line: <hr> inserts a Horizontal line
Paragraphs: <p></p> inserts paragraph element (note: if you forget to add the closing </P> tag browsers will still render the paragraph but it is a good practice to add the closing </P >tag).
Headings :< h1></h1> headings range from <h1 > to <h6> where h1 is the most important heading and h6 is the least important heading you can use the heading s as per your purpose like so: <h1>My Heading</h1> <h2>my other Heading</h2> <h3>My Final Heading</h3>

Advanced Jquery easing | Demo and Download

Image
Swing and Jquery easing are included in the Jquery core library but there are many other easing methods which are included in the Jquery easing plugin, available in the Jquery plugin repository. Here are the other easing methods: easeInCirc easeInOutExpo easeOutBack easeOutElastic easeOutBounce easeInOutElastic



to use this easing methods we need to pass its name to the animate function lets see an example which covers most of the above said easing methods.
Download DEMO

<! DOCTYPE HTML> </head> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/easing.js"></script> <style> p{ height:150px; overflow:hidden;} #div1,#div2,#div3,#div4{ position:absolute; border:1px solid #999; border-radius:5px; width:350px; padding:6px;} #div1,#div3{ margin-left:5%; background-color:#00CCFF; } #div2,#div4{ margin-left:50%; background-color:#FC0;} #div3,#div4{ margin-top:…

How to add Jquery easing effects | Jquery tutorial

Image
Lets start with the a little introduction, easing refers to the acceleration and declaration that occurs during the course of an animation to give it a more responsive and natural feel. There are two types of easing methods that the core Jquery library supports, which are Linear and Swing lets us see how to implement this easing methods, but before that lets see a brief description on linear and swing easing methods.
Linear easing: Linear easing method accelerates and deacclereates at a constant rate which makes it look fairly boring but it is good to know the linear easing might comin handy.

Swing easing: Swing easing method starts off slowly before gaining speed and slows down again towards the end of the animation , which makes it look more natural compared to Linear easing



Download Demo
<! DOCTYPE HTML> </head> <script type="text/javascript" src="jquery-1.7.2.min.js"> </script> <script type="text/javascript" src="easing.js&…

Selecting elements with Jquery | styling html elements with Jquery

Image
We’ll be looking on how to select a HTML element lets say for instance an <h1> tag and change the background color and the font color when clicking it, let’s get started. To select an element in Jquery we simply pass the element’s name as a string parameter to the $ function (note the $ symbol is the short form for Jquery). Here is how the code will look