tag:blogger.com,1999:blog-40662929127957087062011-07-30T12:46:51.633-07:00PSD TO CSS HTMLNitshttp://www.blogger.com/profile/06608616060405863104noreply@blogger.comBlogger31100tag:blogger.com,1999:blog-4066292912795708706.post-23333326525766326502010-01-13T03:51:00.001-08:002011-07-16T02:01:33.230-07:00CSS Based Vertical Navigation With Mouse-Over Effect<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_4quLFr-wc8o/S022cZWLP4I/AAAAAAAAABk/Fcryb9iHXcI/s1600-h/nav.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 203px;" src="http://4.bp.blogspot.com/_4quLFr-wc8o/S022cZWLP4I/AAAAAAAAABk/Fcryb9iHXcI/s320/nav.jpg" alt="" id="BLOGGER_PHOTO_ID_5426193725007806338" border="0" /></a><br /><span style="font-weight: bold;">Create following styles in your head section ;</span><br /><br /><style type="text/css"><br /><br />*{padding:0; margin:0;}<br /><br />body{background:#f6f6f6; font-family:Tahoma, Geneva, sans-serif;}<br /><br />ul.nav{ list-style:none inside; margin:10px; width:200px; font-size:14px; font-weight:bold;}<br /><br />ul.nav li{ height:auto; margin:0; border-top:1px #9cf solid; border-bottom:1px #369 solid;}<br /><br />ul.nav li a{ text-decoration:none; display:block; color:#fff; border-left:20px #069 solid; background:#09C; padding:5px 10px;}<br /><br />ul.nav li a:hover, ul.nav li.active a{ text-decoration:none; display:block; color:#036; border-left:20px #09c solid; background:#ace; padding:5px 10px;}<br /><br /></style><br /><br /><span style="font-weight: bold;">Type the following code in your body section</span><br /><br /><body><br /><br /><ul class="nav"><br /><br /> <li class="active"><a href="#">Link-1</a></li><br /><br /> <li><a href="#">Link-2</a></li><br /><br /> <li><a href="#">Link-3</a></li><br /><br /> <li><a href="#">Link-4</a></li><br /><br /> <li><a href="#">Link-5</a></li><br /><br /> <li><a href="#">Link-6</a></li><br /><br /> <li><a href="#">Link-7</a></li><br /><br /></ul><br /><br /></body><br /><br /></html><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4066292912795708706-2333332652576632650?l=psd2csshtml.blogspot.com' alt='' /></div>Nitshttp://www.blogger.com/profile/06608616060405863104noreply@blogger.com0tag:blogger.com,1999:blog-4066292912795708706.post-65788054087591915512009-12-26T02:11:00.000-08:002011-07-16T02:02:12.702-07:00How to design a CSS based Login Form<div style="text-align: left;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_4quLFr-wc8o/SzXslEx1yeI/AAAAAAAAAA0/-vD4BuUWv7M/s1600-h/loginFormDesign.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 200px;" src="http://1.bp.blogspot.com/_4quLFr-wc8o/SzXslEx1yeI/AAAAAAAAAA0/-vD4BuUWv7M/s320/loginFormDesign.png" alt="css based login form" id="BLOGGER_PHOTO_ID_5419497848292362722" border="0" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /></div><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><br /><head><br /><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><br /><title>CSS Based Login Form</title><br /><br /><style type="text/css" media="all"><br /><br />*{padding:0; margin:0}<br /><br />body{margin:10px; font-family:Arial, Helvetica, sans-serif; font-size:14px;}<br /><br />form{border:1px #369 solid; background:#35414e; padding:20px; float:left; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; color:#eef;}<br /><br />label{display:block; margin:10px 0 0;}<br /><br />input[type=text], input[type=password] {background:#404e5b; border:none; display:block; margin:5px 0 10px; padding:3px; width:300px; color:#eee;}<br /><br />input[type=submit] {background:#404e5b; border:1px #666 solid; display:block; margin:0 auto; color:#eee; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:5px; -khtml-border-radius:3px; color:#eee; font-weight:bold; padding:3px; cursor:pointer;}<br /><br />.legend{border-bottom:1px #eee solid; display:block; font-weight:bold;}<br /><br /></style><br /><br /></head><br /><br /><br /><br /><body><br /><br /><form name="" id="" action="#" method=""><br /><br /><span class="legend">Login Here</span><br /><br /><label>User Name</label><br /><br /><input type="text" name=""><br /><br /><label>Password</label><br /><br /><input type="password" name=""><br /><br /><br /><input type="submit" value="Login" name=""><br /><br /></form><br /><br /><br /><br /></body><br /><br /></html><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4066292912795708706-6578805408759191551?l=psd2csshtml.blogspot.com' alt='' /></div>Nitshttp://www.blogger.com/profile/06608616060405863104noreply@blogger.com2tag:blogger.com,1999:blog-4066292912795708706.post-71151645727223393872009-12-23T21:19:00.000-08:002009-12-23T21:35:09.396-08:00Basics of Web Graphic Design<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_4quLFr-wc8o/SzL8iU1wLnI/AAAAAAAAAAk/2D2PIVl0G14/s1600-h/HTML-layout.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 167px;" src="http://2.bp.blogspot.com/_4quLFr-wc8o/SzL8iU1wLnI/AAAAAAAAAAk/2D2PIVl0G14/s200/HTML-layout.jpg" alt="" id="BLOGGER_PHOTO_ID_5418670968320044658" border="0" /></a>Web design is a kind of graphic design intended for development and styling of objects of the Internet's information environment to provide them with high-end consumer features and aesthetic qualities. The offered definition separates web design from web programming, emphasizing the functional features of a web site, as well as positioning web design as a kind of graphic design.<br /><div style="text-align: justify;"><br />Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.<br /><br /><br /></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4066292912795708706-7115164572722339387?l=psd2csshtml.blogspot.com' alt='' /></div>Nitshttp://www.blogger.com/profile/06608616060405863104noreply@blogger.com0