Technik Tips and Tricks: Mai 2012

Donnerstag, 31. Mai 2012

Hongkiat.com: Creating A Stacked-paper Effect Login Form

Creating A Stacked-paper Effect Login Form

Posted: 30 May 2012 12:22 AM PDT

Login forms are an essential part of any dynamic website. They provide a mechanism for website users to access restricted content. In this tutorial, we will be exploring a lot of the CSS3 features like text-shadow, box-shadow, linear gradients and transitions to create a simple and elegant login form with a stacked-paper look.

simple login form screenshot Creating A Stacked paper Effect Login Form

The image above shows a preview of the login form that we will be building. Ready to dive in? Let’s get started!

Recommended Reading: Creating A Rocking CSS3 Search Box

1. Basic HTML markup

The HTML markup that we will be using is very simple, after the HTML5 Doctype declaration, we have the <head> and <title> tags. Within the <body> tag, we have a <section> tag with a class of ‘stacked’. This <section> tag is used to define the width of the content box and to align it to the center of the page. We’ll also use this tag’s class name to target this tag using CSS. A <form> tag follows <section> tag. The form tag does not have a valid value for the ‘action’ attribute, since it is only used for the purpose of demonstration. Inside the form field are the declarations for the email and password labels and input field, followed by a submit button. The important point to note here is that we have used an input field with a type of ‘email’. This is provided to us by the HTML5 declaration and it degrades gracefully to a regular text input field in older browsers.

Here’s the entire HTML markup:

  <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-type" content="text/html; charset=utf-8">  <title>Simple Login Form</title>  <link rel="stylesheet" href="master.css">  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>  </head>  <body>  <div class="wrap">  	<div class="stacked">  		<h2>Login</h2>  		<form action="" method="post" id="login">  			<div class="field">  				<label for="email">Email</label>  				<input type="email" name="email" id="email" class="text-input" placeholder="john@doe.com" />  			</div>  			<!--field-->    			<div class="field">  				<label for="password">Password</label>  				<input type="password" name="password" id="password" class="text-input" placeholder="Secret Password" />  			</div>  			<!--field-->    			<div class="action clearfix">  				<input type="submit" />  			</div>  			<!--action-->  		</form>  	</div>  	<!--stacked-->  </div>  <!--wrap-->  </body>  </html>

And here’s a preview of what we have created so far:

unstyled login form Creating A Stacked paper Effect Login Form

2. Adding Basic Styles

Create a new css file called master.css and add a link to this file in your main HTML file. We will start our CSS file with a quick reset to obtain uniformity across different browsers. Let’s also add a nice background image to our page. The image that I have used has been taken from SubtlePatterns. Feel free to browse the site to find a background image that suits your taste. We can add the background image with the help of the following declaration. Also note that I am using the Open Sans font from Google Web Font for the body text.

  /* --------Base Styles--------- */  body, html  {    margin: 0;    padding: 0;  }    body  {    background: url("http://media02.hongkiat.com/stack-paper-login-form/bg.png") left top repeat;    font: 16px/1.5 "Open Sans", Helvetica, Arial, sans-serif;  }    div.wrap  {    width: 400px;    margin: 80px auto;  }

3. Stacked-Paper effect

Now that we have the basic layout up and running, lets get started with designing the form. For obtaining the stacked-paper effect, we will make use of the :after and :before pseudo-elements. These pseudo-elements are mostly used for adding visual effects to any selector.

The :before pseudo-element is used to add content before the selector’s content and the :after pseudo-element for after a selector’s content.

We will start by giving the section, with a class of ‘stacked’, a width of 400px and a height of 300px. Further, we will give this box a background color of #f6f6f6 and a 1-pixel-thick border with the color #bbb. The key things to note here are the border-radius declaration and the box-shadow declaration. Here, "-moz-" and "-webkit-" browser prefixes have been used to ensure that this works in gecko and webkit-based browsers.

The border-radius declaration is very simple and is used to create rounded corners, with 3px representing the curvature. The syntax for the box-shadow declaration might look complicated, but let us break it down into smaller chunks to understand it better.

  /* --------Border Radius--------- */  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;    /* --------Box Shadow--------- */  -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);  -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);  box-shadow: 0 0 3px rgba(0,0,0,.2);

