Blancer.com Tutorials and projects

One Week Left to Enter the CodeCanyon Scripting Competition

On February 1st, we announced an enormous scripting competition on CodeCanyon with prizes equaling $6200. You now have just one week left to enter!

For those unfamiliar, Envato recently launched its newest marketplace, focused specifically on selling high-quality scripts and components for PHP, JavaScript, ASP.NET, and Java. As we’ve only recently launched, we’re hoping to build up our repository with a plethora of fantastic scripts and components, across all of the categories.

How Do I Enter?

Quite simply! To enter, prepare an item (PHP, JS, ASP.NET, or Java) of your choice for CodeCanyon, and once it has been submitted and accepted on the site, leave a comment here with a link to your item. That way, we can track it! That’s all! Then, on March 1st, 2010 (CST), my review staff and I will filter through all of the submissions and choose the best three of the bunch!

Grand Prize Winner

1. 1 Dedicated Virtual Box (Rage) from Media Temple ($1200 value)
2. 1 32 gigabyte iPod Touch ($299 value) (Ultimate TechSmith Package)
3. 1 copy of Camtasia Studio for Mac or PC ($299 value) (Ultimate TechSmith Package)
4. 1 copy of Camtasia Studio 6: The Definitive Guide ($39.95 value) (Ultimate TechSmith Package)
5. 1 Logitech QuickCam Communicate Deluxe PC Webcam ($99 value) (Ultimate TechSmith Package)
6. 1 Audio Technica USB Studio Condenser Microphone ($149 value) (Ultimate TechSmith Package)
7. $100 Envato credit (Can be used across all of the marketplaces)
8. $200 cash
9. 1 MediaTemple Gift Card – 1 year of hosting, 1 domain name, Up to 5 websites. ($95 value)
10. $25 Amazon Gift Card
11. 1 year Tuts Plus membership – ($78 value)
12. 1 Wufoo Subscription – 1 year ($288 value)
13. 1 Formspring Pro Subscription – 1 year ($348 value)
14. 1 Surreal CMS Subscription – 1 year ($275 value)
15. 1 Personal TypeKit subscription – 1 year ($300 value)
16. 1 Myows Paid Account – FREE for life
17. 1 Rockable Press Book of your Choice ($29 value)
18. 1 copy of Snippet (mac app) ($13 value)
19. 1 copy of jQuery UI 1.7 from Packt Publishing ($40.49 value)
20. 1 copy of Magento Beginner’s Guide from Packt Publishing ($35.99 value)
21. 1 copy of Object-Oriented JavaScript from Packt Publishing ($35.99 value)
22. 1 copy of jQuery Cookbook from O’Reilly Publishing ($34.99 value)
23. 1 Threadsy Invite
24. You will be featured on the front page of CodeCanyon as both the featured author and the featured item of the week!
25. Your item will be included in a collection of the three winning submissions, and will be promoted on the front page of CodeCanyon
26. As an Envato marketplace author, you’ll earn 40-70% of every sale!

2 Runners-Up

1. 1 year Tuts Plus membership – ($78 value)
2. $50 Envato credit
3. 1 Personal TypeKit subscription – 1 year ($300 value)
4. 1 Surreal CMS Subscription – 1 year ($275 value)
5. 1 Wufoo Subscription – 1 year ($288 value)
6. 1 Myows Paid Account – FREE for life
7. 1 Rockable Press Book of your Choice ($29 value)
8. 1 copy of Snippet (mac app) ($13 value)
9. 1 Threadsy Invite
10. Your item will be included in a collection of the three winning submissions, and will be promoted on the front page of CodeCanyon
11. As an Envato marketplace author, you’ll earn 40-70% of every sale!

What Kind of Item Should I Submit?

We’ll that’s entirely up to you! That’s where you get to be creative. With that said, you’ll want to think of an item that will appeal to a wide variety of buyers. Ask yourself, “what sort of script or component – that’s not widely available around the web for free – have I often found myself in need of? Remember that, at this time, we’re only accepting PHP, JavaScript, ASP.NET, and Java related items.

Refer here to view the best selling items on CodeCanyon.

FAQs

When is the deadline to enter?

The competition will officially end on February 28th, 2010 at 11:59 PM, Central Standard Time. However, we do hope that you’ll submit before that date.

Are all items accepted on CodeCanyon?

