Fading text with CSS blend modes

A really cool text effect with CSS blend mode designed by Giana. When you hover over the faded text it comes into view. If you are having trouble with the pen, try the archived copy on GitHub Fading Text Snippet   HTML <div class=”wrapper”> <div class=”content”> <h1>Fade away text</h1> <p>Hover over me to reveal the rest. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloremque facere

Read more

Search Icon to Search Box Animation

When you click on the search icon it expands to a search box. It was designed by Alex Tkachov. If you are having trouble with the pen, try the archived copy on GitHub Search Animation Snippet   HTML <div class=”search-wrapper”> <div class=”input-holder”> <input type=”text” class=”search-input” placeholder=”Type to search” /> <button class=”search-icon” onclick=”searchToggle(this, event);”><span></span></button> </div> <span class=”close” onclick=”searchToggle(this, event);”></span> </div> CSS body { background: #212129; }

Read more
ip address

IP Address

Often you may want to let the visitor know that you are aware of their IP address. You can do so using a few lines of code, as shown here. Place the code where you want the IP address to appear: <SCRIPT LANGUAGE=”JavaScript”> var ip = ‘<!–#echo var=”REMOTE_ADDR”–>’; document.write(“Your IP address is” + ip); </script>

Read more

Focus OnLoad

You can put the user’s cursor inside a text box (calling the text box’ focus) as soon as the page is loaded. This helps ensure that visitors do not ‘overlook’ an important form item on your site. It only uses one line of code! This part goes into your body tag: <BODY OnLoad=”document.nameform.user.focus();”> Then you just use the name of

Read more

JavaScript Back Button

Just like your browser’s back button, the following script allows the user to press a button to returns the user to the previous page. Paste the following code where you want the button to appear on your page: <FORM> <INPUT TYPE=”Button” VALUE=”Previous Page” onClick=”history.go(-1)”> </FORM> If you would rather use a link, paste the following code where you want the

Read more


This is a plain and simple monthly calendar. It’s formatted with styles sheets so the appearance can easily be changed. In the head of your document, add the following style sheet and JavaScript code: <style type=”text/css”> span.label {color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial} span.c1 {cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial} span.c2 {cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial} span.c3 {cursor:hand;color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial} </style> <script type=”text/javascript”> function maxDays(mm, yyyy){ var mDay;

Read more
1 2 3