Coly010 Posted March 27, 2011 Posted March 27, 2011 Hello everyone, I have successfully created a new login and I would like to share the image with you. It is HTML 5, Javascript and CSS inspired. It took me the best part of two hours to do so and any comments from you would be great. please ignore the watermarks ;). I haven't given out the code yet, but I do have it so please tell me what you think first, then I'll decide whether to give out the code or not :) Thanks, Coly010 Quote
W3Theory || Peter Posted March 27, 2011 Posted March 27, 2011 It's just an image? So how can we judge on the actual javascript and css formatting if it's just an image? Now if you want remarks on how it looks, I am not sure if I am a fan of the page itself. Don't like how there is just a big image taking up most of the room with the info/register taking up 30% of the page, it seems wasteful to me. Quote
Djkanna Posted March 27, 2011 Posted March 27, 2011 What exactly is HTML5 inspired (not sure that's the right word to be honest), other than what I presume to be the keygen. Quote
Coly010 Posted March 28, 2011 Author Posted March 28, 2011 html5 has the keygen which can be used for authentication i used the canvas tool too which uses javascript and for mouse over effect lol :( here's the code so you understand , it's easily coded: <!DOCTYPE HTML> <head> <title id="title"></title> <style type="text/css"> #nav { position:absolute; left:0px; top:0px; z-index:-1 } #Login { position:absolute; left:850px; top:13px; } #Body { position:absolute; left:0px; top:50px; z-index:-1 } #home { position:absolute; left:0px; top:0px; size: 20px; color: #c3c3c3; font-family: Arial, Comic Sans, Veranda; } a:link, a:visited, a:active { color: #FF9900; text-decoration: none; } #bimg { position:absolute; left:0px; top:50px; } #screenshots { position:absolute; left:870px; top:340px; border: 4px groove #c3c3c3; } #Register { position:absolute; left:870px; top:50px; border: 4px groove #c3c3c3; } </style> </head> <body> <div id="Login"><input type="text" id="username" value="Username" />  <input type="password" id="password" value="Password" /><input type="button" onclick="Login()" value="Login" /></div><div id=Nav></div> <div id=Body></div> <p id=home>[url="index.html"]Home[/url]       [url="register.php"]Register[/url]        [url="tos.html"]TOS[/url]</p> [img=Images/ferrari.png] <fieldset id="screenshots">[img=Images/screen.png][img=Images/screen.png] [img=Images/screen.png][img=Images/screen.png]</fieldset> <fieldset id=Register><legend id=lregister>Register</legend><form action="register.php" method="POST" name="Reg"> Username: <input type="text" name=username value="Username" /> Password: <input type="password" name=password /> Confirm Password: <input type="password" name=cpassword /> Email: <input type="email" name=email /> Security: <keygen name="security" /> <input type="submit" value="Register" /> <input type="button" onclick="document.Reg.reset()" value="Reset" /> </form></fieldset> <script type="text/javascript"> var scnHei; var scnWid; if (self.innerHeight) // all except Explorer { scnWid = self.innerWidth; scnHei = self.innerHeight; } else if (document.body) // other Explorers { scnWid = document.body.clientWidth; scnHei = document.body.clientHeight; } document.getElementById("Nav").innerHTML = "<canvas id='nav' width='" + scnWid + "'  height='" + scnHei + "'></canvas>"; var c=document.getElementById("nav"); var nav=c.getContext("2d"); var grd=nav.createLinearGradient(0,0,1500,50); grd.addColorStop(0,"#003D00"); grd.addColorStop(1,"#00CC00"); nav.fillStyle=grd; nav.fillRect(0,0,1500,50); document.getElementById("title").innerHTML = "Welcome To NoticeBoard"; document.getElementById("Body").innerHTML = "<canvas id='body' width='" + scnWid + "'  height='" + scnHei + "'></canvas>"; var c=document.getElementById("body"); var body=c.getContext("2d"); var grd1=body.createLinearGradient(0,0,1500,1000); grd1.addColorStop(0,"#006600"); grd1.addColorStop(1,"#FFFFFF"); body.fillStyle=grd1; body.fillRect(0,0,1500,1000); </script> </body> </html> i know i could have used css for the hover but i was testing my js skills since i'm pretty new to it Quote
Djkanna Posted March 28, 2011 Posted March 28, 2011 I'd advise you against using canvas especially something such as a gradient. Canvas is heavy on your CPU, so in this case you can use CSS3 gradients. What about html5 markup? Quote
Coly010 Posted March 28, 2011 Author Posted March 28, 2011 it just gave me something to do i'll look into other stuff and expand the range Quote
ZillaBay81Tre Posted March 31, 2011 Posted March 31, 2011 well to be straight up i dont like it Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.