KLoning Spoon

butt (broadcast using this tool) is an easy to use, multi OS...

Tue, 21 Feb 2012 23:45:54 +0700

butt (broadcast using this tool) is an easy to use, multi OS streaming tool.It supports ShoutCast and IceCast. butt runs on Linux, MacOS and Windows.

Photo

Sat, 18 Feb 2012 09:24:10 +0700

Write Evaluations, Not Proposals — And Charge For Them

Fri, 17 Feb 2012 19:26:03 +0700

Write Evaluations, Not Proposals — And Charge For Them

Photo

Fri, 17 Feb 2012 19:01:19 +0700

Free Ecommerce CSS Template – Shopper Friend

Fri, 17 Feb 2012 16:06:40 +0700

Free Ecommerce CSS Template – Shopper Friend

Textmate theme to Notepad++ styler

Fri, 17 Feb 2012 08:01:04 +0700

Textmate theme to Notepad++ styler:

Textmate theme to Notepad++ styler is a program that tries to translate Textmate themes ( .tmTheme ) into Notepad++ style ( styler.xml ).

How to clear the “Open With” menu in Mac OS X

Fri, 17 Feb 2012 06:13:42 +0700

You need to get to ~/Library/Preferences/, you can get there with the Go to Folder (Command+Shift+G) option, or by the instructions below:

Open your Home directory
Open the “Library” folder
Find and open the “Preferences” folder

Once you are in the proper folder:

Locate “com.apple.LaunchServices.plist”
Rename “com.apple.LaunchServices.plist” to “com.apple.LaunchServices-backup.plist” or just relocate it elsewhere (you can delete it completely if you aren’t worried about backups)

Now the next time you use the “Open With” menu it will only include current applications in the list. You may need to log in and out of your user account for changes to take effect.

Little Notepad Design (PSD)

Fri, 17 Feb 2012 05:44:28 +0700

Little Notepad Design (PSD)

The idea is to have a list with links or in our case, social...

Fri, 17 Feb 2012 05:38:57 +0700

The idea is to have a list with links or in our case, social icons, that reveal a little tooltip on hover.

The unordered list will look like this:


	Google Plus
	Twitter
	Dribbble
	Facebook
	LinkedIn
	Forrst

The list elements will be floating left and the anchors will have the following style:

.tt-wrapper li a{
	display: block;
	width: 68px;
	height: 70px;
	margin: 0 2px;
	outline: none;
	background: transparent url(../images/icons.png) no-repeat top left;
	position: relative;
}

Each anchor will have a different background position for the background image:

.tt-wrapper li .tt-gplus{
    background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
    background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
    background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
    background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
    background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
    background-position: -340px 0px;
}

The span will work as our tooltip and we will “hide” it by setting its initial opacity to 0. The effect I want to share with you is the tooltip fading in and appearing from the top, so we will give it a bottom of 100px, placing it above the anchor:

.tt-wrapper li a span{
	width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	left: 50%;
	margin-left: -64px;
	font-family: 'Alegreya SC', Georgia, serif;
	font-weight: 400;
	font-style: italic;
	font-size: 14px;
	color: #719DAB;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 4px solid #fff;
	background: rgba(255,255,255,0.3);
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
    pointer-events: none;
	bottom: 100px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	transition: all 0.3s ease-in-out;
}

Since we will make the tooltip appear on hover over the anchor (and the span counts as part of the anchor) the tooltip will also appear when hovering over the area above the anchor (the span is still there, it’s just the 0 opacity that makes it invisible).

For the little pointer, we will style the pseudo-elements :before and :after. We will style them the same way and create a triangle by using transparent left and right borders. The :before pseudo-element will serve as a shadow for the :after pseudo-element, so we’ll give it a black rgba value with a low opacity:

.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(0,0,0,0.1);
}

The :after pseudo-element will be placed a pixel away and we’ll make it white, just like the border of the tooltip itself:

.tt-wrapper li a span:after{
	bottom: -14px;
	margin-left: -10px;
	border-top: 10px solid #fff;
}

So, on hover, we will make the span move from the top and fade in:

.tt-wrapper li a:hover span{
	opacity: 0.9;
	bottom: 70px;
}

15 Amazing CSS3 Text Effects

Thu, 16 Feb 2012 23:50:05 +0700

15 Amazing CSS3 Text Effects:

CSS3 boasts some turely amazing text effects that can help you make your website look really impressive and stylish. Designers loves clean and cool typography and they have always depended on Photoshop, but CSS3 has totally revolutionized the way text effects were added.

Textualizer is a jQuery plug-in that allows you to transition...

Thu, 16 Feb 2012 22:27:10 +0700

Textualizer is a jQuery plug-in that allows you to transition through blurbs of text.

Coding Apple’s Navigation Bar Using CSS Sprites, This tutorial...

Thu, 16 Feb 2012 16:06:18 +0700

Coding Apple’s Navigation Bar Using CSS Sprites, This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.

CSS3 Image Styles

Thu, 16 Feb 2012 00:42:10 +0700

CSS3 Image Styles:

and here the part 2 of css3 image styles.

david and goliath

Wed, 15 Feb 2012 18:41:28 +0700

david and goliath

Distractions are your worst enemy

Wed, 15 Feb 2012 18:05:45 +0700

Distractions are your worst enemy

Build a Dynamic Flash and XML Slideshow with Scripted Transitions

Wed, 15 Feb 2012 14:56:07 +0700

Build a Dynamic Flash and XML Slideshow with Scripted Transitions:

This tutorial will cover dynamically loading images from an XML file and then deal with inconsistencies in image dimensions using the GreenSock Tween Max animation library

Font Pacifico

Wed, 15 Feb 2012 10:39:11 +0700

Font Pacifico

phpFileManager is a complete filesystem management tool on a...

Tue, 14 Feb 2012 22:06:16 +0700

phpFileManager is a complete filesystem management tool on a single file.

Among the features of phpFileManager:
. server info
. directory tree
. copy/move/delete/create/rename/edit/view/chmod files and folders
. tar/zip/bzip/gzip
. multiple uploads
. shell/exec
. works on linux/windows
. php4/php5/apache2 compatible
. english/português support

Simple Code to Edit Text File

Tue, 14 Feb 2012 18:13:00 +0700

$fn = "news.txt";
if (isset($_POST['content']))
{
    $content = stripslashes($_POST['content']);
    $fp = fopen($fn,"w") or die ("Error opening file in write mode!");
    fputs($fp,$content);
    fclose($fp) or die ("Error closing file!");
}
?>

" method="post">
    <?php readfile($fn); ?>

Attaching Files To Your Posts Using WordPress Custom Meta Boxes

Tue, 14 Feb 2012 15:18:35 +0700

Attaching Files To Your Posts Using WordPress Custom Meta Boxes:

leverage the WordPress API to define our own custom meta boxes for attaching a document (such as a PDF) to our WordPress pages.