Posts filed under ‘Cool Stuff’

Custom Snippets in Aptana 3

<![CDATA[

Aptana Snippets

There are some very useful snippets in Aptana like auto building Html tags (Type “div” and hit “Tab” then Aptana will generate “<div id=”name”></div>” for you) but most amazing thing is its very easy to create your own snippets.

If you are using “console.log()” function a lot like me then writing a snippet for this function will save a lot of time for you.

To add a “console.log()” shortcut key

  1. Create a new project and go to project folder (where your “.project” is found)
  2. Download bundles.zip
  3. Extract the zip content to the root of your project folder. The folder hierarchy :
  4. And restart Aptana 3.
  5. Now open an Html file, select a text and hit “Shift+Command+.”
require 'ruble'

with_defaults :scope => 'text.html,source.js,source.php source.php.embedded.block.html', :input => :none, :output => :insert_as_snippet do |bundle|
	command 'console.log()' do |cmd|
		cmd.key_binding = 'M1+M2+.'
		cmd.input = :selection
		cmd.invoke do |context|
		  selection = ENV['TM_SELECTED_TEXT'] || ''
		  if selection.length > 0
			"console.log(${1:#{selection}})"
		  else
			"console.log($0)"
		  end
		end
	end
end

Visit https://aptanastudio.tenderapp.com/faqs/your-aptana-studio-installation/adding-a-new-snippet and https://aptanastudio.tenderapp.com/faqs/scripting-aptana-studio/ruble-programming-guide for more

]]>

Reklamlar

01,12,2010 at 8:32 Yorum bırakın

Normal Mapped Photos using HTML5 Canvas

<![CDATA[

Post Source

Endergen.com

A great work using canvas and jquery

Try It

Source files

I included just CanvasApp.js . Go to website for other files.

function CanvasApp(settings){

	if(settings.seed)
		Math.random(settings.seed);


	// get canvas element
	var	canvas = document.getElementById(settings.element),
		ctx = canvas.getContext("2d"),
		thisApp = this,
		interval = null,
		loopCB = null;

	function loop(){
		loopCB(thisApp);
	}

	this.start  = function(newLoopCB){
		if(interval)
			return false;
		loopCB = newLoopCB;
		interval = setInterval(loop, 1);
		return true;
	}

	this.stop = function(){
		if(interval==NULL)
			return false;
		loopCB = NULL;
		clearInterval(interval);
		interval=null;
		return true;
	}

	// Access

	// Get the canvas associated with this app
	this.canvas = function(){
		return canvas;
	}

	// Get the canvas associated with this app
	this.ctx = function(){
		return canvas;
	}

	// Get the width of the canvas
	this.width = function(){
		return canvas.width;
	}

	// Get the height of the canvas
	this.height = function(){
		return canvas.height;
	}

	// Randomness
	this.randomRange = function(min,max){
		var r = min+(max-min)*Math.random();
		r = Math.min(Math.max(r,min),max);
		return r;
	}
	this.randomRangeInt = function(min,max){
		min = Math.floor(min);
		max = Math.floor(max);
		var r = min+(max-min)*Math.random();
		r = Math.min(Math.max(r,min),max);
		r = Math.floor(r);
		return r;
	}
	this.randomColor = function(){
		var c = thisApp.rgba(
			thisApp.randomRangeInt(0,255),
			thisApp.randomRangeInt(0,255),
			thisApp.randomRangeInt(0,255),
			1.0
		);
		return c;
	}

	// Drawing functions

	// Draw Line
	this.line = function(x0,y0,x1,y1,c){
		ctx.lineWidth = "2";
		ctx.strokeStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";

		ctx.beginPath();
		ctx.moveTo(x0, y0);
		ctx.lineTo(x1, y1);
		ctx.stroke();
		ctx.closePath();
	}
	// Draw Circle
	this.circle = function (x,y,r,c){
		this.ellipse(x,y,r,r,c);

	}
	// Draw Rect
	this.rect = function(l,t,w,h,c){
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		ctx.fillRect(Math.floor(l), Math.floor(t), Math.floor(w),Math.floor(h));
	}

	// Clear Canvas
	this.clear = function(c){
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
	}
	// Utility
	this.rgba = function(r,g,b,a){
		return {r:r,g:g,b:b,a:a};
	}

	this.poly = function(p,c){
		if(p.length==0)
			return;
		ctx.beginPath();
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		for(var i = 0; i<p.length; i++){
			if(i==0)
				ctx.moveTo(p[i][0],p[i][1]);
			ctx.lineTo(p[i][0],p[i][1]);
		}
		ctx.fill();
	}

	this.ellipse = function(x,y,width,height,c){

		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		x = x || 0;
		y = y || 0;

		if (width <= 0 && height <= 0) {
			return;
		}

		ctx.beginPath();

		width *= 2;
		height *= 2;

	      var offsetStart = 0;

	      // Shortcut for drawing a circle
	   //   if (width === height) {
	  //      ctx.arc(x - offsetStart, y - offsetStart, width / 2, 0, Math.PI*2, false);
	    //  } else {
	        var w = width / 2,
	          h = height / 2,
	          C = 0.5522847498307933;
	        var c_x = C * w,
	          c_y = C * h;

	        // TODO: Audit
	        ctx.moveTo(x + w, y);
	        ctx.bezierCurveTo(x + w, y - c_y, x + c_x, y - h, x, y - h);
	        ctx.bezierCurveTo(x - c_x, y - h, x - w, y - c_y, x - w, y);
	        ctx.bezierCurveTo(x - w, y + c_y, x - c_x, y + h, x, y + h);
	        ctx.bezierCurveTo(x + c_x, y + h, x + w, y + c_y, x + w, y);
	    //  }

		var doFill = true;

	      if (doFill) {
	        ctx.fill();
	      }
	    //  if (doStroke) {
	     //   ctx.stroke();
	      //}

	      ctx.closePath();
	}

}

]]>

