HANEKWAN

100 Pictograms in OpenType Font, EPS and Web Font

2012-03-10T12:33:00.000+01:00

Entypo is a set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font. They work equally well in size 15, 20 or larger. It’s perfect for websites, apps and digital services.

Entypo Pictogram Suite is absolutely free. Even for commercial use. All released for free under the Creative Commons license CC BY-SA.

Requirements: -
Demo: http://www.entypo.com/
License: Creative Commons License

How to install WordPress locally on a Mac

2012-03-07T15:16:00.008+01:00

Developing in a local environment can be a real asset when you’re developing for the web. Not only will developing locally be faster than waiting for file uploads via FTP, testing new features on your local machine will always be safer than testing them live.

Setting up a local WordPress installation isn’t difficult, but it can be a bit tricky if you haven’t done it before. This tutorial is designed to walk you through the process from start to finish. I’ve also included an optional step for those interested in running WordPress Multisite locally, though those interested in a standard WordPress installation can easily skip over them.

So you know, these are the steps we’re going to be taking to install WordPress locally on a Mac:

Download and install MAMP
Edit your hosts file (optional)
Load WordPress files into your new /htdocs folder
Edit your wp-config.php file
Load up your editor of choice and enjoy local development!

Enough prep, let’s get started!

Step 1: Download and install MAMP

In order to run WordPress, we need to have MySQL and PHP running on our Mac. A simple way to do this is an app called MAMP, which stands for “Mac, Apache, MySQL, PHP” and sets up a local environment on your Mac.

MAMP can be download here, and installing it is just as straightforward as installing any other application.

Once it’s running it will open up the MAMP start page, which will double as confirmation that it was installed correctly as well as quick links to phpMyAdmin and other database information. Here you will see that the database username and password is, by default root and root. You can change this if you want, but as far as I know there is no point to doing so.

One suggestion I do have is to go into the MAMP Preferences panel (seen to the right) and select “Set to default Apache and MySQL ports” to set the Apache port to 80 and the MySQL port to 3306. It should match the settings of the screenshot on the right.

With MAMP fully configured, visit phpMyAdmin from your MAMP start page and create a new database for your WordPress installation. Keep the database name in mind.

Step 1.5: Edit your hosts file (optional)

This is an optional step, though it is necessary for running WordPress Multisite.

If you don’t understand what is is, see our introduction to Multisite.

