Introduction To Working With Google Web Fonts

Google web fonts directory provides hundreds of different styles of fonts to use in your projects. Highlighting important content with different fonts allow users and search engines to scan your content very quickly. Lets learn how we can simply use google fonts style our content using jquery plugins.

Tutorial Contents

• How To Inlcude Google Fonts
• Jquery Plugin with Inline CSS Styles for Google Fonts
• Jquery Plugin with Common CSS Styles for Google Fonts

Creating a Dynamic Back To Top Button with Fixed Position

When we get a web page or post which is very long due to the size of the content we need to use the scrollbar to see the content on the bottom. Once we read out the page in order to get to the top menu we need to scroll up again. In users perspective this is a very boring task. So if we can provide a method to go back to the top without scrolling , it will enhance the user’s experience in using the site. So I am going to create a simple button to achieve this task..

Tutorial Contents

• Why We Need a Back To Top Button
• Demo and Source Code Download
• Creating the Back To Top Button Using Jquery and CSS
• Code Explanations

Introduction To Liquid CSS Layout Design

Web design layouts can be created according to various techniques. Most commonly used techniques is designing the page inside fixed container which is aligned center in the browser window. But now the liquid css layouts are becoming more popular in the web designing world. When you create a liquid layout the width and heights of html elements inside the page will change according to the size of the browser window.

Tutorial Contents

• Introduction To Liquid CSS Layout Design
• Liquid Layout Demo and Download
• How To Make Liquid CSS Layout
• Basic Introduction To Required Styling Concepts
• Creating Liquid Layout From Scratch
• Advantages of Liquid CSS Layout
• Disadvantages of Liquid CSS Layout

How to Make a Div Invisible Using CSS and Jquery

Changing the visibility of elements is very usefull when you display large amount of content using tabs,accordians,sliders..etc. In this tutorial i am going to show you how to change the visibility of div element using css and jquery. You can apply these techniques to most of the html containers available.

Tutorial Contents

• How to Make a Div Invisible
• Creating a Invisible Div using Jquery
• Invisible Div Download

Introduction to Using Web Developer Toolbar CSS Menu Web Developer Toolbar is a addon built for mozilla firefox web browser which allows developers and designers to increase coding speed and testing speed. It provides various functionality in managing css,javascript,cookies,dom,html,web forms, etc…. In this guide I am going to talk about using the css menu of [...]

Introduction To Fixed Positioning With CSS In this tutorial I’m going to talk about using css positioning to improve the web page layout in order to increase the user friendliness. CSS can be used to position html elements where ever we want in the web page. There are 3 kinds of positioning techniques called fixed,absolute [...]

How to Find Links using Jquery Using jquery selectors we can easily find html links inside a given web page. there are 3 types of selectors mainly in jquery. In this example I’m going to use tag based selector to find links with href attribute.   Jquery Selectors 1. ID Selector – $(‘#id’) 2. Class [...]

Introduction to Transparency in CSS CSS allows you to make any element with background color or image transparent with its opacity and filter alpha attributes. Once the transparent level is defined user will see the element in a different visibility level. You have to specify both opacity and filter attributes at the same time considering [...]

How to embed fonts in CSS There are situations where you may require to use special types of fonts for specific pages or parts of a web application. If the font you are using is not available in default fonts, you have to embed it using css. Lets start by downloading the example font pirulen.ttf [...]

Introduction to smarty literals Smarty literals provide a way to include anything inside the tags without interpreting. Literals are useful when inserting javascript and css code inside your templates. Smarty uses delimiters to define its variables and code. The default delimiters of smarty is { and }. Since js and css contain these curly braces [...]