No. You’ll first go through a review process, similar to all of our other marketplaces. It’s possible that your item will be rejected, in which case, it won’t be considered.

How Will you Judge?

We’ll consider many factors when determining the winners: overall sales, innovation, how much it appeals to a wide variety of buyers, etc.

Who Will be Judging?

The CodeCanyon review staff will collaborate to determine the winners.

Terms and Conditions

• Envato staff and reviewers are not eligible to compete
• Only items uploaded between 12:01 AM 02/01/2010 and 11:59PM 2/28/2010 CST and subsequently approved for sale on CodeCanyon are eligible to count.
• The same author cannot win more than once. In other words there will be three winners, no less.
• Our decision is final.
• Files that are taken down for any reason are not eligible to be counted.
• Files must stay up on CodeCanyon for at least 6 months.
• Items may not be substituted for their cash equivalent.
• Prizes will be awarded during the first week of March, to give time to ensure no copyright infringement has occurred.

So get coding! There are five-thousand reasons to do so! We can’t wait to see what you come up with.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Server Issues

Over the weekend and into Monday we unfortunately experienced some pretty severe downtime on all Envato WordPress blogs. The downtime was due to problems in the data centre of our current hosting company which was out of our control.

It seems to all be resolved now, but I just wanted to make a quick apology for the inconvenience and interruptions. We’re going to be re-examining our hosting setup to make sure we avoid this situation in the future and to generally try to pull up the quality of service across the board.

In the meantime there may be some further minor interruptions as we shore up the setup. Thank you for your patience!

CSS Fundamentals: CSS 3 Transitions

As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.

Tutorial Details

• Program: A web browser that can utilise CSS3 transistions (Chrome or Safari)
• Language: CSS
• Difficulty: Easy
• Estimated Completion Time: 30 min

Step 1 – Link Transitions

To begin, we’ll work with some basic techniques – firstly a simple change of text color when a user hovers over a specified element.

a { color:#000; }
a:hover { color:#f00; }

Here, we change the text color to red on hover. Now, with a little CSS3, we can create a much smoother look by gradually fading the color.

a{
   color:#000;
   -webkit-transition:color 1s ease-in;
}
a:hover{color:#f00;}

We’ve added the css property, -webkit-transition. Note that the -webkit prefix specifies that this will only work in Webkit engines, or Safari and Chrome. Luckily, other modern browsers have their own implementations as well. A full statement covering all browsers might look similar to the following:

a {
   color:#000;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;
}

Please note that, for this tutorial, we’ll be focusing exclusively on the webkit implementation. After the declaration of the property, we have the values “color 1s ease-in.” This is the shorthand declaration; the three values represent:

1. the property to be transitioned
2. the duration of the transition
3. the type of transition

In this case, we transition using ease-in, which will begin the transition slowly, and speed up into the transition.

Step 2. Background Transitions

Another basic use of changing states is to change the background of an input box on focus.

input.ourInputBox:focus{
 -webkit-transition:background-color 0.5s linear;
 background:#CCC;
}

This time, we put the transition declaration into the hover state, so that we aren’t adding additional unnecessary classes to the CSS. We apply the transition once the input box acquires focus.

Step 3 – Transitioning Multiple Properties

CSS transitions are actually relatively straight forward to add to existing hover functionality, and give your
site that extra polish for browsers that support CSS3.

To take things a step further, we can also transition multiple CSS properties using the longhand versions of the CSS3 transition.

a.thebg {
 color:#000;
 background:#f00;
 padding:5px;
 -webkit-border-radius: 5px; 

 -webkit-transition-property:color, background;
 -webkit-transition-duration: 1s, 1s;
 -webkit-transition-timing-function: linear, ease-in;
} 

a.thebg:hover {
 color:#f00;
 background:#000;
}

This time, the background and text color changes on hover, so we can target both of these properties with our transition.
We simply split the transition: first we have -webkit-transition-property and separate the different values with a comma. So we target the color and background properties, respectively.

-webkit-transition-property:color, background;

Then we set the duration of the transition using:

-webkit-transition-duration:1s, 1s;

These are referenced in the same order as the first statement; this time, however, both values are set to 1s.

Lastly, we set the timing function, and set two different values: the first, linear, relates to our first declared variable – color; and the second relates to the variable background.

So, we’ve set the color to a linear change over one second, and the background to ease-in over that same time period.

Step 4 – Putting the Pieces Together

CSS3 transitions start to come into their own when they’re combined with other new CSS properties.

You can review examples of using overlapping elements and transitions on Andy Clarke’s For a Beautiful Web.

Let’s create a simple example of animating a pop out sign.

We first create the bounding box for the signpost, and give it a relative positioning context to ensure that we can
position items absolutely within it.

#signpost{
 width:60px;
 height:196px;
 position:relative;
}

Now we place the box on the page and put the pieces of our sign within it.

<div id="signpost">
	<img id="post" src="post.png">
	<img id="sign" src="sign.png">
</div>

Next, the post is positioned with a z-index of two, to place it on top of the sign.

#post{
 width:79px;
 height:196px;
 z-index:2;
 position:relative;
}

Now, we add in the sign, positioned underneath the post, and rotate it with the CSS3 transform property.

#sign{
 height:46px;
 width:80px;
 position:absolute;
 top:10;
 left:60;
 -webkit-transform-origin:0 0;
 -webkit-transform: rotate(86deg);
 z-index:1;
 -webkit-transition:-webkit-transform 0.5s ease-in-out;
}