WordPress Multisite cannot operate with a port number in the URL (http://localhost:80/for instance) so we want to map a new URL to our localhost address. To do this, first open up Terminal (don’t worry, it’s not too scary!).

In order to map a new URL to localhost, first enter:

sudo nano /private/etc/hosts

This will bring you to your hosts file within Terminal. You may need to enter your admin password to access it.

Once you have access to the hosts file, navigate down to the bottom of the list and add the following line, with a tab separating them:

127.0.0.1     wp.dev

Note that the URL you enter (in my case, wp.dev) can be anything you want. I would recommend choosing something short and memorable.

To save the hosts file, press Control + O and hit enter. This will save your hosts file, and you can close Terminal. You will know if it works if you visit the URL you chose and it brings you to your MAMP files.

Step 2: Load WordPress files into your new `/htdocs` folder

We’re now ready to install WordPress, which I’m sure you are familiar with. Download WordPress and move the files into your /htdocs file, which will be located within the MAMP directory in your Applications folder.

At this point you have the option to either create a subfolder for your WordPress installation or to add it directly into the root. In this case we’re doing it at the root, though you are free to do what you want.

At this point it wouldn’t be a bad idea to also rename your wp-config-sample.php file to wp-config.php. We’re going to be editing that in the next step.

Step 3: Edit your `wp-config.php` file

Now we will add the Assuming you didn’t change the root username and password, use rootfor each along with the name of the database you created back in Step 1. I called my database wpdev, so my file looks like this:

Save this file and visit the home directory to complete the installation process.

Step 4: Load up your editor of choice and enjoy local development!

If everything above went smoothly, you should now be looking at a solid local copy of WordPress, primed and ready for testing and development. Crack open Textmate, or Coda, or your application of choice, and have some fun.

How To Install Wordpress on Mac OS X

How To Install theme on Wordpress

How to Install Joomla Locally on a Mac

2012-03-07T14:57:00.004+01:00

Following on the newsletter from last week where we talked about developing locally and moving your site to a live server, this week we're going to walk you through installing Joomla locally, on a Mac.

We're going to use MAMP for this tutorial.

Here's how you do it:

Download and install MAMP to your Applications directory.
Download the latest Joomla.
Start MAMP by double clicking on the MAMP icon in your Applications/MAMP directory.
Once the servers have started, a browser window should open to the MAMP start page. If not, click on the 'Open start page' in the MAMP window.
Set up your database for Joomla by clicking on the phpMyAdmin link in the start page and inserting the name you wish to use for your database in the 'Create new database' field. **For all databases created in MAMP the default username / password is: root / root, and the Host Name that you will use when installing Joomla is: localhost.
Copy/move the downloaded version of Joomla 1.5 to your Applications/MAMP/htdocs directory and unzip the file. Leave a copy of this zip file in the htdocs directory for easy creation of multiple Joomla sites ... just unzip the file each time you wish to have a new Joomla installation!
Rename the unzipped folder to mysite (or whatever you wish).
In your broswer navigate to http://localhost:8888/mysite (or whatever name you gave your directory).
Run through the Joomla installation process and voila! (need help installing Joomla? See:http://help.joomla.org/content/category/48/268/302/)

You should now have a shiny new installation of Joomla on your Mac where you can develop your website securely in your local environment.

How to Install Joomla Locally on a Mac

How to install Joomla 2.5.1 for Mac

How to Install Joomla Templates

A Separation’ wins Oscar

2012-03-03T18:34:00.000+01:00

Film Synopsis

When an Iranian couple separate prior to their divorce, a chain of events is set in motion that will affect the future of two families. After his wife’s departure, Nadar hires a woman named Razieh to care for his elderly father, but complications in Razieh’s own life give rise to an escalating series of problems.
http://oscar.go.com/nominees/foreign-language-film/iran-a-separation

HTML email signatures in Outlook 2011 for Mac

2012-03-02T22:16:00.004+01:00

Microsoft released it's latest office suite in September of 2010, which in my opinion is a huge leap forward in terms of usability and responsiveness from earlier versions available for the Mac. Included in the office suite is Outlook 2011, a step up from the monstrosity known as Entourage, which was a watered down attempt at bringing Outlook to the Mac since OS9.

With so many features and knickknacks under the hood, there has to be an easy way to make a HTML email signature with an image right? WRONG! Once again, Microsoft has made it extremely difficult to include complex email signatures, especially those that include remote images.

But fear not! Today, we're going to walk you through how to create these complex HTML signatures, and also include a remote image. This isn't the first "how-to" that explains how to achieve this, but not many go over including a remote image that doesn't come in the inbox looking like there's an attachment associated with it.

First, here's what you'll need:

A Mac running OSX
Microsoft Office 2011 with Outlook
A web hosting provider to house your image (If you don't have one, I would advise using Dropbox to host your image for the time being. Instructions on how to do that here.)
A HTML editor (Coda, TextMate, Dreamweaver, or whatever you're comfortable with just as long as it's not MS Word.)

We'll also assume that:

You have basic HTML know how
Capable of uploading an image file to a web server, or a Dropbox account as stated above

Step 1
Decide what sort of information you want to display on your signature. For this demonstration, we'll use first/last name, email, telephone, company name and logo.

Step 2
Create your signature in your HTML editor of choice (or download the one that's available in the download link below and edit it with your plain text HTML editor). If applicable, upload your image to the web server taking note of the public path (http://www.yourdomain.com/images/logo.gif) and inserting it into your HTML signature. Instructions on how to do that here with Dropbox. For the more advanced users, Basic inline CSS is alright to use, as long as it's not used to position items...tables only!

Step 3
Once you have your email signature designed and laid out just as you like, save the file to your Desktop and call it "signature.html"

Step 4
Open the "signature.html" file that you've just created in Chrome or Firefox (not tested with other browsers)

Step 5
With the browser open and on the foreground and your signature file displayed, press Command + A on your keyboard to "Select All"

Step 6
Open Outlook > Select "Preferences" > and "Signatures"

Step 7
Click the plus button on the lower left to create a new signature. If there’s content in the big right signature window after you've clicked the plus icon, delete it. In my case, it was displaying my first and last name.

Step 8
Press Command + v on your keyboard to paste in your signature that you copied from your browser

Step 9
Set your "Default Signatures" and rejoice!

Download the HTML email signature template here.

<table style="margin-top:40px;margin-left:20px;margin-bottom:30px;width:95%" border="0">
 <tr height="45">
  <td width="40">
   <img src="http://www.bluecoastweb.com/images/gra-sig_bcwlogo.gif" alt="Blue Coast Web" width="30" height="43" />
  </td>
  <td>
   <span style="font-family:'Trebuchet MS',helvetica,San-Serif;font-size:11px;color:#888888;line-height:22px"><b style="color:#11aeab;text-transform:uppercase;letter-spacing:2px">Brian Yuen</b>&nbsp;/&nbsp;<a href="http://www.bluecoastweb.com" title="visit Blue Coast Web" style="text-decoration:none; border-bottom:1px dotted #888888;color:#888888">Blue Coast Web</a></span><br />
   <span style="font-family:'Trebuchet MS',helvetica,San-Serif;font-size:11px;color:#b2b2b2;"><b style="color:#888888">e:</b>&nbsp;&nbsp;<a href="mailto:byuen@bluecoastweb.com" title="email Brian" style="text-decoration:none; border-bottom:1px dotted #b2b2b2;color:#b2b2b2">byuen@bluecoastweb.com</a>&nbsp;&nbsp;<b style="color:#888888">t:</b>&nbsp;&nbsp;415.462.8080&nbsp;ex:102&nbsp;&nbsp;<b style="color:#888888">f:</b>&nbsp;&nbsp;415.462.6403</span>
  </td>
 </tr>
</table>

Apple Style Slider Plugin with jQuery

2012-02-22T22:08:00.001+01:00

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 -- no jQuery knowledge required!

Features

Unique transition styles created using CSS3
Supports all modern browsers
Gracefully degrades in older browsers*
Supports responsive layouts
Supports touch devices and swiping
Many developer features with even more to come
Semantic and easy to use markup
Open source

The article source: http://www.sequencejs.com/

دیارم ده‌یری عیشقه‌

2012-02-19T19:49:00.002+01:00

دیارم ده‌یری عیشقه‌، جێ به‌سوتن بێ له‌وێ ده‌گرم

كه‌ من مشتێ چڵ و چێوم، به‌چی بم، كه‌ڵكی كێ ده‌گرم

نه‌گه‌ییه‌ دامه‌نی ده‌ستی دوعا، جا ده‌بمه‌ خاكی رێی

ته‌ریقه‌ی گۆشه‌گیری به‌رده‌ده‌م، ئه‌مجاره‌ رێ ده‌گرم

كه‌ دادی یه‌ئسی خۆمم برده‌لا، ئه‌م عارفه‌ توند بو

وتی: ئاخر سبه‌ینێ جه‌ژنه‌، خوێنی تۆ له‌پێ ده‌گرم

له‌ روسوری عیباده‌ت لام و روزه‌ردی خه‌جاڵه‌ت مام

به‌ناوی سێوی ناوم باغه‌وان و من به‌هێ ده‌گرم

له‌سه‌رخۆچونه‌، شه‌یدابونه‌، قوڕ پێوانه‌، سوتانه‌

هه‌تا مردن مه‌حه‌به‌ت ئیشی زۆره‌، رێزی لێده‌گرم

چ شۆخه‌ ئاگرم تێبه‌رده‌دات و پێمده‌ڵێ: یا شێخ

به‌ خاشاكی ده‌وت شوعله‌ عه‌سامه‌، ده‌ستی پێده‌گرم

كه‌ سینه‌ی رێشمی به‌و تیغی نازه‌ ئه‌نجن ئه‌نجن كرد

وتی: په‌ژمورده‌یه‌ ئه‌م لاله‌زاره‌، ئاوی تێده‌گرم

له‌ پاداشی قسه‌ی سه‌ردا هه‌مه‌ ئاهـو هه‌ناسه‌ی گه‌رم

كه‌سێ شێتانه‌ به‌ردم تێگرێ، من به‌رقی تێده‌گرم

شوكر هوشیاره‌ مه‌حوی، تێده‌گا دنیا خه‌راباته‌

كه‌ به‌دمه‌ستی بكا ئه‌هلی، خراپه‌ی بۆچی لێده‌گرم

مه حوی

Happy Mother’s Day

2012-02-12T18:48:00.005+01:00

Happy Mother’s Day to All Mothers!

مادرم روزت مبارک

میشــــه اسـم پاکتو
رو دل خـــــدا نوشت
میشه با تو پر کشید
تــــوی راه سرنوشت
میشـــه با عطـر تنت
تا خــــود خـدا رسید
میشــه چشــم نازتو
رو تن گلهــــا کـشید
مادرم جـــــونم فـدات
برم قــــربــون چشات
تو اگــــــــه نگام کنی
جون میدم واس نگات

شایان نجاتی

FlashFXP 4.1.8 Build 1704 Final

2012-01-26T22:36:00.000+01:00

FlashFXP is a powerful and popular FTP & FXP Client loaded with features for the power user! FlashFXP has an intuitive and full featured user interface, allowing you to do all the common tasks with just a few clicks. It also support full drag & drop, so you can transfer files, synchronize folders, find files and schedule tasks with just one click. Using the FTP protocol, you can transfer files from remote servers to your computer, or even to another remote server. It makes it easy to update your Web site, download files from the company server, or even download files from the internet that always seem to fail using your Web browser. It allows you to transfer files between two sites (FXP), resume incomplete downloads, synchronize directories, schedule multiple tasks, and more. Available in over 20 languages. FlashFXP offer security, performance, and reliability that you can always count on to get your job done quickly and efficiently.

Use FlashFXP to publish and maintain your website, Upload and download documents, photos, videos, music and more, Share your files with your friends and co-workers, or even use it to download other shareware!

FlashFXP Features :

Performance
• Fully tested and supports gigabit speeds (including Jumbo Frames)
• MODE Z support for on-the-fly streaming compression.
• Support for FEAT and "stat -l" fast directory listing reduces overhead and improves compatibilty.
• Download and upload speed limiting. Save some of your bandwidth for browsing the web.
• Advanced Skip list.
• Optional caching of remote directory lists.

Security
• Includes OpenSSL Libraries 0.9.8b.
• Automatic support for One Time Password (OTP) S/KEY.
• Strong encryption (Blowfish) can be applied to the site manager to protect your information.
• Connect to sites using SSL/TLS encryption for added security, including the use of client certs.
• SSL Site-to-Site (SSCN) Transfers.
• Clear Command Channel (CCC).

Connectivity
• Site to Site (FXP) Transfers.
• Fully recursive file transferring (uploading, downloading, site to site).
• Caching allows for offline browsing, queueing.
• Firewall support, allowing you to define a set range of local ports, or bind to a specific IP.
• FTP Proxy, HTTP Proxy, Socks 4, 5 support. (WinGate, WinProxy, MS Proxy, etc).
• Internal ident server.
• Per Site Connectivity modes support.
• PRET support for distributed FTP servers.

Interface
• Full Multi-language support.
• Simple (FTP-Only) and Advanced (FXP) views.
• Advanced queue control.
• Transfer Graph (only ftp transfer speeds can be graphed).
• Multi-Proxy Server Manager.
• Synchronized browsing allows webmasters to keep local and remote directly listings in synch while browsing.
• Internal Schedule (Transfer or Stop a queue at a specific time).
• Enhanced drag-and-drop functionality.
• Import site listings from Cute FTP, WS_FTP, FTP Explorer, LeapFTP, and Bullet Proof. Including passwords!.
• Optional displaying of Owner/Groups/Attrib.
• Site Stats, keeps track of your uploads/downloads and overall totals.
• Minimizes to system tray.
• List hidden files.
• Folder Bookmarks to provide one click access to any folder.
• Quick backup/restore of all sites/settings.
• Internal text editor for quick edits.

Advanced Options
• Extensive command line options for scripting/scheduling.
• Remote FTP file search.
• Custom file highlighting; display file masks in user defined colors.
• Calculate the size of all files in a specified path.
• Grouped SITE custom commands.
• Priority transfer list.
• Time Zone setting for Site Manager.
• Selective Transfer feature (transfer only images or just php files).

Homepage - http://www.flashfxp.com

Download: http://www.mediafire.com/?ae57ac1ncq4uw4s

فول آلبوم موسيقي شهرام ناظري

2012-01-24T19:12:00.004+01:00

البوم passion of rumi البوم یادگار دوست

البوم صدای سخن عشق البوم book of austerity

البوم سوته دلان البوم سخن تازه

البوم شور انگیز البوم شعر و عرفان

البوم سازنو اوازنو البوم سفر عشق

البوم سفر به دیگر سو البوم نوروز

البوم نسیم صبحگاهی البوم نجوا

البوم مطرب مهتاب رو البوم موسی و شبان

البوم لولیان البوم لیلی و مجنون

البوم لاله بهار البوم کیش مهر

البوم حیرانی البوم گل صد برگ

البوم غم زیبا البوم گروه دستان

البوم دل شیدا البوم در گلستان

کنسرتی دیگر کنسرت اساتید موسیقی

کنسرت ۷۷ البوم چشم به راه

البوم چاووش(شیدا) البوم بی قرار

البوم بشنو از نی البوم بهاران ابیدار

البوم اواز اساطیر البوم اتش در نیستان

Cool JQuery and CSS3 Animation Menu

2011-11-27T17:28:00.002+01:00

The menu is simple, but unique.

Script structure:

HTML:

<div id="menu">
<ul id="nav">
   <li>
      <a href="#" class="icon1">
         <span>Home Page</span>
      </a>
   </li>
   <li>
      <a href="#" class="icon2">
         <span>Portfolio</span>
      </a>
   </li>
   <li>
      <a href="#" class="icon3">
         <span>Our Blog</span>
      </a>
   </li>
   <li>
      <a href="#" class="icon4">
         <span>Services</span>
      </a>
   </li>
</ul>
</div>

CSS:

#menu {
width: 100%;
background: #a7cfdf; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #a7cfdf 0%,#23538a 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #a7cfdf 0%,#23538a 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover,  #a7cfdf 0%,#23538a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
position: relative;
margin-top: 100px;
border-top: 4px solid #eee;
border-bottom: 4px solid #FFF;
overflow: hidden;
}
 
/*======== Horizontal menu =========*/
#nav {
z-index: 99999;
margin:0;
padding:0;
}
 
#nav li a,#nav li {
float:left;
}
 
#nav li {
list-style:none;
position:relative;
}
 
#nav li a {
padding: 0 10px;
width: 130px;
height: 102px;
text-decoration:none;
margin:0;
font-size:12px;
font-weight:400;
text-transform:uppercase;
text-align: center;
color:#FFF;
}
 