The first two zero’s indicate the x-offset and the y-offset and the 3px indicates the blur. Next is the color declaration. I have used rgba values here; rgba stands for red green blue and alpha (opacity). Thus the 4 values inside the parenthesis indicate the amount of red, green, blue and its alpha (opacity).

  .stacked {  	background: #f6f6f6;  	border: 1px solid #bbb;  	height: 300px;  	margin: 50px auto;  	position: relative;  	width: 400px;  	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);  	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);  	box-shadow: 0 0 3px rgba(0,0,0,.2);    	-webkit-border-radius: 3px;  	-moz-border-radius: 3px;  	border-radius: 3px;  }

Now that we have created the basic bounding box for the form, let’s get started with the :after and :before pseudo-elements.

  .stacked:after,  .stacked:before {  	background: #f6f6f6;  	border: 1px solid #aaa;  	bottom: -8px;  	content: '';  	height: 250px;  	left: 2px;  	position: absolute;  	width: 394px;  	z-index: -10;  	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);  	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);  	box-shadow: 0 0 3px rgba(0,0,0,.2);    	-webkit-border-radius: 3px;  	-moz-border-radius: 3px;  	border-radius: 3px;  }    .stacked:before {  	bottom: -14px;  	left: 5px;  	width: 388px;  	-webkit-border-radius: 3px;  	-moz-border-radius: 3px;  	border-radius: 3px;    	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);  	-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);  	box-shadow: 0 0 15px rgba(0,0,0,0.5);  }

The code for :after and :before pseudo-elements are almost exactly similar to that of the bounding box discussed above. The only important thing to note here is that these pseudo-elements are positioned absolutely with respect to the bounding box. Each of the pseudo-element is progressively lowered by a few pixels to give it a stacked-paper look.

4. Input Fields

In the HTML markup, we have added a class of ‘text-input’ to both the email field and the password field to allow us to easily target these elements with our CSS declarations. Here’s the CSS declaration that is applied to both the input fields.

  form input.text-input {  	outline: 0;  	display: block;  	width: 330px;  	padding: 8px 15px;  	border: 1px solid gray;  	font-size: 16px;  	font-weight: 400;    	-webkit-border-radius: 25px;  	-moz-border-radius: 25px;  	border-radius: 25px;    	box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);  }

Here, again we have made use of the border-radius and box-shadow declarations. In the case of text fields, the border-radius is given a higher value to ensure more curvature. In the case of box-shadow declaration, the keyword inset has been used to specify that the shadow will be inside the text field. Here, the vertical offset for the shadow is 2px and it has a blur of 8px, the color being declared using the rgba format.

To add some interactivity to the input fields, we will change the box-shadow property for the input field on ‘hover’ state. The new box-shadow declaration has zero x and y offsets but has a 5px blur, with the color being declared in rgba format.

5. Submit Button

The final portion of this form that we have to complete is the submit button. Similar to the input field, we will give the submit button a radius of 25px using the border-radius property. A box-shadow property with a y-offset of 1px has also been added to give the button an “inner-shadow” effect.

  form input[type='submit'] 	{  	float: right;  	padding: 10px 20px;  	display: block;  	cursor: pointer;    	font-size: 16px;  	font-weight: 700;  	color: #fff;  	text-shadow: 0 1px 0 #000;  	background-color: #0074CC;  	border: 1px solid #05C;    	-webkit-border-radius: 25px;  	-moz-border-radius: 25px;  	border-radius: 25px;    	background-image: -moz-linear-gradient(top, #08C, #05C);  	background-image: -ms-linear-gradient(top, #08C, #05C);  	background-image: -webkit-linear-gradient(top, #08C, #05C);  	background-image: linear-gradient(top, #08C, #05C);    	-webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);  	-moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);  	box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);  }

The important thing to note here is the declaration for adding the gradient to this button. CSS3 gradients is a fairly large topic and we will only be scratching the surface. For this submit button, we will be adding a linear gradient going from #08C to #05C. As with all the other CSS3 properties that we have used so far, we will be adding "-moz", "-webkit", and "-ms" vendor prefixes to ensure that the gradient work across different browsers.

6. Demo and Download

Our login form is now complete. Check out the demo to see how the completed form looks. If you are lost at any point or couldn’t follow up with the tutorial, don’t worry, just download the files to your desktop and tinker with the existing CSS code to understand how it works.

Hope you enjoyed this tutorial. Feel free to experiment with these features and don’t forget to share your thoughts.

How to Unfollow Post Updates After Leaving Comments on Facebook

Posted: 29 May 2012 07:15 AM PDT

We’ve all been caught in this. A friend graduates, had a baby, is engaged or posted their cool birthday cake on facebook and you had not think twice to comment on it. Then the notifications of ‘X also commented on Y’ starts coming. And coming. And coming. And you can’t make the notifications stop!

unfollow post comments facebook How to Unfollow Post Updates After Leaving Comments on Facebook

Annoyed with too many notifications of posts updates on Facebook after leaving a comment? Thinking of deleting your participation from the thread or topic involved? Actually, we have another idea. There’s actually a way to escape from following comment updates on Facebook, and it doens’t need any extensions and isn’t even a trick.

Recommended Reading: 20 Facebook Tips/Tricks You Might Not Know

Unfollow Facebook Comment Updates

To unfollow comment updates or alert, assuming you have already left a comment on a post, you need to go to the post’s page to unfollow.

From your Facebook Wall or your friend’s Timeline, click on the time stamp of the post you commented earlier (the time stamp may appear as ‘date’ if it has been posted for quite sometime).
This will bring you to the post’s page, and you will see a link that says ‘Unfollow Post’. Click that link to immediately unfollow the post.

Alternatively, clicking on comment alert will also direct you to the post’s page where you can find the unfollow link.

Follow Facebook Comment Without Commenting

Now when you click on time stamp of any post on Facebook, it will direct you to the post’s page where you will see the ‘Follow Post’ link. Click on this link to follow the post’s updates without commenting, or you can also use this link to follow back the post you have unfollowed earlier.

Unfollow Follow How to Unfollow Post Updates After Leaving Comments on Facebook

Conclusion

With these simple steps, now you can forget the annoying comment updates by simply unfollowing the particular post without deleting your comment. This way, no one would know you have left the conversation. Also, you get to follow comment updates to a status without having to comment first.

Hongkiat.com: 30 Geeky Artworks Created Using Microsoft Excel

30 Geeky Artworks Created Using Microsoft Excel

Posted: 29 May 2012 11:52 PM PDT

Microsoft Excel, my boss loves it, I hate it to bits. It’s deadly effective as a tool to organize data, but it’s overwhelmingly boring as well. Honestly, what can I do with Microsoft Excel? Previously, there was only Microsoft Paint and heck, Minesweeper in my Windows 98 work computer. It wasn’t until I surfed the web with IE6 that I stumbled upon the realization that you can actually use Microsoft Excel to draw!

microsoft excel artworks 30 Geeky Artworks Created Using Microsoft Excel
(Image Source: oscarit07)

In today’s post, I would like to showcase to you 30 seriously geeky yet excellent artworks created with Microsoft Excel, i.e. the results of my role as a professional procrastinator. Some of them are games, that work! I hope you will enjoy them as much as I did, and do. Sorry boss.

Megaman X. Looking at this realistic piece, Megaman X’s soundtrack has started playing in my mind. (Image Source: Sakumoti)

Megaman Excel. In case you want more Megaman X awesomeness in Excel, here is another one for you! Besides, there are also other nice Megaman sprites like this, this, and this. (Image Source: synbios16)

Robo Battle. Megaman X vs. Iron Man, making their debut on the Excel platform! Thanks donkeykonggod for this very cool artwork. (Image Source: donkeykonggod)

Sonic & Knickles. Love the color scheme as it makes the art look like a modern retro game! (Image Source: Jim Silverman)

Gaming Life. If you didn’t play these before, you still have a childhood, you just missed all the good parts, that’s all. (Image Source: synbios16)

Final Fantasy. RPG gamers will surely know these figures! (Image Source: Jim Silverman)

Laharl. The cute evil king Laharl in Excel! I must say the shading is really impressive, probably the best pixel Laharl I have seen so far. Well done CrowKuroa. (Image Source: CrowKuroa)

Zelda Link. How much detail can an artist go into with Excel? Apparently, this much. (Image Source: ignite25)

Roxas. A character from the Kingdom Heart series. Only a skilled artist like ignite25 could achieve this. (Image Source: ignite25)

Gundam Excel. “I was proctoring finals with nothing to do except watch students, so I decided to give it a try. This image took about 4 hours to do.” (Image Source: Klunker-Decepticon)

Kos-Mos. “Around 7 hours of ‘work’ here. Now all I have to do is explain this is why the time reports aren’t filled out and completed.” (Image Source: Klunker-Decepticon)

Pikachu. A wild Pikachu appears in Excel! Get another cute one here. (Image Source: CrowKuroa)

Jolteon. I choose you, Jolteon! Besides this charming one, you can also get to view Charmander, Squirtle, Haunter, Cyndaquil and Blaziken! (Image Source: CrowKuroa)

Dialga. Think that only a small Pokémon could exist in the Excel and you’re wrong. Introducing the giant Dialga in Microsoft Excel. (Image Source: thetokomitsu)

Giratina. I must admit it, thetokomitsu is the professional. (Image Source: thetokomitsu)

Pokémon Yellow. And here you are, 151 Pokémons in Excel! thetokomitsu you are my hero. (Image Source: thetokomitsu)

Sex Bob-Omb. It’s the Sex Bob-Omb from Scott Pilgrim vs. the World! Must have taken a lot of planning and hard work though, otherwise it won’t be this awesome! (Image Source: ignite25)

Nyan Cat. How could we miss the Nyan Cat if we are talking about the pixel art? It just exists everywhere, including Excel! (Image Source: oscarit07)

Me Gusta. So much win! (Image Source: thetokomitsu)

Space Invaders. Don’t miss the classic Space Invaders! They are like Nyan Cat, invading every form of art and Excel is not an exception. (Image Source: douglas)

Megaman II. Megaman II is absolutely one of the more classic retro games, and this epic deviant named Serraxor has just reproduced its logo and a complete walk cycle sprite of the Megaman in the Excel! (Image Source: Serraxor)

Bionic Commando. What could be more cool than seeing the Bionic Commando logo in Microsoft Excel? (Image Source: Serraxor)

Gundam. No, Excel is not for pixel drawing only, it could also be used to draw something epic like this, and here is the proof! (Image Source: shukei20)

X-Wing Fighter. Proudly presenting the realistic X-Wing Fighter illustrated by shukei20! And don’t forget the retro warp text from the Microsoft Office! (Image Source: shukei20)

Darth Vader. Be sure to check out how this Darth Vader invades Excel with this video! (Image Source: shukei20)

Monalisa. Looks impossible huh? Don’t get cheated, it’s actually generated by a plugin named ExcelArt, which you can get it from the source link. (Image Source: boydevlin software)

Avatar. Another piece generated by the plugin, now you can impress or cheat anyone with it! (Image Source: labnol)

Super Mario World. Super Mario World revived in Excel! I never thought I would meet Mario again in Excel. Also check out the site for more classic games! (Image Source: GamesExcel)

Sonic Excel. If you think the Excel is just for slow games, check out Sonic on Excel. Heck, it’s even as smooth as the console version! (Image Source: GamesExcel)

Paccy Man. Introducing Paccy Man for Excel. Kill boredom even if you’re on Windows 98. (Image Source: Excel Game)

Reflection

The concept in these fan art on Excel is just to color the cells in the right order. But when you start making an illustration from scratch, the workload will really freak you out! There is a lot of potential things you can do with Microsoft Excel. With the right knowledge of programming, one can even animate the artworks, and make a game out of it! Know your way around Microsoft Excel well enough to make your own artwork, animation or games? Show us what you’ve got or share with us amazing artwork that you have encountered before. Plenty of space in the comments section for everyone.

Getting around in Yahoo! Axis

Posted: 29 May 2012 11:51 PM PDT

Yahoo had recently introduced Yahoo! Axis, the first-of-its-kind search-oriented add-on for your browser with plenty of integration between mobile, tablet and desktop for you to keep it around. We’re going to give you a quick inside look into how to get started with with.

axis ipad chrome Getting around in Yahoo! Axis

This new approach by Yahoo, on the application platform, helps users experience a new kind of search facility without having to visit any search engine website first. With Chrome you can always do a search by simply opening a new tab and directly typing any query into the address bar, but with Yahoo, well, the results are displayed in a much different way. Let’s take a look at the new Yahoo! Axis.

Yahoo! Axis on Browsers

In this post, we’re taking Chrome as an example on how to integrate Yahoo! Axis with existing browsers. To start using Yahoo! Axis on Chrome, download the Chrome add-on from the official page.

axis desktop download Getting around in Yahoo! Axis

When installation is complete, you will see a small search bar placed like a bullet at the bottom left corner of your browser carrying two icons, namely the Bookmark (star icon) and Home.

axis desktop search Getting around in Yahoo! Axis

Hovering over this search bar will expand its section to the whole bottom part of your browser. Click it to expand it. All your search results within Yahoo! Axis will appear in thumbnails right from the Axis bar itself.

axis desktop bar Getting around in Yahoo! Axis

Click open any result from the thumbnail, and you will notice navigation arrows appear to the left and right side of your browser. Clicking on the left arrow will bring you to the previous search result page, while the right arrow will take you to the next search result page.

axis left arrow Getting around in Yahoo! Axis

To experience the Bookmark, log in with your Yahoo! ID (which you may have registered many years ago) by clicking on the login button available at the Axis search bar.

axis desktop login Getting around in Yahoo! Axis

Now if you wish to bookmark any web page, simply click on the Star button and insert it into the folder you want to save the bookmark to.

axis desktop bookmark Getting around in Yahoo! Axis

Going Home will lead you to your bookmark page, where you will be able to reorganize your folders.

axis bookmark folder Getting around in Yahoo! Axis

You also have another way to access your bookmark without going Home; simply click on the silver ribbon at the Axis bar.

axis desktop ribbon Getting around in Yahoo! Axis

The Bookmark panel will appear.

axis bookmark panel Getting around in Yahoo! Axis

Yahoo! Axis on iPad

To experience Yahoo! Axis on your iPad, you can proceed to download it from iTunes.

After installation, launch the Axis app and you will first see the welcome page with a guide to help you get used to the navigation. When you do any search and access any webpage, you can always return to the search results by pulling down the screen.

axis ipad Getting around in Yahoo! Axis

Now the first thing you might want to do is to sign in to your Yahoo! ID, so click on the login button and sign in.

axis ipad sign in Getting around in Yahoo! Axis

To continue browsing or to access any web address, you can simply use the search bar to search. The search results will appear at the top part of the browser, in the same way it appears on Chrome.

axis ipad search Getting around in Yahoo! Axis

Notice there is also a Star button to bookmark your web pages like in Chrome. To access your bookmark, simply click on the silver ribbon at the top right corner of your browser.

axis ipad ribbon Getting around in Yahoo! Axis

Since you have logged in to Yahoo, you will see the bookmark you saved from your Chrome browser.

axis ipad bookmark Getting around in Yahoo! Axis

With this iOS browser, you also have the functionality of multiple tabs, but different from other browsers, the tab button is placed at the bottom of the browser. Simply click on the tab button to reveal tabs with the option to add new tabs.

axis ipad tab Getting around in Yahoo! Axis

Conclusion

The overall browsing experience with Yahoo! Axis is pretty smooth especially on iOS devices which brings new meaning to the term seamless integration. Pull and tap to get around and even when you switch to your other iOS device, you pick up where you left off. On a side note, you might find the left and right navigation button for Chrome a little annoying at times. But that’s my take, what’s yours?

Technik Tips and Tricks

the best Web Hosting- $7.99/year. Host Unlimited Domains-$25.99/year

Donnerstag, 31. Mai 2012

Hongkiat.com: Creating A Stacked-paper Effect Login Form

Hongkiat.com: Creating A Stacked-paper Effect Login Form

1. Basic HTML markup

2. Adding Basic Styles

3. Stacked-Paper effect

4. Input Fields

5. Submit Button

6. Demo and Download

Unfollow Facebook Comment Updates

Follow Facebook Comment Without Commenting

Conclusion

Mittwoch, 30. Mai 2012

Hongkiat.com: 30 Geeky Artworks Created Using Microsoft Excel

Hongkiat.com: 30 Geeky Artworks Created Using Microsoft Excel

Reflection

Yahoo! Axis on Browsers

Yahoo! Axis on iPad

Conclusion