I’m an avid gamer, and I’ve devoted a bulk of my time in my bedroom playing games without giving a single thought to what goes behind the doors of the many players in the gaming industry, apart from what games they are releasing next. Inspired by earlier behind-the-name stories here on the site, this time we are going to look into the stories behind big names in the gaming industry.

Some of these names might not be familiar to you but their games were probably part of your childhood. Read on to find out how these brands in the gaming industry got their names.

Find other Behind The Name stories:

• Stories Behind Names of Tech Giants – Part I
• Stories Behind Names of Tech Giants – Part II

If you make money from your website or blog, chances are you’ve heard of or at least used Google’s CTR-based advertising network – Google AdSense.

Google Adsense has, if we may, 2 distinctive type of publishers. Those who constantly receive monthly cheques from Google, we call them the happy publishers. The others, the not so happy publishers.

This article is catered for the latter group. Publishers tend to look for an alternative for all sorts of reason. Here’s a list of contextual ad networks similar to Google Adsense, meaning they reward you monetarily when visitors clicked on the contextual ads displayed on your website.

In short – they are the Google AdSense alternatives. We hope you find them useful.

Disclaimer: We have not used most of the ad networks here before. This is an attempt to discover and bring to your awareness more options of contextual ads publishing. We urge you to spend time carefully checking out more details (ad performances, ad size/format, payout threshold, payment method, online reviews, etc) of any particular ad network you intend to use on your website.

The Infamous 3

Chitika

Chitika is probably one of the top choice when publishers come to seek for an Adsense alternative. Chitika’s ads are search query driven, that means your visitors will not see the ads unless they are coming into the website via search engine.

The image below gives you an idea how a Chitika ad would look like:

Despite being one of the most popular AdSense alternatives, Chitika’s ad performance are still a bit on the low side for most publishers. Publishers ought to have a high quality site and apply for Chitika’s Silver level or Gold level ad program in order to see surge in terms of revenue.

Related links:

• Sign up – Professional Publisher / Enterprise Publisher
• Publisher’s page
• FAQ

Misc info:

• Minimum payout: $10 (PayPal), $50 (cheque)
• Payout time: Net 30

Yahoo Bing Network

This new ad network is a collaboration of two of the biggest search engines on the internet, and it should not be confused with Yahoo’s existing YPN and Microsoft’s adCenter. Publishers of the Yahoo Bing Net manage their ad units via Media.net.

One of the advantages of Yahoo Bing Network compare to Google AdSense is perhaps its ability to allow publishers to customize their ad units in terms of style (size, color, shapes) so it blends better with their respective website.

The Yahoo Bing Network is currently not open for public sign up, but if you are keen enough and most of your website’s traffics are coming from United States, Canada and United Kingdom, you can request for an invitation.

Related links:

• Sign up
• Publisher’s page
• FAQ

Misc Info:

• Minimum payout: $100. Paypal or Wire.
• Payout time: Net 30

Kontera

Kontera uses the in-text advertising model. In a nutshell, in text ads do not take up additional ad spaces, rather, they analyse your site’s content and turn relevant keywords or phrases into hyperlinked text ad.

Here’s how a Kontera in-text ad would look like:

Kontera is based on a CPC model, in another words publishers get paid when visitors click on the ads. The ads customizable, that means you are able to alter the color of the hyperlinks, control the density of text links or even restrict turning any specific keywords into a text ad.

Related links:

• Sign up
• Publisher’s page
• FAQ

Misc Info:

• Minimum payout: $50. Paypal, Wire or Cheque.
• Payout time: Net 30

A few More:

If you’ve tried the above mentioned 3 and they don’t quite work out for you, here are more advertising networks you can explore.

Clicksor

Clicksor has a range of different types of ad formats. The two popular ones you may want to look into are their text ads (Google AdSense alike) and in-text ads (Kontera alike).

Clicksor’s payout term is Net 15, and you can opt for cheque or Paypal payment option as long as your earnings exceed $50.00