#nav li a.icon1 {
background: url(../images/11.png) no-repeat center 0;
}
#nav li a.icon2 {
background: url(../images/22.png) no-repeat center 0;
}
#nav li a.icon3 {
background: url(../images/33.png) no-repeat center 0;
}
#nav li a.icon4 {
background: url(../images/44.png) no-repeat center 0;
}
 
#nav li a span{
position: absolute;
top: 70px;
left:0;
right: 0;
font-size: 17px;
color:#cfcfcf;
}
 
#nav li a:hover span{
color:#fff;
}

jQuery:

You must include these lines befaore < / body > tag!

<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
   $('#nav li a')
      .css( {backgroundPosition: "52px -240px"} )
      .mouseover(function(){
         $(this).stop().animate({backgroundPosition:"(52px 10px)"}, {duration:1500, easing : 'easeOutElastic'})
      })
      .mouseout(function(){
         $(this).stop().animate({backgroundPosition:"(52px -240px)"}, {duration:500, easing : 'easeOutCubic', complete:function(){
            $(this).css({backgroundPosition: "52px -240px"})
         }})
      })
 
});
</script>

                 Demo             Download

Link

jQuery Vertical Tabs Plugin

2011-11-27T17:21:00.001+01:00

jQuery plugin for Vertical Tabs .

There are 3 steps to (almost) every jQuery plugin: the HTML, the CSS and the JavaScript code.

Step 1. The HTML

<div id="vtab">
    <ul>
        <li class="home"></li>
        <li class="login"></li>
        <li class="support"></li>
    </ul>
    <div>
        <h4>Welcome Home!</h4>
        HOME CONTENT
    </div>
    <div>
        <h4>Secure Login</h4>
        LOGIN CONTENT
    </div>
    <div>
        <h4>Online Support</h4>
        SUPPORT CONTENT
    </div>
</div>

There’s nothing special about this HTML. It just uses a div, that’s being identified by vtab, where it contains two elements: An unordered list that represents the left-side tabs, and a 3 different divs, each of which is associated with a given list item. For example, the first div indicates the content of the first tab, say, that’s being marked with home class. If you need more tabs, you can easily add them to the above HTML structure.
Step 2. The CSS#vtab {
    margin: auto;
    width: 800px;
    height: 100%;
}
#vtab > ul > li {
    width: 110px;
    height: 110px;
    background-color: #fff !important;
    list-style-type: none;
    display: block;
    text-align: center;
    margin: auto;
    padding-bottom: 10px;
    border: 1px solid #fff;
    position: relative;
    border-right: none;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}
#vtab > ul > li.home {
    background: url('home.png') no-repeat center center;
}
#vtab > ul > li.login {
    background: url('login.png') no-repeat center center;
}
#vtab > ul > li.support {
    background: url('support.png') no-repeat center center;
}
#vtab > ul > li.selected {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    border: 1px solid #ddd;
    border-right: none;
    z-index: 10;
    background-color: #fafafa !important;
    position: relative;
}
#vtab > ul {
    float: left;
    width: 110px;
    text-align: left;
    display: block;
    margin: auto 0;
    padding: 0;
    position: relative;
    top: 30px;
}
#vtab > div {
    background-color: #fafafa;
    margin-left: 110px;
    border: 1px solid #ddd;
    min-height: 500px;
    padding: 12px;
    position: relative;
    z-index: 9;
    -moz-border-radius: 20px;
}
#vtab > div > h4 {
    color: #800;
    font-size: 1.2em;
    border-bottom: 1px dotted #800;
    padding-top: 5px;
    margin-top: 0;
}Well, the style sheet is simple. However, it’s somehow tricky since I needed to hide the right border of the selected tab. The trick is that I just move the content’s div to a layer index that’s being positioned below the selected tab. This way, the selected tab will be placed over the content and the right border will be gone. The rest is fairly straight forward.
There’s still one more thing to mention. And that’s the support for IE7. Here’s the CSS that’s being used to address IE7. The important thing here is the z-index of the tabs contents:#vtab > ul > li.selected{
    border-right: 1px solid #fff !important;
}
#vtab > ul > li {
    border-right: 1px solid #ddd !important;
}
#vtab > div {
    z-index: -1 !important;
    left:1px;
}Step 3. The JavaScript
And here comes the fun part:var $items = $('#vtab>ul>li');
$items.mouseover(function() {
    $items.removeClass('selected');
    $(this).addClass('selected');

    var index = $items.index($(this));
    $('#vtab>div').hide().eq(index).show();
}).eq(1).mouseover();
                        Demo                 Download
Link

Animated Buttons with CSS3

2011-11-10T20:26:00.000+01:00

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

The icons used in some of the examples are by webiconset.com and the symbol font is byJust Be Nice

We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are.

Please note that the animations/transitions will only work in browsers that support those CSS3 properties.

In order not to bloat the tutorial, I will not be using any CSS vendor prefixes. The downloadable files contain them, of course.

Demo Download

Useful Peel Back With jQuery

2011-11-10T20:19:00.000+01:00

On several occasions I’d have to set up a “peel back” (or “peel away”) ad, and each time I’ve used this old script that relies on a SWF file for the peel back animation. It’s a popular script and if you’ve ever had to work on one of these things you probably know the one I’m talking about.

It achieves a nice reflection effect, but otherwise it’s not so great. It’s heavy, slow, not that easy to manipulate, and, being Flash, prone to certain conflicts.

Long aside on the general subject of peel back ads

In terms of aesthetics, I’ve never been a big fan of the peel back ad, and in a way I didn’t mind the aforementioned poor performance. It helped form the argument for not using the ad at all.

But I’ve started to come around on the peel back. I still find it a little hokey, with its web-page-as-literal-page abracadabra, but it does have a few things working in its favor.

For one, when the ad creative is done well I’ve seen peel back ads produce strong click-through rates—3,4 times that of average CTRs on standard IAB units. It’s hard to argue against that kind of data. If you use data to support your design and UX instincts, you have to respect data when it quietly informs you that your instincts are wrong.

Something else I realized only recently is that, usability-wise, peel backs are less intrusive than other “high-impact” interactive ad types. While push-downs and expandable ads can trigger unexpected (and unwanted) effects on the page, the behavior of peel backs is standard and predictable. And because of its placement at the very top of the page, the peel back effect is unlikely to interfere with the main content area the way push-downs and expandables often do. (Although it can interfere with navigation, search, and other header elements.)

Back to the code: exit Flash, enter jQuery

So, if you’re on board with all this, the next question is how can we make a better peel back ad? Getting rid of the Flash and handling everything with Javascript is an obvious choice.

I got the idea for how to handle the peel back animation from this blog post by Soh Tanaka. I used his solution as a starting point and built out a jQuery plugin with the following features:

All code is contained in the plugin, which means you can use it without having to add any extra HTML or CSS to your site.
One of the nice things about these ads is that in addition to impressions and clicks you can record (and report on) the “peel backs” triggered by mouseover. An easy way to do this is with Google Analytics Event tracking. This script plugs in to the Google Analytics API, giving you the option to send the mouseover data back to your GA account.
It’s fast and small. The code plus the PNG needed for the peel effect are only 7.3kb.
Tested in all the usual modern browsers, as well as IE6, IE7, and IE8.
In addition to the regular version there’s a version that uses a data URI for the peel image. This eliminates an HTTP request and an external dependency, but it means the ad won’t show in browsers that don’t support data URIs (namely, IE6 and IE7).

How to use

Call the plug-in on the body element and set the required parameters (details on the parameters and options can be found in the readme, which you’ll find on github).

Example:

$(function(){
  $('body').peelback({
    adImage     : 'peel-ad.png',
    peelImage   : '../assets/peel-image.png',
    clickURL    : 'http://www.thebestdinosaur.com/',
    gaTrack     : true,
    gaLabel     : '#1 Stegosaurus',
    autoAnimate : true,
    debug       : false
  });
});

The size I’ve selected for the exposed portion of the ad is somewhat arbitrary; the peel back has not been recognized by either the IAB or OPA as a standard unit, and there are no other standards for its size that I’m aware of. ~~If you need to accomodate a different size, hacking the plugin shouldn’t be hard.~~ Update (04/26/11): Latest version of the plugin now supports setting the image sizes in the settings.

Hyperlinks!

Here are the links you’ve patiently been waiting for. Please let me know if you have any feedback or questions!

Original Hover Effects with CSS3

2011-11-03T18:57:00.000+01:00

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

Demo Download

Link

Beautiful DropDown Menu with jQuery

2011-11-03T18:15:00.001+01:00

This customizable jQuery plugin offers you the possibility of transforming your menus with ul>li at 1 level of interweaving (ul>li>ul>li>ul>li) in an attractive animated menu.
You will just have to target your menu thanks to the function of the plugin to transform it into a fluid and pleasant to use menu.

Usage

This type of tool is very simple to set up because it is a plugin of the jQuery library.

Load the file of the styles of the plugin. This code for calling the CSS file must be placed before the</head> tag:

<link href="css/juizDropDownMenu.css"
rel="stylesheet" type="text/css"
media="screen, projection" />

These styles are customizable, naturally. or make a link from the Google API .
Place this call of the javascript file just before the </body> tag:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>

Load the file of the plugin in the same way by placing it after the line of call of the library. Here we imagine that your scripts are in the root of your site, in a directory named "scripts". To you to modify this road if need:

<script type="text/javascript"
src="/scripts/juizDropDownMenu-1.5.min.js"></script>