24,11,2010 at 13:32 Yorum bırakın

Understanding CSS3 Transitions

<![CDATA[

Post Source

What are CSS transitions?

I like to think of CSS transitions like butter, smoothing out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing. Unlike real butter, transitions aren’t fattening—they’re just a few simple rules in your stylesheet to enrich certain events in your designs.

The W3C explains CSS transitions
quite simply:

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

A simple example

Here’s a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change—an effect previously only possible using Flash or JavaScript, but now possible with a few simple lines of CSS.

The markup is a simple hyperlink, like so:


<a href="#" class="foo">Transition me!</a>

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover:

a.foo {
  padding: 5px 10px;
  background: #9c3;
  }
a.foo:hover {
  background: #690;
  }

Fig. 1: The normal and :hover state of the link.

Now let’s add a transition to that background color change. This will smooth out and animate the difference over a specified period of time.

http://www.youtube.com/v/8v7ltfDGKTc?fs=1&hl=en_US

Fig. 2: Here we can see the smooth transition of light green to darker green background.

For the time being, we’ll use only the vendor-prefixed properties which currently work in WebKit-based browsers (Safari and Chrome) to keep things simple. Later, we’ll add vendor prefixes for Mozilla and Opera.

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  }
a.foo:hover {
  background: #690;
  }

You’ll notice the three parts of a transition in the declaration:

  • transition-property: The property to be transitioned (in this case, the background property)
  • transition-duration: How long the transition should last (0.3 seconds)
  • transition-timing-function: How fast the transition happens over time (ease)

Timing functions (or, I really wish I’d paid attention in math class)

The timing function value allows the speed of the transition to change over time by defining one of six possibilities: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier (which allows you to define your own timing curve).

If you slept through geometry in high school like I did, don’t worry. I recommend simply plugging in each of these timing function values to see how they differ.

For our simple example, the duration of the transition is so quick (just a mere 0.3 seconds) that it’d be difficult to tell the difference between the six options. For longer animations, the timing function you choose becomes more of an important piece of the puzzle, as there’s time to notice the speed changes over the length of the animation.

When in doubt, ease (which is also the default value) or linear should work just fine for short transitions.

We could simplify the declaration significantly by using the transition shorthand property:

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }

