Design Gala

CSS 3 Transitions

manish — Sat, 11 Jun 2011 02:38:19 +0000

Its been sometime since CSS3 has been introduced, bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions to add an extra layer of polish.

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

First Create a Div with images

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

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;
}

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 place sign underneath the Post and rotate it with our CSS3 transform property

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

The sign is rotated using 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 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);
         -moz-transform:rotate(0deg); }

Reference: http://net.tutsplus.com

Web Development Tools Work On Mac

S@R0Z — Fri, 18 Mar 2011 05:47:44 +0000

Mac OS X, well know for their simplicity and performance.

If you’re a web developer using a Mac you may have used many applications. Finding the best Apps for Freelance Web Designers is one challenging task. So in this post I have listed best Mac Apps designed for code editing, file and data transfer, database management, image editing etc. Some of them are free and most of them are relatively inexpensive.

1.VirtualHostX – VirtualHostX is the best way to host multiple websites on your Mac. It lets you easily create Apache virtual hosts on Mac OS X.

2. MAMP – MAMP is a quick and painless way to set up Macintosh, Apache, MySQL and PHP in the same environment. Instantly you’ve got a fully-functional web testing environment for your PHP applications.

3. phpMyAdmin – phpMyAdmin is the kindly old grandfather of database management scripts. Not necessarily hip to an attractive user interface, phpMyAdmin still has the skills to pay the bills.

4. Yummy FTP – Yummy FTP is an FTP and SFTP client application for the Apple Macintosh, built as native Mac OS X software from the ground up, with the goal of providing a reliable, powerful, yet easy to use file transfer utility.

5. Transmit - It offers almost all of the same functionality as Cyberduck, but adds a little more robustness for advanced user. For example, you can edit any remote file (even a picture or graphic) in any software using Transmit.

6. Coda – It is a complete web development solutions that fulfills all your coding needs, you will love to use its code editor that has support for various programming languages like HTML, XHTML, CSS, PHP, ASP, Ruby, Java and XML etc.

7. CSSEdit - cssedit is a CSS editor with a fantastic user interface. It has the look and feel of a Mac application, which makes the experience of editing CSS much more enjoyable.

8. Changes – Changes is a nifty application that lets you visually browse changes to your code base. Instead of having to use a subversion to manage your code base (though Changes works with svn and other repository software), you can use Changes.

9. TextExpander - TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings, code snippets and images.

10. TextMate - A popular text-editing tool for Apple Mac OS. It offers number of useful features, like search and replaces text, clipboard history, file tabs when working with projects.

Let’s help for Japan.

Rabi Shrestha — Thu, 17 Mar 2011 03:41:49 +0000

Let’s put our hand in hand and help to the people of japan who needs our help and support. It’s not that we have to go there and help them. Wherever we are ,in any part of the world , we can help them, what we need is the strong determination . There are various ways to help them who are getting suffered .

Make a Donation
You can donate the amount you want via online services.There are number of organization’s which accept these donations and they deliver these amounts to the people who really needs them. But you have to be sure that you are donating for the right organization. If you want to donate via google’s services, CLICK HERE

Spread the words
There are different campaigning going on the social networking sites and other websites. you can put your comments and messages . You can like the pages in the facebook which are campaigning for japan.
If you run a website or a blog, you can drive awareness for the Japan earthquake and promote donations by adding some information about help needed to victims of earthquake and tsunami of japan in your webpage or blog.

Let’s show the world that we are human and we need to help who needs help .
Let’s help for Japan.

Rotating DIV block using jquery

Design Gala — Sat, 05 Feb 2011 08:02:36 +0000

I have taken this article from csstricks.com and is written by By Chris Coyier . Sometimes we need to give an interactive look to a webpage and this could be one of the good option for that. If you have a simple idea about the html,CSS and jquery ,then you can use this features in your webpage.

To use the rotating div block in your webpage you have to follow three steps

1. HTML Section
2. CSS Section
3. jQuery Section

Click here to download the demo file.

Five Cool jQuery Plugins for Displaying Images

Design Gala — Mon, 24 Jan 2011 08:00:46 +0000

Write less , do more. the slogan of the jquery proves its significance. According to jquery.com .”jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” I am always fascinated by the jquery plugins.In this article , i have compiled some jquery plugins which i have used in my projects and hope it will be useful to other’s too.The jquery plugins, here i am discussing are specially focused for handling the images.

1.Slick Auto-Playing Featured Content Slider