Call the function by targeting exactly the element which contains your list of links.
Place this code following the previous two lines:

<script type="text/javascript">
        $(document).ready(function() {
                $("#dropdown").juizDropDownMenu();
        });
</script>

don't support Internet Explorer.

Demo Download

Link

Nice Pure CSS3 Like Apple Navigation

2011-11-03T18:08:00.000+01:00

Apple’s website has long served as inspiration to web designers who recognize the superiority of simplicity in user experience. One of its most iconic features is the tabbed navigation – a long, narrow, slightly-rounded set of immaculately devised and executed buttons that serve as the launchpad for Apple.com.

While the advances in this latest adaptation of the CSS standard are widely applied and encouraged, some browsers offer more support for them than others (Internet Explorer least among them). Despite their discrepencies in adapting to it, however, most have offered custom syntax solutions for some of the more highly favored and regarded properties. Here are a few examples of the newly implemented properties that I utilized for this project…

Border-Radius

To simplify the structure of HTML and eliminate the need for images, CSS3 introduces the border-radius property.

border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px; /* Firefox */
-webkit-border-radius: 5px 5px 5px 5px; /* Chrome & Safari */

SUPPORT NOTE : The latest versions of Firefox, Chrome and Safari support border-radius, while Internet Explorer (8 and older) does not.

Gradients

Before CSS3, creating a gradual blend between colors was only possible through images set to repeat over the background of an element, but a series of solutions for all major browsers enables simple yet clean and clear gradients.