Now we have a much more compact rule that accomplishes the same result.

All of this wonderful transitioning works just fine in WebKit browsers, but what about the others?

Browser support

As I mentioned earlier, transitions were initially developed by WebKit, and have been in Safari and Chrome since version 3.2, but Opera supports them as well in version 10.5
and support has been promised in Firefox 4.0. Because of that present and near-future support, it’s important to add the appropriate vendor prefixes so that our transitions will work in more browsers as support is rolled out.

Building the full transition stack

Here’s a revised declaration, adding the –moz- and –o- prefixes as well as the actual CSS3 transition property. We’re putting the non-prefixed property last in the stack to ensure that the final implementation will trump the others as the property moves from draft to finished status.

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }

With that stack, we’ll be smoothing out that background color change in current versions of Safari, Chrome, and Opera, as well as future versions of any browser that chooses to support it.

Transitioning states

I remember being slightly confused when I first started playing around with CSS Transitions. Wouldn’t it make more sense if the transition properties were placed in the :hover declaration, since that’s the trigger for the transition? The answer is that there are other possible states of an element besides :hover, and you’ll likely want that transition to happen on each of those without duplication.

For instance, you may want the transition to also happen on the :focus or :active pseudo-classes of the link as well. Instead of having to add the transition property stack to each of those declarations, the transition instructions are attached to the normal state and therefore declared only once.

The following example adds the same background switch to the :focus state. This enables triggering the transition from either hovering over or focusing the link (via the keyboard, for example).

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
a.foo:hover,
a.foo:focus {
  background: #690;
  }

Transitioning multiple properties

Let’s say that along with the background color, we also want to change the link’s text color and transition that as well. We can do that by stringing multiple transitions together, separated by a comma. Each can have their varying duration and timing functions (fig. 3).

http://www.youtube.com/v/YhFJH7ryUzQ?fs=1&hl=en_US

Fig. 3: The normal and :hover states of the link.

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background .3s ease,
    color 0.2s linear;
  -moz-transition: background .3s ease,
    color 0.2s linear;
  -o-transition: background .3s ease, color 0.2s linear;
  transition: background .3s ease, color 0.2s linear;
  }
a.foo:hover,
a.foo:focus {
  color: #030;
  background: #690;
  }

Transitioning all possible properties

An alternative to listing multiple properties is using the all value. This will transition all available properties.

Let’s drop all into our simple example instead of listing background and color separately. They’ll now share the same duration and timing function.

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  }
a.foo:hover,
a.foo:focus {
  color: #030;
  background: #690;
  }

This is a convenient way of catching all the changes that happen on :hover, :focus, or :active events without having to list each property you’d like to transition.

Which CSS properties can be transitioned?

Now that we’ve successfully transitioned the background and color of a hyperlink, there are many other CSS properties that can be transitioned, including width, opacity, position, and font-size. A chart of all the possible properties
(and their types) that can be transitioned is available from the W3C.

Why not use JavaScript instead?

You might be wondering, with not all browsers supporting (or at least promising support for) CSS Transitions, why not use a JavaScript solution to handle the animation? Popular frameworks such as jQuery, Prototype, and script.aculo.us
have enabled animations via JavaScript that work cross-browser for some time now.

It all depends on how crucial the transitions are to the experience. I’m stressing here in this little book that you can embrace the simplicity and flexibility of CSS3 if you choose the appropriate parts of the user experience to apply it: enriching the interactions that happen on the page. Quite often, the animation of these interactions when handled by CSS Transitions aren’t integral to the brand, readability, or layout of the website. Therefore, a few simple lines of CSS to trigger a simple animation that’s native to the browsers that support it (rather than tapping into a JavaScript framework) seems like a smart choice. And one I’m glad we have at our disposal.

]]>

23,11,2010 at 23:56 Yorum bırakın

Upcoming Firefox 4 CSS Transitions

