CSS

Creating a Simple pop-up with blocked background

Posted on August 30th, 2011 in CSS, javascript & jquery

Today we will see how to make a simple popup with blocked background.It is made in Jquery.Here is the code below:

1st Page is index.php:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>SMOOTH POP UP MADE BY RAJAT</title>
<link rel=”stylesheet” href=”css/general.css” type=”text/css” media=”screen” />
<script src=”js/jquery-1.2.6.min.js” type=”text/javascript”></script>
<script src=”js/popup.js” type=”text/javascript”></script>
</head>
<body>
WELCOME THIS IS MY FIRST [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

CSS Tutorial

Posted on June 07th, 2011 in CSS

This is a PowerPoint presentation on CSS. You will get a basic idea about how CSS works and a few useful codes that can help you to solve some commonly faced problems in CSS. To download the presentation please click on the following link-
blog.codez.in/post-files/HTML_CSS.pptx

  • Share/Bookmark
Tags:
Read post Add your comment

5 Tips for optimizing and cleaning up CSS

Posted on April 08th, 2011 in CSS

Here are some easy but often overlooked tips to write clutter-free, efficient CSS and save file size at the same time:
1. Use shorthand
CSS properties like padding, margin, background, font and border allow usage of shorthand. Combining values using shorthand help in cutting down code and coding time.
For example:
padding-left:0px ;
padding-top:4px;
padding-bottom: 3px;
padding-right:0px;
can be written as:
padding:0 4px 3px 0;
*hint [...]

  • Share/Bookmark
Tags:
Read post Add your comment

SEO and CSS

Posted on November 11th, 2010 in CSS, SEO

Search Engine Optimization isn’t all about on-page meta tags and off-page link building. Intelligently written Cascading Style Sheets (CSS) can add a lot to search-friendliness of a site and contrary to the general idea it should be an integral part of an effective SEO campaign. And for that to happen, designers and front end coders [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

How to make a gallery

Posted on October 31st, 2010 in CSS, HTML

I am going to tell you how to make a Simple clickable gallery in 3 steps
Step1: Make the html page[Make the container & inner element]
<div id=”wrapper” align=”center”>
<div id=”transition”>
<a id=”auto_play” href=”#”>Auto Play Slide Show</a>
<a id=”previous” href=”#”><<Previous</a>
<a id=”next” href=”#”>Next >></a>
</div>
<div id=”big_image_container” align=”center”>
<img id=”big_image” src=”image/pic1.bmp” title=”Big Image” />
</div>
<div id=”thumb_image_container”>
<img src=”image/pic1.bmp” alt=”image1″ title=”image1″ />
<img src=”image/pic2.bmp” />
<img src=”image/pic3.bmp” />
<img [...]

  • Share/Bookmark
Tags: , ,
Read post Add your comment

The Sliding Doors Technique using CSS and jQuery to create buttons

Posted on October 28th, 2010 in CSS, HTML, javascript & jquery

The sliding doors CSS technique to create a button or tab is very useful in interface design in terms of both flexibility and time saved. Often web designers and developers are required to make hyperlink-based rounded cornered buttons or even navigation tabs of varying widths. It is tedious to create them by slicing images for [...]

  • Share/Bookmark
Tags: , , ,
Read post Add your comment

Preloading images from CSS using jQuery

Posted on October 21st, 2010 in CSS, javascript & jquery

My research on how to easily preload a web page’s images that are referenced in attached stylesheets as background images led me to Filament Group’s jQuery plugin for the same. It is easy to incorporate and works like a charm since it can pull images and preload them from any directory. While CSS sprites is [...]

  • Share/Bookmark
Tags: , , , ,
Read post Add your comment

Simple vertical tabs using jQuery and CSS

Posted on October 07th, 2010 in CSS, javascript & jquery

Vertical tabs based navigation is a tried and tested tool in the hands of an interface designer and a fundamental element in the graphical user interface structure. You see it everywhere in your computer software, including many parts of the OS, making tab usage second nature for the user. Naturally it extends on to the [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

Flash like hover effect using jQuery

Posted on September 30th, 2010 in CSS, javascript & jquery

It is no breaking news that jQuery, along with its other JavaScript library counterparts, is making serious dents in the Flash web pie. While I prefer to sit on the fence and watch the hot “Flash is Irreplaceable / Flash should Die” web debate, I do think there are a large number of effects that [...]

  • Share/Bookmark
Tags: , ,
Read post Add your comment

How to Resize Image Dynamically While Keeping the Proportionality

Posted on September 28th, 2010 in CSS, HTML, javascript & jquery

While doing a project in X-Cart I was asked to integrate a gallery into the product list page of the website. The purpose was to display the shop product using that gallery, but the problem was the size of the product image, it was too big and we need to resize it dynamically so that [...]

  • Share/Bookmark
Tags: , ,
Read post Add your comment
Older posts »