background: -moz-linear-gradient(top,  #b3b3b3,  #6e6e6e); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#6e6e6e)); /* Chrome & Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#6e6e6e'); /* Internet Explorer */

SUPPORT NOTE : The latest versions of Firefox, Chrome, Safari and Internet Explorer support gradients.

Text-Shadow

CSS3 enables drop shadows of variable direction and size on text via the text-shadow property, allowing text to remain dynamic while retaining the drop-shadow style.

text-shadow: #cecece 1px 2px 3px; /* 1px right, 2px below, 3px blur */

SUPPORT NOTE : The latest versions of Firefox, Chrome and Safari support text-shadow, while Internet Explorer (8 and older) does not.

The Code

I elected to keep the HTML structure as simple as possible to accommodate for the extensive CSS. Below you will find the full CSS and HTML for the project.

CSS

body { margin: 0; padding: 0; }

a, a:hover, a:active, a:visited, a:visited:hover { text-decoration: none; border: none; outline: none; }

div.nav {
 margin: 18px auto 0px auto;
 border-width: 1px 1px 1px 1px;
 border-style: solid;
 border-color: #fff #dfdfdf #dfdfdf #dfdfdf;
 border-radius: 5px 5px 5px 5px;
 -moz-border-radius: 5px 5px 5px 5px;
 -webkit-border-radius: 5px 5px 5px 5px;
 display: table;
}

div.nav ul {
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 border-width: 0px 0px 1px 0px;
 border-style: solid;
 border-color: #9f9f9f;
 border-radius: 5px 5px 5px 5px;
 -moz-border-radius: 5px 5px 5px 5px;
 -webkit-border-radius: 5px 5px 5px 5px;
 background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#6e6e6e));
 background: -moz-linear-gradient(top,  #b3b3b3,  #6e6e6e);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#6e6e6e');
 display: inline-block;
 list-style: none;
}

div.nav ul li {
 margin: 0px 1px 0px 0px;
 padding: 0px 0px 0px 0px;
 background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
 background: -moz-linear-gradient(top,  #cecece,  #8c8c8c);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
 float: left;
}
div.nav ul li:first-child {
 border-radius: 5px 0px 0px 5px;
 -moz-border-radius: 5px 0px 0px 5px;
 -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child {
 margin-right: 0px !important;
 border-radius: 0px 5px 5px 0px;
 -moz-border-radius: 0px 5px 5px 0px;
 -webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li a {
 margin: 0px 1px 0px 1px;
 padding: 11px 33px 11px 33px;
 background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
 background: -moz-linear-gradient(top,  #cacaca,  #848484);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
 float: left;
 /*-*/
 font-family: Lucida Sans, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #252525;
 text-shadow: #cecece 0px 1px 0px;
}

div.nav ul li:first-child a {
 border-radius: 5px 0px 0px 5px;
 -moz-border-radius: 5px 0px 0px 5px;
 -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child a {
 margin-right: 0px !important;
 border-radius: 0px 5px 5px 0px;
 -moz-border-radius: 0px 5px 5px 0px;
 -webkit-border-radius: 0px 5px 5px 0px;
}

div.nav ul li:hover {
 background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
 background: -moz-linear-gradient(top,  #999999,  #5f5f5f);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
}
div.nav ul li:hover a {
 padding: 11px 33px 11px 33px;
 background: -webkit-gradient(linear, left top, left bottom, from(#929292), to(#535353));
 background: -moz-linear-gradient(top,  #929292,  #535353);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#929292', endColorstr='#535353');
 /*-*/
 color: #fff;
 text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:active {
 background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
 background: -moz-linear-gradient(top,  #242424,  #3f3f3f);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li:active a {
 margin: 0px 0px 0px 0px;
 padding: 9px 33px 11px 33px;
 border-width: 2px 1px 0px 1px;
 border-style: solid;
 border-color: #282928 #3f3f3f #525051 #3f3f3f;
 -webkit-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
 -moz-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
 background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
 background: -moz-linear-gradient(top,  #999999,  #5f5f5f);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
 color: #fff;
 text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:last-child:active a {
 padding-right: 34px;
}
div.nav ul li.selected {
 background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
 background: -moz-linear-gradient(top,  #242424,  #3f3f3f);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li.selected a {
 margin: 0px 0px 0px 0px;
 padding: 9px 33px 11px 33px;
 border-width: 2px 1px 0px 1px;
 border-style: solid;
 border-color: #282928 #3f3f3f #525051 #3f3f3f;
 background: -webkit-gradient(linear, left top, left bottom, from(#373837), to(#525051));
 background: -moz-linear-gradient(top,  #373837,  #525051);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373837', endColorstr='#525051');
 /*-*/
 color: #fff;
 text-shadow: #454545 0px -1px 1px;
}
div.nav ul li.selected:last-child a {
 padding-right: 34px;
}

/*-----*/

div.nav ul li.logo a {
 padding: 5px 34px 7px 34px;
}
div.nav ul li.logo:active a {
 padding: 5px 35px 7px 35px;
 border: none;
}
div.nav ul li.logo a img { width: 24px; height: 24px; }

/*-----*/

div.nav ul li.search a {
 padding: 8px 9px 9px 7px;
}
div.nav ul li.search a input {
 width: 120px;
 height: 17px;
 padding: 0px 0px 0px 20px;
 border-width: 1px 1px 1px 1px;
 border-style: solid;
 border-color: #888 #b0b0b0 #dedede #b0b0b0;
 border-radius: 10px 10px 10px 10px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 background: #fff url(button_search.png) no-repeat 5px 3px;
 /*-*/
 font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 font-size: 11px;
 color: #7e7e7e;
}
div.nav ul li.search:hover, div.nav ul li.search:active {
 background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
 background: -moz-linear-gradient(top,  #cecece,  #8c8c8c);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
}
div.nav ul li.search:hover a, div.nav ul li.search:active a {
 margin: 0px 1px 0px 1px;
 border: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
 background: -moz-linear-gradient(top,  #cacaca,  #848484);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
}
div.nav ul li.search:active a {
 padding: 8px 9px 9px 7px;
}

HTML

<div class="nav">
    <ul>
        <li class="logo"><a href="#"><img src="logo_apple.png" border="0" /></a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPod</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iTunes</a></li>
        <li><a href="#">Support</a></li>
        <li class="search"><a><input type="text" value="Search" onclick="(this.value=='Search' ? this.value = '' : null)" /></a></li>
    </ul>
</div>

Closing Thoughts

Despite the cross-browser compatibility and rendering discrepancies, and the remaining limitations of CSS formatting relative to its image-oriented counterparts, the lines that divide image-intensive and script-intensive solutions in web design are blurring with the inclusion of more robust options in each new version of the CSS standard. Many of the restrictions of CSS2 that directed designers to image editing programs are forgotten in the face of the flexible and far-reaching enhancements achieved in CSS3. Given the significant progress made so far, one can only imagine the freedom and capability that the next stage of the standard will deliver.

The article source:http://coswyn.com/2010/10/03/pure-css3-apple-dot-com-navigation/

Demo Download

Link

CSS3 animation, shadows image hover effect

2011-11-03T18:01:00.001+01:00

A sleek image gallery that takes advantage of CSS3 animation, shadows, and the “transform” property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves closer to the user.

The hover effect currently works best in Google Chrome, Safari 4+, and Opera 9.5+. In FF 3.6, the CSS animation is skipped, while in IE, the entire effect isn’t visible.

Example:

Css source:

.css3gallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.css3gallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

Html source:

<div class="css3gallery">
<img src="css3-1.jpg" alt="css3 gallery" title="css3 gallery" />
<img src="css3-1.jpg" alt="css3 gallery" title="css3 gallery" />
<img src="css3-1.jpg" alt="css3 gallery" title="css3 gallery" />
</div>

Demo             Download

Link

Creative CSS3 Animation Menus

2011-10-26T18:44:00.003+02:00

Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.

Demo Download

Link

Sony Vegas Movie Studio HD Platinum 11.0.256

2011-10-25T13:38:00.000+02:00

Sony Vegas Movie Studio HD Platinum 11.0.256 Production Suite | 312 MB

Sony Vegas Movie Studio HD Platinum software makes video editing easy and fun. Best of all, it is a real-time nondestructive video editor. No matter what changes you make to your video and photos in the software, your original files are never affected! Vegas Movie Studio HD software gives you the freedom to experiment and have fun with video editing, without worrying about making a mistake. Create captivating videos that beg to be watched again and again using Vegas Movie Studio HD. Digital video editing tools add professional pizzazz with transitions, titles, and special effects including green screen and slow motion. Quickly format movies for online sharing sites like Facebook, YouTube and more.

Opportunities Vegas Movie Studio HD:

Adding special effects, transitions, titles and music
Increase, rotate and pan images in video
Create professional-looking business presentations
Removing the effect of "red eye"
Simultaneous monitoring of video on a local and an external monitor
Unlimited use of video objects on a single track
Built-in preview window results
More than 500 effects, transitions and effects
Support for VST and DirectX effects plug-ins
Instruments sound restoration
ASIO driver support
Integrated publishing feature on YouTube
Export directly to a portable device
Record finished videos to VideoCD or Multimedia CD
And much more ...

Supported formats are:
Import: AAC, AA3, AIFF, AVI, BMP, CDA, FLAC, GIF, JPEG, MP3, MPEG-1, MPEG-2, MPEG-4, OGG, OMA, PCA, PNG, QuickTime ®, SND, SFA, W64 , WAV, WDP, WMA, WMV
Export: AAC, AC3, AA3, AIFF, AVC, AVI, BMP, FLAC, JPEG, LPEC, MP3, MPEG-1, MPEG-2, MPEG-4, OGG, PCA, PNG, RealMedia ®, TIFF, QuickTime, W64 , WAV, WDP, WMA, WMV

Sony DVD Architect Studio - software for creating professional-level DVD drive, works as a logical complement of Sony Vegas and as a standalone application. According to some opinions, the program is not inferior to the capabilities of the famous Sonic Scenarist, while delivering easy and intuitive interface, inherent in the entire line of products from Sonic Foundry Sony. The program has its own MPEG and AC3 Encoder (Main Concept) and can be used as a source, a variety of media formats.

Features:
• Add special effects, transitions, titles, and music
• Zoom, rotate, and pan across photos to animate still images in your movies
• Commemorate special events such as weddings and anniversaries
• Create exciting, professional-looking business presentations
• Red Eye Reduction (stills)
• Simultaneous video monitoring (local and external monitor)
• 4 video tracks
• Unlimited video events per track
• Built-in video preview window
• Over 500 video effects and 2D/3D transitions
• DirectX and VST plug-in effects support
• Audio restoration tools
• ASIO Driver support
• Integrated publish to YouTube
• Export directly to PSP system
• VideoCD and Multimedia CD Burning

Fileserver

http://www.fileserve.com/file/YpWdaWM/Vegas.studio_Hello.Snorgared.part1.rar
http://www.fileserve.com/file/ZnVHzaM/Vegas.studio_Hello.Snorgared.part2.rar
http://www.fileserve.com/file/vGTm932/Vegas.studio_Hello.Snorgared.part3.rar
http://www.fileserve.com/file/NsER7fT/Vegas.studio_Hello.Snorgared.part4.rar

Filesonic

http://www.filesonic.com/file/2814831875/Vegas.studio_Hello.Snorgared.part1.rar
http://www.filesonic.com/file/2814831905/Vegas.studio_Hello.Snorgared.part2.rar
http://www.filesonic.com/file/2814831935/Vegas.studio_Hello.Snorgared.part3.rar
http://www.filesonic.com/file/2814831885/Vegas.studio_Hello.Snorgared.part4.rar

FilePost

http://filepost.com/files/9f5fb83e/Vegas.studio_Hello.Snorgared.part1.rar
http://filepost.com/files/94f4e3e7/Vegas.studio_Hello.Snorgared.part2.rar
http://filepost.com/files/4321m7c8/Vegas.studio_Hello.Snorgared.part3.rar
http://filepost.com/files/118eed5m/Vegas.studio_Hello.Snorgared.part4.rar

Uploaded.to

http://ul.to/ap1l2w2z/Vegas.studio_Hello.Snorgared.part1.rar
http://ul.to/yfm1z3ka/Vegas.studio_Hello.Snorgared.part2.rar
http://ul.to/9ts2xgzb/Vegas.studio_Hello.Snorgared.part3.rar
http://ul.to/v13dt10j/Vegas.studio_Hello.Snorgared.part4.rar

CSS3 zoom-in zoom out slideshow

2011-09-25T15:40:00.001+02:00

This free copy and paste script adds a stylish CSS3 effect to your slideshow. Simply by setting the style attributes you can apply corners to any or all four image-corners, furthermore you can apply shadows. Each slide can be commented and linked. The visual CSS3 effects are supported by FF3+, Safari 4+, Google Chrome 4+, Opera 10.5+. All other browsers will display a clean zoom-in zoom-out slideshow without rounded corners.

Step 1: Open your webpage and paste the following code anywhere between <body> and </body>:

<!-- BEGINNING OF THE CODE FOR THE CSS-3-SLIDESHOW-->

<!----------------------------------------->
<!-- STYLE-CONFIGURATION STARTS HERE -->
<!----------------------------------------->
<!-- Set the text-style within .textboxstyle -->
<!-- Set the backgroundcolor, the rounded corners and the shadow within .textboxbackgroundstyle -->
<!-- Set the rounded corners and the shadow within .curveandshadowstyle -->
<style> 
.textboxstyle {
font-family:Arial;
font-size:16pt;
color:black;
text-align:center;
vertical-align:top;
}

.textboxbackgroundstyle {
background-color:white;
padding:5px;

/* rounded corners for Firefox */
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;

/* rounded corners for for Safari and Chrome */
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

/* rounded corners for Opera */
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}

.curveandshadowstyle {

/* shadow and rounded corners for Firefox */
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;

/* shadow and rounded corners for Safari and Chrome */
-webkit-box-shadow: 5px 5px 8px #818181;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;

/* shadow and rounded corners for Opera */
box-shadow: 5px 5px 5px #818181;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;

/* shadow for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');

border-style:solid;
border-width:1px;
border-color:white;
}
</style>

<!----------------------------------------->
<!-- STYLE-CONFIGURATION STOPS HERE -->
<!----------------------------------------->
 
<script>

var imgurl= new Array()
var message= new Array()
var thislink= new Array()

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// set the url (or path)  of your images. Add as many images as you like
imgurl[0]="../../pics/300x180bluefish.jpg"
imgurl[1]="../../pics/300x180bonbons.jpg"
imgurl[2]="../../pics/300x180castle.jpg"
imgurl[3]="../../pics/300x180fruitshop.jpg"

// set the messages corresponding to the images above (no more no less than the images above)
message[0]="Let's go fishing today"
message[1]="You are even sweeter"
message[2]="My castle is my home"
message[3]="Eat more vitamins"

// set the links corresponding to the images above (no more no less than the images above)
// If you dont want to add a link enter a #"instead of http://www.mylink.com, see smaple below
thislink[0]="#"
thislink[1]="#"
thislink[2]="#"
thislink[3]="#"

// width of pictures (pixel)
var imgwidth=300

// width of pictures (pixel)
var imgheight=180

// set stillstand of picture (seconds)
var stillstand=2.5

// set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////


// Do not edit below this line
var tmr
var step=10
var i=imgwidth
var i_imgurl=0
stillstand*=1000

var preloadedimages=new Array()
for (iii=0;iii<imgurl.length;iii++){
 preloadedimages[iii]=new Image()
 preloadedimages[iii].src=imgurl[iii]
}

function shrinkpic() {
 document.getElementById("textbox").innerHTML=""
 if (i>0) {
  i-=step
  document.getElementById("picdiv").style.width=i+"px"
  document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
  document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
  document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
  tmr=setTimeout("shrinkpic()",20)
 }
 else {
  i_imgurl++
  if (i_imgurl>=imgurl.length) {
   i_imgurl=0
  }
  document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"
  i=1
  tmr=setTimeout("enlargepic()",20)
 }
}

function enlargepic() {
 if (i<=imgwidth) {
  i+=step
  document.getElementById("picdiv").style.width=i+"px"
  document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
  document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
  document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
  tmr=setTimeout("enlargepic()",20)
 }
 else {
  i=imgwidth
  showmessage()
 }
}

function showmessage() {
 document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'
 tmr=setTimeout("shrinkpic()",stillstand)
}

function gotothislink(){
 document.location.href=thislink[i_imgurl]

}

document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')
document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>')

document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>')

document.write('</div>')

window.onload=shrinkpic
</script>
<!-- END OF THE CODE FOR THE CSS-3-SLIDESHOW-->

Step 2: Go inside the </style>-tags and configure the text-style, the curve-style and the shadow-style.

Step 3: Go to the top-lines within the </script>-tags and configure the images, the text, the link, the opacity and the size of the slideshow.

Demo Download

Signatur in apple mail

2011-09-17T12:38:00.001+02:00

HOW TO MAKE AN HTML SIGNATURE IN APPLE MAIL FOR LION OS X 10.7

There are plenty of tutorials online to do this with Snow Leopard, but it has changed slightly for Lion. Here is how to do it:

In Mail.app, go to Preferences > Signatures and create a signature with any random content. Name it something meaningful. You will be swapping this out later.

Write an html page inside of your favorite text editor. The page should not have html, head or body tags, should include only inline css, and should only consist of basic html elements (div, span, img, a, etc...). Here is some example code to get you started, but you will need to provide your own images.

<br />
<br />
<div id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #999999 dotted; border-bottom: 1px #999999 dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #999999; " >
<a href="http://urbanapps.com" title="urbanapps.com"><img src="http://.../images/logo_noshad_80.png" alt="Urban Apps" style="float: left; padding: 2px 6px 0 0; border: none;"></a>
<div style="padding: 6px 0 0 0">
<span style="font-size:14px"><strong style="color: #333333">Matt Coneybeare</strong>, Founder</span><br />
<strong><a href="http://urbanapps.com" title="urbanapps.com" style="color: #666666; text-decoration: none; border-bottom: 1px #cccccc dotted;">Urban Apps, LLC</a></strong><br />
PO Box 765, Centereach, New York, 11720, U.S.A. | Telephone: 347.688.7226 | Fax: 631.615.6716<br />
<a href="http://twitter.com/urbanapps"><img src="http://.../images/social/twitter_16.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/urbanapps"><img src="http://.../images/social/facebook_16.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://www.linkedin.com/in/coneybeare"><img src="http://.../images/social/linkedin_16.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</div>
<div style="clear:both"></div>
</div>
<br />
<br />
&nbsp;

view raw gistfile1.txt This Gist brought to you by GitHub.

Open the file in Safari.
Click "File" > "Save As" and save as a webarchive.
Open the folder ~/Library/Mail/V2/MailData/Signatures/ and locate the webarchive file you created in step 1 using quicklook (spacebar).
Copy the exact name of the webarchive located in step 5, and delete the file.
Replace it with the webarchive you created in step 4, giving it the exact same name that you copied in step 6.
Restart Mail.app and go to Preferences > Signatures. If you have images in your signature, they will not show here in the preview, but they will show in the real signature if the location is valid.
Open a new compose window and see your new html signature.

Windows 7 System Recovery Disc

2011-09-11T15:21:00.000+02:00

Windows 7 System Recovery Disc (x32/x64) Updated | 300MB

This is where Recovery Disk come into play. It is recommended that users create a recovery disk as soon as possible and keep it in a safe location. In case your Windows 7 fails to boot, the recovery disk can help fix the problem.

If you’re like most PC users, you probably got Windows 7 with a new PC or laptop. And if you’re like 99% of the population, you get your new machines from one of the major manufacturers. Dell, Acer, HP, Toshiba, Lenovo; who all have one thing in common: they don’t give you a real Windows 7 installation disc with your purchase. Instead, they bundle what they call a “recovery disc” (that’s if you’re lucky – otherwise you’ll have a recovery partition instead) with your machine and leave it at that.

It doesn’t matter that you just paid a thousand dollars for a machine that comes with a valid Windows 7 license – your computer manufacturer just don’t want to spend the money (or perhaps take on the responsibility) of giving you a Windows 7 installation DVD to accompany your expensive purchase.

The problem is, with Windows 7, the installation media serves more than one purpose. It’s not just a way to get Windows installed, it’s also the only way of recovering a borked installation. The Windows 7 DVD has a complete “recovery center” that provides you with the option of recovering your system via automated recovery (searches for problems and attempts to fix them automatically), rolling-back to a system restore point, recovering a full PC backup, or accessing a command-line recovery console for advanced recovery purposes.

Thankfully, Microsoft seems to have realized this problem, and have thankfully made a recovery disc for this purpose. It contains the contents of the Windows 7 DVD’s “recovery center,” as we’ve come to refer to it. It cannot be used to install or reinstall Windows 7, and just serves as a Windows PE interface to recovering your PC. Technically, one could re-create this installation media with freely-downloadable media from Microsoft (namely the Microsoft WAIK kit, a multi-gigabyte download); but it’s damn-decent of Microsoft to make this available to Windows’ users who might not be capable of creating such a thing on their own. You can make your own copy from Windows 7 Ultimate Edition, but now you have an easier alternative.

It’s a 143 MB download (165 MiB for the 64-bit version), and in the standard ISO format, ready to burned directly to a CD or DVD. Don’t wait until your PC crashes to download a copy! Download and burn your recovery disc today, so that when the time comes, you’ll be ready!

What it does: The Windows 7 Recovery Disc can be used to access a system recovery menu, giving you options of using System Restore, Complete PC Backup, automated system repair, and a command-line prompt for manual advanced recovery.

What it doesn’t do: You cannot use the Windows 7 Recovery Disc to re-install Windows – it only fixes (not replaces!) Windows.

Download

http://www.filesonic.com/file/1912047264/W7.Recovery.part1.rar
http://www.filesonic.com/file/1912039474/W7.Recovery.part2.rar
or
http://www.wupload.com/file/154231771
http://www.wupload.com/file/154229285

More Awesome CSS3 Buttons

2011-09-06T22:11:00.000+02:00

Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3’s help, it was never easier to create nice looking buttons. In the article: Just some other awesome CSS3 buttons, you’ll learn how to create some cool CSS3 buttons in just a few steps. The buttons are scalable, depending on font size. And styles as color and background are easy to update via CSS. The buttons do not use any image, automatically there’s no extra HTTP image request. No image to load means faster rendering.

Requirements: CSS3 supported browsers
Demo: http://www.red-team-design.com/just-another-awesome-css3
License: License Free

Tabbed Slider with jQuery

2011-09-06T21:53:00.001+02:00

This demo as a “standalone” slider – meaning it’ll essentially be the only element on the page that we create… but using just a few extra steps after the fact, you should be able to add this to your own designs and position/resize it any way that you want!

we’re simply going to attempt to get an idea for how the Nivo Slider works. Every slider out there is going to work a little bit different, so it’s worth taking a few minutes to familiarize yourself with the particular script that you intend to use on a project.

If you take a quick look at the code for the Nivo Slider (inside the demo.html file), you’ll notice that all of the major styling and structure is being handled from the “style.css” file. In fact, the actual HTML code is pretty simple once you’ve referenced the appropriate scripts in the HEAD section of demo.html.

Let’s start our walkthrough by looking at the lines of code from the header. We won’t need to change these, but they need to be present in any file that we want to use the slider on:

<!-- Usually in the <head> section -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js"></script>

Next, let’s peek at the raw HTML that generates the slider:

<!-- Then somewhere in the <body> section -->
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com">
     <img src="images/slide2.jpg" alt="" title="#htmlcaption" />
    </a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

Finally, we won’t be dealing with captions in this particular slider, so you can pretty much disregard the next lines (unless you want to do your own customization of the slider later on):

<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

So, really, all that’s required for you to understand is the basic HTML that generates the slider (shown above in the second block of code). Since we won’t be dealing with captions in our slider, you can further simplify the code to something like this:

<div id="slider-wrapper">
    <div id="slider">
        <img src="images/slide1.jpg" alt="" />
        <img src="images/slide2.jpg" alt="" />
        <img src="images/slide3.jpg" alt="" />
        <img src="images/slide4.jpg" alt="" />
    </div>
</div>

That’s not so bad right? It’s essentially just a couple wrapped DIV elements with images inside.

The CSS for the Nivo Slider

The CSS is what’s going to be doing the heavy lifting, so let’s take a peek at that:

/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider-wrapper {
    background:url(images/slider.png) no-repeat;
    width:998px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:50px;
}

#slider {
 position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
 background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}
#slider a {
 border:0;
 display:block;
}

.nivo-controlNav {
 position:absolute;
 left:260px;
 bottom:-42px;
}
.nivo-controlNav a {
 display:block;
 width:22px;
 height:22px;
 background:url(images/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:3px;
 float:left;
}
.nivo-controlNav a.active {
 background-position:0 -22px;
}

.nivo-directionNav a {
 display:block;
 width:30px;
 height:30px;
 background:url(images/arrows.png) no-repeat;
 text-indent:-9999px;
 border:0;
}
a.nivo-nextNav {
 background-position:-30px 0;
 right:15px;
}
a.nivo-prevNav {
 left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

If you’re new to CSS, this might look intimidating at first… but most of you will see this for a fairly simple bit of styling code. Everything you need to resize and reskin the slider is here… and we only need to change a handful of lines of script to get this thing looking exactly like our version.

First though, we need to locate and re-skin the images that are currently being used for the slider with our own. If you open up the “/demo/images/” folder, you’ll see there’s just a couple main images that we want to reskin:

arrows.png (the Left / Right arrows)
bullets.png (the Dot indicators)
slider.png (the background frame)
background.png (optional)
loading.png (optional)

Demo Download

Link

News Slider Plugin with jQuery

2011-08-24T22:33:00.002+02:00

Awesome RSS Driven Dynamic News Slider Plugin with jQuery

Dynamic News is a jQuery news slider plugin that makes news integration to your web site very easy.Dynamic News plugin supports two ways to add news data. You can either enter your news via HTML markups manually or let Dynamic News plugin load the news from rss feed and build the necessary HTML markups automatically. One cool feature of Dynamic News slider plugin is the news preview or news summary pane, hovering over news headline will show news summary in a tool tip like pop up, which also provides link to news detail page. All the features of Dynamic News slider plugin are configurable. Its up to you whether you want to display news preview pane, display control bar, auto hide control bar or keep it always visible.

Dynamic News Plugin Features

Dynamic/RSS Driven
You can set the no of news entries to be fetched from RSS
Supports manual entry of headlines and news detail via HTML markups
Supports news preview

Dynamic News Slider Plugin Parameters

feedurl: URL of rss feed, default is ''. If 'feedurl' is empty then plugin will look for headlines within HTML markup.
entries: Total no or news entries to be used by Dynamic News Plugins
switchinterval: No of milliseconds single headline stays, default is 5000 ms or 5 secs.
controls: Boolean value if true the news plugin will display the controls bar, default is true.
showdetail: Boolean value if true, hovering over headline will pop up news summary, default is true.
moretext: The text that will be displayed on news detail link within news summary pop up, default is 'more detail'.
controlsalwaysvisible: Boolean value if true the control bar will remain visible, auto hide otherwise, default is false.

Using Dynamic News Slider Plugin

In your HTML file add the following in the head section.

Your FREE Google API key signup for Free GoogleAPI key.
Add a reference to latest jQuery script
Add a reference to dnews.js file
Add a reference to dnews.css

Since Dynamic News Plugin uses google feed API to read RSS, you must have a FREE Google API keysignup for Free GoogleAPI key

Add the following script in the head section and replace the key value with your own key, otherwise it the plugin will not work.

<script src="https://www.google.com/jsapi?key=ABQIAAAAzU5E6W-kYkDWncD-gLlvEhRUEaat57mcPuL2sxLOgiGfdu1dyxRm8B-okEsXk6nmXsYNVPSFoKIYxA" type="text/javascript"><!--mce:0--></script>

Add the following HTML markup within the body of your HTML document.

<div id="dnews" class="news-wrapper">

<div class="news"></div>

</div>The above HTML markup is for rss driven news. If you want to enter the news manually or from your own source e.g. databse, then you need to follow the HTML markup format given below.

<div id="snews" class="news-wrapper">

<div class="news">

<div class="headline">

                <a title="This is the detail about first news" href="#">This is the first headline.</a></div>

<div class="headline">

                <a title="This is the detail about second news" href="#">

This is the second headline.</a></div>

<div class="headline">

                <a title="This is the detail about third headline" href="#">

This is the third headline.</a></div>

</div>

</div>Add the following script in the head section of your HTML document for rss driven news.<script type="text/javascript">

    google.load("feeds", "1");

     $(document).ready(function() {

     $('#dnews').dnews({ feedurl:'http://www.dawn.com/rss', showdetail: true, controlsalwaysvisible: false });

     });

 </script>And for non rss news add the following script in the head section of your HTML document.

<script type="text/javascript">

     $(document).ready(function() {

     $('#snews').dnews({ showdetail: true, controlsalwaysvisible: false });

     });

 </script>Here is the complete code for non rss driven news headlines.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>RSS Drivn Dynamic jQuery News Slider Plugin</title>

    <script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAzU5E6W-kYkDWncD-gLlvEhRUEaat57mcPuL2sxLOgiGfdu1dyxRm8B-okEsXk6nmXsYNVPSFoKIYxA"></script>

    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

 

    <script src="dnews.js" type="text/javascript"></script>

 

    <link href="dnews.css" rel="stylesheet" type="text/css" />

 

    <script type="text/javascript">

        $(document).ready(function() {

        $('#snews').dnews({ showdetail: true, controlsalwaysvisible: false });

        });

    </script>

 

</head>

<body>

    <div class="news-wrapper" id="snews">

        <div class="news">

            <div class="headline">

                <a href="#" title="TOKYO: Workers at Japan’s stricken nuclear plant on Thursday pumped nitrogen into a crippled reactor in a bid to prevent a possible explosion and contain the world’s worst atomic accident for 25 years. With the crisis at the ">

                    Japan using gas to avoid explosion at nuclear plant.</a>

            </div>

            <div class="headline">

                <a href="#" title="'ASK a Stupid Question Day' is a holiday and celebrated in the United States schools. The day falls on Sept 28, but practically it is observed on the last school day each year. Dating way back to 1980s, this day is a regular feature in ">

                    Of stupid questions and the significance of census.</a>

            </div>

            <div class="headline">

                <a href="#" title="Archaeologists are unearthing a 2,000-year-old tunnel at Teotihuacan, the largest pyramid structures built in the pre-Columbian era, in the Basin of Mexico, searching for clues to the region’s most influential former ancient">

                    Digging deep into Teotihuacan’s mystery.</a>

            </div>

        </div>

    </div>

    <div id="dnews" class="news-wrapper">

        <div class="news">

        </div>

    </div>

</body>

</html>
Demo      Download
Link

Thumbnail lightbox Hover Effect

2011-08-23T22:20:00.001+02:00

Mootools Thumbnail lightbox Hover Effect

Thumbnails of photos is very common part of any website. We have seen a lot of innovation and beautiful representation of thumbnails. Recently I came across a beautiful hover effect on thumbnails. Without saying much first see what is this effect.

The Implementation of this effect is given in the following sections.

The HTML

<div class="thumbnail-wrap">

<div class="thumbnail-div">

<div style="background-image: url(5_thumb.jpg);">

   <img class="thumbnail-shadow" src="thumbnail-shadow.png" alt="bottom" />

<div class="sections-overlay">

    <a rel="imagezoom" href="5.jpg">

     <img class="zoom" src="zoom.png" alt="Some Title of the Image 5" />

    </a>

    <a class="readmore" href="#">read more &gt;&gt;</a></div>

</div>

</div>

</div>

I think the code here is self explanatory.

The CSS

The CSS for the effect is a bit lengthy, as lots of hidden elements are involved.

.thumbnail-wrap {

	float:left;

	height:151px;

	margin:30px;

	width:151px;

}

.thumbnail-div {

	background-color:#313131;

	float:left;

	height:146px;

	padding:5px 0 0 5px;

	width:146px;

}

.thumbnail-shadow {

	float:left;

	height:33px;

	width:100%;

}

.thumbnail-div .sections-overlay {

	-moz-background-clip:border;

	-moz-background-inline-policy:continuous;

	-moz-background-origin:padding;

	background:transparent url(thumbnail-overlay.png) no-repeat scroll -40px -300px;

	float:left;

	margin-top:-33px;

}

.thumbnail-div div{

	height:141px;

	width:141px;

}

.sections-overlay {

	background-image:url(readmore-bg.png);

	opacity: 0;

	visibility:hidden;

	background-position: 0px -167px;

}

.thumbnail-div .sections-overlay .zoom {

	margin:60px 0 0 61px;

}

.sections-overlay .zoom {

	border:medium none;

	margin:165px 0 0 312px;

}

.readmore {

	background-image:url(readmore-bg.png);

	color:#FFFFFF;

	display:block;

	float:right;

	font-size:10px;

	margin:17px 0 0 40px;

	padding:5px 10px;

}

The Javascript : Mootools

And Finally the magic of Mootools to get the desired effect. All this effect is doing to decrease the margin-top of "thumbnail-div" by 10px and showing "sections-overlay" div using opacity:1.

$$('div.thumbnail-div').each(function(div){

  div.addEvents({

    'mouseover': function(){

      $(this).tween('marginTop', '-10px');

      $(this).getElements('div.sections-overlay').each(function(d){

        d.morph({opacity: 1, backgroundPosition: "-40px 0px"});

      });

    },

    'mouseout': function(){

      $(this).tween('marginTop', '0px');

      $(this).getElements('div.sections-overlay').each(function(d){

        d.morph({opacity: 0, backgroundPosition: "0px -167px"});

      });

    }

  });

});

Demo      Download

Link

CSS3 3D Image Gallery

2011-08-20T21:46:00.004+02:00

CSS3 3D Lightbox Image Gallery Animation

For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here and a few rounded corners there and nothing more. It’s time to start doing something more inspirational and useful at the same time.

Having been inspired to get ‘Hardboiled‘, I’ve started playing around with a few cool techniques and exploring how to make the content accessible in less capable browsers while giving the best possible experiences to the ones that support the latest advancements in CSS. I’ve taken Benjamin’s CSS lightbox gallery and built upon by adding a few hover effects for the gallery grid itself and a 3D rotation for the lightbox content, all with the use of CSS.

The :target Pseudo-Class

First, let’s look at how the lightbox actually appears without JavaScript and only CSS with the use of the :target pseudo-class. If you’re writing CSS, you’re already using pseudo-classes as you’ll be familiar with :hover, :visited and :active.

You can link directly to a place on a page by adding a page anchor (#) with the ID of an element to the end of the URL:

http://url.com/#info1

You probably already knew that but what you may not know that you can affect the style of the element that is linked to via the :target pseudo-class. The following code would only be seen if a user clicks on a link with the target ID in:

#info1:target { background-color: red; }

In the case of the demo, we’re using any list item with an ID that has been ‘targeted’ to display the lightboxli[id]:target. Pretty standard CSS is then used to display the lightbox on the page, even with a dark transparent overlay through the use of opacity.

The Animation

If we leave it at that, it’s pretty much the same as a standard lightbox or modal window so we’ll set it apart with a fun animation. Here is how we’ve created the animation with the help of keyframes (WebKit only for now):

@-webkit-keyframes lightbox {
 0% { -webkit-transform: scale(5) rotateY(-270deg); }
 100% { -webkit-transform: scale(1) rotateY(0deg); }
}

On it’s own, the code above won’t do anything so we need to reference it against the element(s) we want to animate.

li[id]:target div { -webkit-animation: lightbox 0.75s cubic-bezier(0,0,0,1); }

As you can see, the animation is called lightbox and that’s the first part of the animation property, followed by the duration and the timing function.

It’s very simple. We’re telling the div (the white box with the blue heading in the demo) to transform 5 times bigger with scale(5) and from a rotated position of -270 degress with rotateY(-270deg). Then when the animation ends after 0.75s we want it to reset to it’s actual size and rotation. The browser will create the animation in between (which is affected but the cubic-bezier timing function above).

Less Capable Browsers

The good thing about this is that browsers that don’t support CSS3 will fallback to an accessible version without the fancy animations thanks to the use of the page anchor and Modernizr.

We do this by testing to see if CSS transforms aren’t supported and then adding CSS using the .no-csstransforms class. Why are we testing for a lack of CSS transforms and not CSS animation? It’s mainly to do with :target pseudo-class support which we can’t test for with Modernizr. It isn’t supported by older browsers, specifically IE8 and below but it is supported in all browsers with support for CSS transforms (as far as I know).

I’ve taken that one step further by creating an equal to or less than IE8 condition comment and <noscript> tomake sure it is displayed the same in IE without JavaScript.

<!--[if lte IE 8]>
<noscript>
<style>
    #information li { overflow: visible; position: relative; margin: 0 auto; margin-bottom: 25px; background: #fff; width: 600px; padding: 30px; height: auto; list-style: none; }
    #information li div a.close { position: relative; background: transparent; padding: 0; color: #0090e2; font-size: 12px; font-weight: normal; left: 0; top: 0; }
</style>
</noscript>
<![endif]-->

We also want to replace the ‘x’ (the close button in the lightbox) with ‘Back to top’ text for lesser browsers to aid usability. We do that with a bit of jQuery and a test for no CSS transforms with Modernizr.

if (!Modernizr.csstransforms) {
 $(document).ready(function(){
  $(".close").text("Back to top");
 });
}

Issues

There are a couple of issues I need to point out:

Double scrollbar when the lightbox content exceeds the height of the screen resolution
Animation is possibly slow on older machines (needs more testing)
Loads all content, whereas JavaScript solutions online load content when requested
If a browser has JavaScript turned off and doesn’t support CSS transforms, no content will be displayed. This is a problem with using Modernizr as a JS solution for browser feature testing.

Demo Download

Link

Sticky footer with CSS3

2011-08-19T16:46:00.001+02:00

Nice Sticky footer with CSS3

we are going to build a CSS-3 sticky footer that always stays at the bottom of the web page, no matter how much you minimize your browser vertically, it will always stay at the bottom of the page.
We will also throw in some CSS-3 shadows and some other goodies as well.

So then, lets start by putting in the HTML that we require.

<div id="stickey_footer">

 <!-- Begin Footer Menu -->

<ul id="footer_menu">

 <li><a href="#"><span>Home</span></a></li>

 <li><a href="#">Services</a>

 <li><a href="#">Portfolio</a>

 <li><a href="#">Friends</a>

 <li><a href="#">Blog</a>

 <li><a href="#">Testimonials</a>

 <li><a href="#">Contact</a>

 </ul>

 

 <ul id="social_icons">

 <!--Social Icons -->

 <li><a href="#" ><img src='images/twitter.png' alt="" /><span>Twitter</span></a></li>

 <li><a href="#" ><img src='images/digg.png' alt="" /><span>Digg</span></a></li>

 <li><a href="#" ><img src='images/flickr.png' alt="" /><span>Flickr</span></a></li>

 <li><a href="#" ><img src='images/facebook.png' alt="" /><span>Facebook</span></a></li>

 </ul>

 

</div>

Thats it, Short and sweet
Now lets go and throw in some css that does all the hard work for us
But first we need to make the footer stay at the bottom and not anywhere else. So lets just do that#stickey_footer { /* This will make your footer stay where it is */

 background: none repeat scroll 0 0 #1D1D1D;

 border: 1px solid rgba(0, 0, 0, 0.3);

 bottom: 0;

 font-family: Arial, Helvetica, sans-serif;

 height: 40px;

 left: 50%;

 margin: 0 auto 0 -490px;

 padding: 0 10px;

 position: fixed;

 text-shadow: 1px 1px 1px #000000;

 width: 960px;

}The margin, and the position is the real trick to this tutorial;
The fixed position enables to footer to move as you resize it. Pretty neat huh? 
Next, lets make our menu curvey, add in some hover effects and shadows.</pre>

/* border curves */

#stickey_footer {

 -moz-border-radius: 10px 10px 0px 0px;

 -webkit-border-radius: 10px 10px 0px 0px;

 border-radius: 10px 10px 0px 0px;

}

 

/* hover effect */

#stickey_footer:hover {

 background: none repeat scroll 0 0 #2b2a2a;

}

 

/* shadow for the footer*/

#stickey_footer {

 -moz-box-shadow:0px 0px 11px #191919;

 -webkit-box-shadow:0px 0px 11px #191919;

 box-shadow:0px 0px 11px #191919;

}

 

#footer_menu {

 margin: 0;

 padding: 0;

 width:auto;

}

 

#footer_menu li {

 list-style: none;

 float: left;

 font-size:12px;

 padding: 12px 14px 14px 14px;

 border-right:1px solid rgba(0, 0, 0, 0.4);

 background: rgba(0, 0, 0, 0.1);

}

 

#footer_menu .imgmenu {

 padding:5px 8px 3px 14px;

 float:left;

 background:url("images/home.png") 13px 5px no-repeat;

 width:36px;

 height:30px;

 border:none;

 border-right:1px solid rgba(0, 0, 0, 0.4);

 cursor:pointer;

}

 

#footer_menu li:hover {

 background:#202020; /* Fallback color for old browsers */

 background: rgba(0, 0, 0, 0.3);

}

 

#footer_menu .imgmenu:hover {

 background:url("images/home_hover.png") 13px 5px no-repeat;

}

 

#footer_menu li a {

 display: block;

 color: #cccccc;

 text-decoration: none;

}

 

#footer_menu li a:hover {

 color: #ffffff;

}

 

#footer_menu li span {

 display:none;

}

 

#stickey_footer #social_icons {

 float:right; /* social icons positions */

 width:auto;

 margin:5px 15px 0px;

 padding:0px;

 overflow:hidden;

}

 

#stickey_footer #social_icons li {

 margin-right:12px; /* 12px is the space between each one of them */

 float:left;

 width:24px;

 padding:0px;

 height:32px;

 list-style:none;

 _margin-right:0px; /*for IE6 */

}There, all tucked in nice and neat. And its all set to go.
Tested and works on all major browsers that support css-3 . Sorry no IE 6-7-8.
Demo         Download
Link

Nero Burning ROM 10.5.10300

2011-08-15T22:34:00.001+02:00

Nero Burning ROM 10.5.10300 | 100MB

Drag & drop burning - Burn your content to CDs, DVDs and Blu-ray Discs with the click of a mouse.
The bigger, the better - Nero DiscSpan lets you burn large compilations across multiple discs and even disc types, all in one session.

Mix it up - Burn both audio and data files onto one disc in the same session using Mixed Mode.

Flawless copies - Make multiple, high quality copies of your home videos on DVD or Blu-ray Disc or copy to your hard drive storage with just a few clicks.

Rip your tunes - Automatically encode files when ripping audio CD files to hard drive for playback on MP3 players.

Secure your stuff - Make your burned content last with SecurDisc, the Nero-exclusive technology that helps ensure disc readability regardless of scratches, age or deterioration.

Privacy, please - Add government-level personal password encryption to your discs to allow exclusive access and create digital signatures to verify file versions and data authenticity.

WindowsA- compatibility - Windows context menu support for burning, copying and disc information.

Say goodbye to hardware - SecurDisc is included with every burn, and is now compatible with all recorders.

http://www.filesonic.com/file/1675218991/NeroBurningROMv10.5.10300.rar
or
http://www.wupload.com/file/97508436/NeroBurningROMv10.5.10300.rar

HANEKWAN

100 Pictograms in OpenType Font, EPS and Web Font

How to install WordPress locally on a Mac

Step 1: Download and install MAMP

Step 1.5: Edit your hosts file (optional)

Step 2: Load WordPress files into your new /htdocs folder

Step 3: Edit your wp-config.php file

Step 4: Load up your editor of choice and enjoy local development!

How to Install Joomla Locally on a Mac

A Separation’ wins Oscar

Film Synopsis

HTML email signatures in Outlook 2011 for Mac

Apple Style Slider Plugin with jQuery

Features

دیارم ده‌یری عیشقه‌

Happy Mother’s Day

FlashFXP 4.1.8 Build 1704 Final

فول آلبوم موسيقي شهرام ناظري

Cool JQuery and CSS3 Animation Menu

jQuery Vertical Tabs Plugin

Step 1. The HTML

Step 2. The CSS

Step 3. The JavaScript

Animated Buttons with CSS3

Useful Peel Back With jQuery

Long aside on the general subject of peel back ads

Back to the code: exit Flash, enter jQuery

How to use

Hyperlinks!

Original Hover Effects with CSS3

Beautiful DropDown Menu with jQuery

Usage

Nice Pure CSS3 Like Apple Navigation

Border-Radius

Gradients

Text-Shadow

The Code

CSS

HTML

Closing Thoughts

CSS3 animation, shadows image hover effect

Creative CSS3 Animation Menus

Sony Vegas Movie Studio HD Platinum 11.0.256

CSS3 zoom-in zoom out slideshow

Signatur in apple mail

Windows 7 System Recovery Disc

More Awesome CSS3 Buttons

Tabbed Slider with jQuery

The CSS for the Nivo Slider

News Slider Plugin with jQuery

Dynamic News Plugin Features

Dynamic News Slider Plugin Parameters

Using Dynamic News Slider Plugin

Thumbnail lightbox Hover Effect

The HTML

The CSS

The Javascript : Mootools

CSS3 3D Image Gallery

The :target Pseudo-Class

The Animation

Less Capable Browsers

Issues

Sticky footer with CSS3

Nero Burning ROM 10.5.10300

Step 2: Load WordPress files into your new `/htdocs` folder

Step 3: Edit your `wp-config.php` file