<![CDATA[

Post Source

Introduced in Gecko 2 (Firefox 4)

CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.

Certain SVG properties can also be animated.

Note:
Because the CSS transitions specification is still in draft form, all properties associated with them are prefixed with “-moz-” for use in Gecko. For compatibility with WebKit, you should also use the “-webkit-” prefix, and for Opera compatibility, use the “-o-” prefix. So, for example, you would specify the transition property as -moz-transition, -webkit-transition, and -o-transition.

Example Video

If you’re running a recent Gecko or WebKit nightly build, you can try this live example by clicking here.

CSS transition properties

CSS transitions are controlled using the -moz-transition
shorthand property. This is the preferred way to set up your transitions, because it makes it easier to avoid getting your parameter list lengths out of sync, which can result in a frustratingly large amount of time spent debugging of your CSS.

If you wish, you can control the individual components of the transition using the following sub-properties:

-moz-transition-property
Specifies the name or names of the CSSproperties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.
-moz-transition-duration
Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.
-moz-transition-timing-function
Specifies a cubic bezier curve used to define how intermediate values for properties are computed.
-moz-transition-delay
Defines how long to wait between the time a property is changed and the transition actually begins.

Detecting the completion of a transition

There is a single event that is fired when transitions complete. The “transitionend” event offers two properties:

propertyName
A string indicating the name of the CSS property whose transition completed.
elapsedTime
A float indicating the number of seconds the transition had been running at the time the event fired. This value isn’t affected by the value of -moz-transition-delay.

As usual, you can use the element.addEventListener()
method to monitor for this event:

el.addEventListener("transitionend", updateTransition, true);
Note:
The “transitionend” event doesn’t fire if the transition is aborted because the animating property’s value is changed before the transition is completed.

Properties that can be animated

CSStransitions can be used to animate the following properties.

Note:
The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don’t currently animate, because someday they might, causing unexpected results.
Property Value type

background-color

<color>

background-image

gradients only (not implemented as of 2010/04/11. see here)

background-position

<percentage>

<length>

background-size

<percentage>

<length>

border-color (including sub-properties)

<color>

border-radius,(including sub-properties)

<percentage>

<length>

border-width (including sub-properties)

<length>

border-spacing

<length>

bottom

<percentage>

<length>

-moz-box-flex

number

box-shadow

shadow

color

<color>

-moz-column-count

number

-moz-column-gap

<length>, keywords

-moz-column-rule-color

<color>

-moz-column-rule-width

<length>, keywords

-moz-column-width

<length>

clip

rectangle
fill paint
fill-opacity opacity-value
flood-color

<color> | keywords

font-size

<percentage>

<length>

font-size-adjust

number, keywords

font-stretch

keywords

font-weight

number | keywords (excluding bolder, lighter)

height

<percentage>

<length>

-moz-image-region

rect()

left

<percentage>

<length>

letter-spacing

<length>

lighting-color

<color> | keywords

line-height

number | 

<percentage>

<length>

margin (including sub-properties)

<length>

marker-offset

<length>

max-height

<percentage>

<length>

max-width

<percentage>

<length>

min-height

<percentage>

<length>

min-width

<percentage>

<length>

opacity

number

outline-color

<color>

outline-offset

integer

-moz-outline-radius (including sub-properties)

<percentage>

<length>

outline-width

<length>

padding (including sub-properties)

<length>

right

<percentage>

<length>

stop-color

<color> | keywords

stop-opacity opacity-value
stroke paint
stroke-dasharray dasharray
stroke-dashoffset

<percentage>

<length>

stroke-miterlimit miterlimit
stroke-opacity opacity-value
stroke-width

<percentage>

<length>

text-indent

<percentage>

<length>

text-shadow

shadow

top

<percentage>

<length>

-moz-transform-origin

<percentage>

<length>, keywords

-moz-transform

transform-function

vertical-align

<percentage>

<length>, keywords

visibility

visibility

width

<percentage>

<length>

word-spacing

<percentage>

<length>

z-index

integer

When property value lists are of different lengths

If any property’s list of values is shorter than the others, its values are repeated to make them match. For example:

div {
	 -moz-transition-property:opacity, left, top, height;
	 -moz-transition-duration: 3s, 5s;
	}

This is treated as if it were:

div {
	 -moz-transition-property:opacity, left, top, height;
	 -moz-transition-duration: 3s, 5s, 3s, 5s;
	}

Similarly, if any property’s value list is longer than that for -moz-transition-property, it’s truncated, so if you have the following CSS:

div {
	-moz-transition-property: opacity, left;
	-moz-transition-duration: 3s, 5s, 2s, 1s;
	}

This gets interpreted as:

div {
	-moz-transition-property: opacity, left;
	-moz-transition-duration: 3s, 5s;
	}

Read More
]]>