The sign is rotated using -webkit-transform: rotate(86deg), and is positioned under the post. To ensure that the sign rotates around the proper point, we must change the transform origin to the top left corner: 0, 0.

We set the transition to change the -webkit-transform property over 0.5s with an ease-in-out profile, and on hover, we rotate the sign back to its original orientation.

#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
}

We do this on the containing #signpost:hover rather than on the hover of the #sign itself.

Step 5 – Introducing Animations

We can now tie all of this together, using webkit animations, which give us the power to carry out things such as continuous rotation.

We begin by creating two circle images, and positioning them inside a containing div – as we did with the signpost above.

<div id="circles">
	<img src="outer.png" width="180" height="180" class="outercircle"/>
	<img src="middle.png" width="90" height="90" class="middlecircle"/>
</div>

#circles{
	width:180px;
	height:180px;
	position:relative;
}
.outercircle{
	width:180px;
	height:180px;
	position:absolute;
	z-index:1;
	top:0:
	left:0;
}
.middlecircle{
	width:90px;
	height:90px;
	position:absolute;
	z-index:3;
	top:45px;
	left:45px;
}

Now we need to define the animations; we’ll spin the circles in opposite directions, so we need to set up two animations.

@-webkit-keyframes spin {
from {
	-webkit-transform: rotate(0deg);
}
to {
	-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes spinrev {
from {
	-webkit-transform: rotate(0deg);
	}
to {
	-webkit-transform: rotate(-360deg);
	}
}

The animation is given a name for reference, in this case “spin” and “spinrev.” Then, we assign them a to and from value; so we rotate the image from
0 deg to 360 deg using webkit transform, and to -360 for the reverse.

Now we assign this animation to the hover states. Note that, if we assigned it to the normal state, the animation would run immediately when the page is loaded.

#circles:hover .outercircle {
	-webkit-animation-name: spin;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 10s;
}	

#circles:hover .middlecircle{
	-webkit-animation-name: spinrev;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 5s;
}

We reference the animation name we created earlier (-webkit-animation-name: spin;). Then, we declare the number of times we want the animation to run (-webkit-animation-iteration-count: infinite;).
In this case, infinite will keep it going round and round whilst the #circles div is hovered upon.

We next set the timing function (-webkit-animation-timing-function: linear;), and, finally, we set a duration for each iteration – in this case, it will be ten seconds (-webkit-animation-duration: 10s;), and five for a complete revolution.

Step 6 – Graceful Degredation with Modenizr

Once we have everything working, we should consider our users who are browsing without CSS3 capable web browsers. This is easily accomplished using a JavaScript library such as Modernizr, which adds classes to the HTML element relating to the browser capabilities.

Using the sign post example above, browsers that don’t support CSS transforms will not place the sign under the post correctly; so we can target these browsers and simply hide the sign until it is hovered over.

.no-csstransforms #signpost #sign{
	display:none;
}
.no-csstransforms #signpost:hover #sign{
	display:block;
}

It’s as simple as linking to the Modernizr script, finding the appropriate class name, and then creating a separate CSS statement for that instance.

Conclusion

That’s all for now. I hope you enjoyed it! Let me know if you have any questions/comments below!

You Also Might Like

• CSS Fundamentals: Containing Children

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.