[Sign up] [Publisher's page]

Vibrant Media

Similar to Kontera, Vibrant Media is another ad network notable for their in-text ads. Vibrant Media has recently launched two types of ad formats for extra revenue streams, respectively the in-image ads which integrate text ads within images, and display ads which works on a Cost per-thousand Impressions (CPM) model.

[Sign up] [Publisher's page]

AdSide

AdSide’s banner ad format looks very similar to Google AdSense with one exception – it has a thumbnail on the left side of each row of ad. The following image gives you an idea how the ad looks like:

AdSide ads target heavily on United States, Canada and United Kingdom visitors. If you have an amountful of traffics coming from these mentioned locations, it may work for you.

[Sign up] [Publisher's page]

Infolinks

Infolinks is yet another in-text advertising network. They can also be considered a good alternative if the current in-text ad network is not performing well.

[Sign up] [Publisher's page]

The Rest:

Here are more that we’ve heard of:

• Link Worth
• Intellilinks
• Reachli
• Bidvertiser
• Qadabra

Table View of Everything

Networks	Ad types	Payout Min/ Method	Payout Time
Chitika	Targeted text Mobile	$10 (PayPal), $50 (Cheque)	Net 30	More info	Sign up	FAQ
Yahoo Bing Network	Targeted text Display	$100 (PayPal/Wire)	Net 30	More info	Sign up	FAQ
Kontera	In-text Mobile Display	$50 (PayPal/Wire/Cheque)	Net 30	More info	Sign up	FAQ
Clicksor	In-text ads Text banner Display Pop-unders Interstitial	$50 (PayPal, Cheque). $1000 (Wire)	Net 15	More info	Sign up	FAQ
Vibrant Media	In-text In-image Display Screen takeover	$50 (Cheque, Wire)	Net 45	More info	Sign up	FAQ
AdSide	Targeted text Mobile In-image In-video Interstitial Pop-unders	$50 (Cheque)	Net 30	More info	Sign up	n/a
Infolinks	In-text In-search In-tag	$50 (PayPal, Wire, eCheck, WU)	Net 45	More info	Sign up	FAQ
Link Worth	Targeted text Display Sponsored post In-text	$25 (PayPal), $100 (Wire)	Net 30	More info	Sign up	FAQ
Intellilinks	In-text	PayPal	Net 30	More info	Sign up	FAQ
Reachli	In-image	Paypalm $1000 (Wire)	n/a	More info	Sign up	n/a
Bidvertiser	Targeted text	$10 (PayPal)	Net 30	More info	Sign up	FAQ
Qadabra	Display	$1 (PayPal), $500 (Wire)	Net 45	More info	Sign up	FAQ

Heard of more? Leave a comment below and share with the rest of us.

Masking in image editing is a method of ‘hiding’ a portion of an object based on another object. This method has long been available in Image editors like Photoshop. A similar method can also be done in CSS with some of its properties.

• View Demo

But before we proceed, let’s take a look at how we do this effect in Photoshop first, and then you will see how we can mimic a similar effect with CSS.

In Photoshop

In Photoshop, we need to have at least two objects for a ‘masking’. After that we can simply hold the Alt (Win) or Option (Mac) key and position the mouse pointer between the layers of these two objects (see screenshot).

In this example, we clipped a circle into a rectangular.

Masking can also be applied to other types of layers. In this example, we mask an image to a text.

So, the question is, can we apply similar things on the Web? In short, yes we can. Let’s see how it is done.

In CSS

There are some properties in CSS we can use to recreate similar effects on the Web, they are ‘overflow’, ‘clip’ and the new CSS3 property background-clip:

Overflow

The overflow property defines the areas that exceed the CSS box model. In the following example, we recreate our first example in Photoshop.

Regarding the HTML markup, we will have two div to form the circle and the rectangle, and we put the div for the circle inside the div for the rectangle like so;

  <div class="rect">  	<div class="circle"> </div>  </div>  

Then, we style it a little bit and position the circle slightly out of the rectangle to the right.

  .rect {  	width: 200px;  	height: 200px;  	background-color: #eaeaea;  }  .circle {  	width: 200px;  	height: 200px;  	border-radius: 100px;  	background-color: #601785;  	position: relative;  	left: 100px;  }  

At this point we will get the following result:

Now, to hide the part that exceeds the rectangle area, we simple declare the overflow property to hidden on the rectangle, like so;

  .rect {  	width: 200px;  	height: 200px;  	background-color: #eaeaea;          overflow: hidden;}  

There we go; we accomplish the same result as in the Photoshop method.

Clip

Another way is by using the clip property. This property has been in existence since CSS2, so we can rest assure that it is supported in old browsers. As we will be using clip property, we won’t need the rectangle div. So, our mark will just be the circle, as follows.

  <div class="circle"> </div>	  

With the same style we form this div into a circle. Then, we use clip property to hide half of this circle. The clip property at this time only supports the rect() function; it contains four values that define the rectangle coordinates that is described as follows rect(top, right, bottom, left).

Lastly, for the clip property to work in hiding the element, we need to define the element’s position to absolute.

  .circle {  	width: 200px;  	height: 200px;  	border-radius: 100px;  	background-color: #601785;  	position: absolute;  	left: 100px;  	clip: rect(0px,100px,200px,0px);  }  

This code will result in the following. Unfortunately, since we define the rectangle through the rect() function we are not able to add background color for it, but the idea of masking elements is there.

Background Clip

Recently, CSS3 has a new property called background-clip, it determines the background painting area. With this property we are able to limit the scope to where the background will be applied.

The full syntax of this property is: background-clip: border-box|padding-box|content-box;.

But the Webkit browser is one step further in this area by also adding text value, which makes it possible to use text for the mask. In the following example, we would like to recreate the second masking effect from our Photoshop example. First we add the text, like so;

  <h1>Galaxy</h1>  

Then, in the stylesheet we add the background-image to this text as well as declare the background-clip. To make the background appear we also need to decrease the color fill in the text with RGBA color mode.

  h1 {  	font-family: Arial;  	font-size: 5em;  	text-align: center;    	background-image: url(Galaxy.jpg);    	-webkit-background-clip: text;  	background-clip: text;    	color: rgba(0,0,0,0);  }  

This code above will give us the following effect for the text.

• View Demo
• Download Source

Final Thoughts

In this post, we have covered three different approaches to masking objects on the Web. There is no one best way here. It depends on the purpose. Have you tried these properties on your website? Do you have some other tips to do something similar? Share your thoughts in the comment box below.