21,11,2010 at 21:56 Yorum bırakın

Build a Practical Pure CSS3 Button

<![CDATA[

Post Source

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in May, 2010.

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

Video Tutorial

http://blip.tv/play/gcMVgd3hegI%2Em4v

Final Code

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3 Buttons</title>
	<style>

	/* CUSTOM FONT */
	@font-face {
		font-family: 'EfonRegular';
		src: url('font/EFON-webfont.eot');
		src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	body {
	 width: 400px;
	 margin: 200px auto;
	 background: #666;
	}

	.button {
	 width: 400px;
	 height: 100px;
	 line-height: 100px;
	 color: white;
	 text-decoration: none;
	 font-size: 50px;
	 font-family: helvetica, arial;
	 font-weight: bold;
	 display: block;
	 text-align: center;
	 position: relative;

	 /* BACKGROUND GRADIENTS */
	 background: #014464;
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));

	 /* BORDER RADIUS */
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 border-radius: 10px;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;

	 /* TEXT SHADOW */

	 text-shadow: 1px 1px 1px black;

	 /* BOX SHADOW */
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	}

	/* WHILE HOVERED */
	.button:hover {
		background: #014464;
	 	background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
	}

	/* WHILE BEING CLICKED */
	.button:active {
		-moz-box-shadow: 0 2px 6px black;
		-webkit-box-shadow: 0 2px 6px black;
	}
	/* FONT GLYPH (MOSTLY FOR FUN) */
	.button:before {
		font-family: EfonRegular;
		content: 'v';
		color: #09232F;
		font-size: 90px;
		float: left;
		margin-left: 35px;
		margin-right: -10px;
		text-shadow: 0 1px 0 #4190AF;
	}

	</style>
</head>
<body>
     <a href="#" class="button"> Follow Me </a>
</body>
</html>

Result

]]>

19,11,2010 at 16:25 Yorum bırakın

A very simple Canvas and JQuery application

<![CDATA[My first canvas-jquery sample. Hope to create a simple html5 game and publish soon.

/lib/canvas_gallery/

<html>
	<head>
		<link rel="stylesheet" href="draw.css" />
	</head>
	<body onload="draw()">
		<img id="frame" src="images/picture_frame.png" />
		<ul>
			<li>
				<img src="images/gallery_1.jpg" />
			</li>
			<li>
				<img src="images/gallery_2.jpg" />
			</li>
			<li>
				<img src="images/gallery_3.jpg" />
			</li>
			<li>
				<img src="images/gallery_4.jpg" />
			</li>
			<li>
				<img src="images/gallery_5.jpg" />
			</li>
		</ul>
                <script src="jquery-1.4.4.min.js"></script>
                <script src="draw.js"></script>
	</body>
</html>
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

li {
	float: left;
	margin: 0 10px 10px 0;
}

img {
	display: none;
}
function draw(){
	$("li").each(function(){
		$(this).append("<canvas width='100' height='115' />");
		var ctx = $("canvas", this)[0].getContext('2d');
		ctx.drawImage($("img", this)[0], 0, 0);
		ctx.drawImage($("#frame")[0], -3, -3, 108, 124);
	})
}

]]>

13,11,2010 at 20:42 Yorum bırakın

HTML/CSS/JS – Best Practices and Optimization Techniques

<![CDATA[

]]>

31,10,2010 at 12:07 Yorum bırakın

Eski Yazılar


Takvim

Aralık 2017
P S Ç P C C P
« Ara    
 123
45678910
11121314151617
18192021222324
25262728293031

Posts by Month

Posts by Category