From Leopard to Snow Leopard, Lion to the new Mountain Lion, Apple doesn’t change much when it comes to User Interface. Once you have purchased Apple’s latest Mac OS X operating system, the Mountain Lion, you would probably not notice any significant changes upon installation (some of you may say that it looks exactly like the Mac OS X Lion). But if you’re wondering where the "Mountain" makes a difference, this post is for you.

We’ve been playing with the new OS for a while now and in this post, you’ll see some of the noticeable updates and new functions that have been made available on the Mac OS X 10.8 Mountain Lion. Most of the new functions are on the inside and the good news is, it’s a small learning curve to adapt to the changes.

"Universal Access" is now "Accessibility"

What was previously ‘Universal Access’ is now ‘Accessibility’, with an added left pane for better customization of your settings.

Share App Store Apps

Discovered a cool app, or installed something you’d like to share among your peers and friends? The new App Store now provides you with a copy link to the app you like which you can share with friends and even tweet.

Sharing is now easier

Apple has added a sharing icon to most of their native applications: Preview, Textedit, Safari, Notes, etc. It allows you to share almost anything instantly with your friends over instant messaging (Messenger), email, Twitter, Flickr or Facebook. Be sure to sign in with your social network accounts under System Preferences > Mail, Calendar and Contacts to take full advantage of this feature.

Calendar with a sidebar

The new calendar now comes with a sidebar, allowing you to navigate through iCloud and 3rd party calendars (Google and other delegates) easily.

"Contacts" is the new "Address Book"

Don’t panic if you can’t find your Address Book app. It’s now called Contacts, and it now:

• Allows you to use your twitter profile photo as your contact photo
• Combines the information of multiple services (Yahoo, Google, etc) your individual contacts may have into one single contact card.

TextEdit becomes better

Mac’s default text editor, TextEdit gets better. You can now start a new document or edit an existing document from iCloud.

Plus, there are a couple of cool new functions hidden within the title of your document:

1) You can now edit the title on the fly, right there on the title.

2) Made a mistake with this version of the document? No problem. Just revert to older versions with a TimeMachine-like user interface directly from the title.

Notes is On the Mac

If you are a user of Notes in iOS, you’ll be happy to know that it is now on the MacOS X Mountain Lion. Now you can update your notes from the same iCloud account on any of your devices, iPhone, Mac or iPad. Watch them sync on the fly.

And here are a few more cool functions of Notes we’ve noticed:

• Support for folders
• Supports bullets and lists
• Allows attachment of photos and files
• Allows sharing of notes with peers

A smarter Safari browser

It looks like Safari agreed that Chrome is cool after all. It added two functions in Safari that we already see in Chrome:

The URL bar is now a search bar like the Chrome Omnibox, and displays search results as you type.

Safari now has its own Incognito mode: "Tell websites not to track me".

More Subtle features

Here are more small but still new features in the new Mac OS X Mountain Lion that we’ve come to discover:

Look, a small progress bar appears within the folder when you copy or download files.

You can now encrypt the entire drive by selecting the drive, right click and choose Encrypt.

A Search function has been added to the LaunchPad and Widget Dashboard.

You can now organize your Widget apps into folders, just like on the iOS.

If you like having your screensaver on, you can now use Photo Stream as the image source for your screensaver.

Lastly, a 3 finger tap on any text file launches the Dictionary.

Shortcuts and Gestures

1. Duplicate a file or folder on the fly with: Command + D

2. Launch "Accessibility Options" instantly with: Command + Option + F5

3. To access Notification, do a two-finger slide from right to left.

4. You can now use two- or three-finger swipes to navigate through the Reminder Lists.

What did you notice?

Have you gotten your copy of the new Mac OS X? How are you liking Mountain Lion so far? Tell us all the nitty gritty details.

Related posts:

1. A Look Into: Messages – New iChat for Mac OS X Mountain Lion
2. Mac OS X Mountain Lion’s Galaxy Desktop Wallpaper
3. OS X Lion: 10 More New Features + Shortcuts You Should Know
4. How to Setup Messages + Facebook Chat in OS X Lion [Quicktip]

Coding with CSS3 has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with gradients, drop shadows and rounded corners. All of these effects are slowly becoming adopted in every major web browser.

In this tutorial I want to showcase many of these cool CSS3 effects. I’ve built a simple web form using some of the newer HTML5 input types. The layout is also responsive; it will adapt as the window size is reduced. This situation is perfect for building web forms to support smartphone users.

Check out the source code and see if you can follow along in the file structure. Also feel free to customize these elements and copy them into your own websites.

• Demo
• Download Source Code

Building the Form Structure

To start I’ve created a main file index.html along with two separate stylesheets. style.css contains all the default selectors while responsive.css handles different window sizes. My doctype is HTML5 and I’ve wrapped the entire form in a container <div>.

This example only demonstrates the effects you can manifest when coding in CSS3. Thus we have no post submission script or destination to redirect the user. My code below contains the opening input tags for our first few form elements.

  <form name="hongkiat" id="hongkiat-form" method="post" action="#">  <div id="wrapping" class="clearfix">  	<section id="aligned">  		<input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">  		<input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="2" class="txtinput">  		<input type="url" name="website" id="website" placeholder="Website URL" autocomplete="off" tabindex="3" class="txtinput">  		<input type="tel" name="telephone" id="telephone" placeholder="Phone number?(optional)" tabindex="4" class="txtinput">  		<textarea name="message" id="message" placeholder="Enter a cool message..." tabindex="5" class="txtblock"></textarea>  	</section>  

The first block area is wrapped in a section tag so we can float the layout side-by-side. The left column contains all these inputs: text, e-mail, URL, and telephone number. As you tab through on your phone the mobile keyboard display should adapt based on the input type. There are plenty of good reasons to support these features for mobile since everybody is working on-the-go these days.

The textarea element can also have a placeholder text defined on pageload. This is similar to a label which disappears once the user enters some text in the field. The attribute which isn’t carried over is autocomplete because textareas don’t usually fill in related content.

Sidebar Controls

I wanted to build this form so that it would respond appropriately to resizing window displays. When the window is full enough then both input columns are floating next to each other. But if the width is cut down slightly then the right-hand sidebar drops down below the main content.

Here’s my HTML for the sidebar area:

  <section id="aside" class="clearfix">  	<section id="recipientcase">  	<h3>Recipient:</h3>  		<select id="recipient" name="recipient" tabindex="6" class="selmenu">  			<option value="staff">Site Staff</option>  			<option value="editor">Editor-in-Chief</option>  			<option value="technical">Tech Department</option>  			<option value="pr">Public Relations</option>  			<option value="support">General Support</option>  		</select>  	</section>    	<section id="prioritycase">  		<h3>Priority:</h3>  		<span class="radiobadge">  			<input type="radio" id="low" name="priority" value="low">  			<label for="low">Low</label>  		</span>    		<span class="radiobadge">  			<input type="radio" id="med" name="priority" value="med" checked="checked">  			<label for="med">Medium</label>  		</span>    		<span class="radiobadge">  			<input type="radio" id="high" name="priority" value="high">  			<label for="high">High</label>  		</span>  	</section>  </section>  

This code actually isn’t anything too confusing. Just a simple option select menu and some radio buttons. Additionally, after these objects I placed a reset and submit button towards the end of the section.

  <section id="buttons">  	<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">  	<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!">  	<br style="clear:both;">  </section>  </form>  

This all looks well and good, so now let’s move into some CSS properties. There are so many customizations you can apply when working on form elements. Try not to bog yourself down with too much thinking and have fun!

Animated Box Shadows

You’ll notice as you tab through each of the main input elements that I’ve animated a colorful outer shadow. Google Chrome has an outline property which does something similar, but not quite as extravagant. This small part of the interface is alluring to first-time visitors.

  /** the form elements **/  #hongkiat-form { box-sizing: border-box; }    #hongkiat-form .txtinput {    display: block;    font-family: "Helvetica Neue", Arial, sans-serif;    border-style: solid;    border-width: 1px;    border-color: #dedede;    margin-bottom: 20px;    font-size: 1.55em;    padding: 11px 25px;    padding-left: 55px;    width: 90%;    color: #777;      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;       transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  }    #hongkiat-form .txtinput:focus {    color: #333;    border-color: rgba(41, 92, 161, 0.4);      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);    outline: 0 none;  }  

In order to target each text element I’ve used the class .txtinput. Each of the transition properties work on border, box-shadow, and color. I’m using box-sizing: border-box; on the form container so padding doesn’t mess up our responsive design.

I had to copy over these same styles and edit them slightly for the textarea. I changed some of the padding and margins, and appended a unique background icon.

  #hongkiat-form textarea {    display: block;    font-family: "Helvetica Neue", Arial, sans-serif;    border-style: solid;    border-width: 1px;    border-color: #dedede;    margin-bottom: 15px;    font-size: 1.5em;    padding: 11px 25px;    padding-left: 55px;    width: 90%;    height: 180px;    color: #777;      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;       transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  }  #hongkiat-form textarea:focus {    color: #333;    border-color: rgba(41, 92, 161, 0.4);      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);    outline: 0 none;  }  #hongkiat-form textarea.txtblock {  	background: #fff url('http://media02.hongkiat.com/responsive-css3-form/speech.png') 5px 4px no-repeat;  }  

Sidebar Inputs

The radio buttons and select menu items are styled much simpler. You can apply outer glow effects and similar drop shadows on these elements, but it doesn’t always look good. Alternatively designers will create custom user interfaces and attach these as background images. But this may require a jQuery workaround to keep the options displaying properly.

  span.radiobadge {    display: block;    margin-bottom: 8px;  }    span.radiobadge label {    font-size: 1.2em;    padding-bottom: 4px;  }    select.selmenu {    font-size: 17px;    color: #676767;    padding: 9px !important;    border: 1px solid #aaa;    width: 200px;  }  

I haven’t done a whole lot to push these away from the main input elements. Plenty of extra padding is important so your users feel comfortable interacting with the form. When text is super tiny it can be a struggle just to fill out each part. Keep your font big, but not so big that it overwhelms the page.

Customized Buttons

The reset and submit buttons are designed in a class of their own. I have built a set of light gradients to match well with the blue highlights in our form fields.

Below is my CSS code for the submit button on standard and hover state.

  #buttons #submitbtn {    display: block;    float: left;    height: 3em;    padding: 0 1em;    border: 1px solid;    outline: 0;    font-weight: bold;    font-size: 1.3em;    color: #fff;    text-shadow: 0px 1px 0px #222;    white-space: nowrap;    word-wrap: normal;    vertical-align: middle;    cursor: pointer;      -moz-border-radius: 2px;    -webkit-border-radius: 2px;    border-radius: 2px;      border-color: #5e890a #5e890a #000;      -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);    -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);    -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);    box-shadow: inset 0 1px 0 rgba(256,256,256, .35);      background-color: rgb(226,238,175);    background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38)));    background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);    background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);    background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);    background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );  }  #buttons #submitbtn:hover, #buttons #submitbtn:active {    border-color: #7c9826 #7c9826 #000;    color: #fff;      -moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);    -ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);    -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);    box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);      background: rgb(228,237,189);    background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54)));    background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);    background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );  }  

It’s almost impossible to keep this type of selector clean! There are simply too many properties you need to list out and support for many older legacy browsers. Internet Explorer can even render these gradients with the proper filter. Notice aside from the background gradients I’ve also included a new border color, rounded corners, and a box shadow on hover.

The reset button looks similar but I’ve gone an entirely different route with the color scheme. Light gray tends to fall into the background in comparison to the bright green colors. Our reset button likely won’t be used very much, so it doesn’t need all the attention.

  #buttons #resetbtn {    display: block;    float: left;    color: #515151;    text-shadow: -1px 1px 0px #fff;    margin-right: 20px;    height: 3em;    padding: 0 1em;    outline: 0;    font-weight: bold;    font-size: 1.3em;    white-space: nowrap;    word-wrap: normal;    vertical-align: middle;    cursor: pointer;      -moz-border-radius: 2px;    -webkit-border-radius: 2px;    border-radius: 2px;      background-color: #fff;    background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));    background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);  background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );      border: 1px solid #969696;      box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);    -moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);    -webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);  }  #buttons #resetbtn:hover {    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);    color: #818181;      background-color: #fff;    background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));    background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );      border-color: #aeaeae;      box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);  }  

You could even drop the reset type and use this white/gray color scheme as your main submit button. I’ve used many of the same gradient styles and drop shadow effects, along with a text shadow for the inner label. It definitely provides a different feeling to the user experience.

Responsive Layout Changes

Moving into my other CSS file we can take a look at the simple responsive media queries I’ve setup. Any browser window above 800px will experience the full sidebar interface. As you get below this threshold the left column expands to 100% width and you see the sidebar elements drop down below.

  @media screen and (max-width: 800px) {  	body {  		padding: 10px 15px;  	}  	#container {  		width: 100%;  	}  	#hongkiat-form #aligned {  		width: 100%;  		float: none;  		display: block;  	}  	#hongkiat-form #aside {  		width: 100%;  		display: block;  		float: none;  	}  	#hongkiat-form .txtinput, #hongkiat-form textarea {  		width: 85%;  	}  	#prioritycase {  		float: left;  		display: block;  	}  	#recipientcase {  		float: left;  		display: block;  		margin-right: 55px;  	}  }  

As we get closer down in size I try to adapt each of the input forms. The width property can end up longer than the webpage itself and then we have input forms sticking out over the edge. This happens around 550px which is where I break the next query, along with both iPhone screen display resolutions for portrait and landscape.

  /* smaller screen dropoff *******/  @media only screen and (max-width: 550px) {   	#hongkiat-form .txtinput, #hongkiat-form textarea {  		width: 80%;  	}  }    /* iPhone Landscape ********/  @media only screen and (max-width: 480px) {  	body {  		padding: 10px 0px;  	}  	select.selmenu {  		width: 190px;  	}  }    /* iPhone portrait *******/  @media only screen and (max-width: 320px) {  	body {  		padding: 10px 0px;  	}   	#hongkiat-form .txtinput, #hongkiat-form textarea {  		width: 70%;  	}  	#hongkiat-form #aligned {  		overflow: hidden;  	}  	select.selmenu {  		width: 160px;  	}  	#recipientcase {  		margin-right: 30px;  	}  }  

Horizontal landscape mode still holds everything together very well. I’ve only made the dropdown select menu a bit thinner to make room for the radio buttons. In the portrait view, I’ve resized all the elements to much smaller widths. Now our code won’t break even in resized browser windows. But it’s nice to have support for iOS/Android smartphones as well.

• Demo
• Download Source Code

Conclusion

I hope this tutorial has been informative in explaining just how much can be done on your webforms. The new CSS3 properties are powerful enough to build fully functioning animations with just a few lines of code. It’s truly an exciting time to be working in web development and following these trends.

If you have ideas or suggestions on the tutorial code feel free to share them with us via comment box below.

Related posts:

1. Creating A Stacked-paper Effect Login Form
2. Creating A Rocking CSS3 Search Box
3. How to Create An Ajax-Based HTML5/CSS3 Contact Form
4. How to Create Gmail logo with CSS3

By now we have seen dozens, if not hundreds, of showcases of creative headers and footers. With the tools available today, creating a fancy header isn’t that difficult. But it takes a bit of extra work and creativity to make a fancy header that combines well with the footer, offering seamless transition and visual perception.

For example, a header can depict the top of a tree, with leaves and branches – something that we have seen many times in header fancy designs. But it’s always more interesting to go the extra mile and incorporate a footer that builds on that particular visual element. In the case with the tree top, it would be the tree trunk at the bottom. This is not only more cohesive and visually pleasing to look at, but it also guides the eye as the user scrolls down the page.

Today, we’re taking a look at such combinations: creative headers and footers that work well together and are integrated in some way, by design, transition, or otherwise. Here are 20 examples of sites with such header and footer combinations.

Recommended Reading: 50 Beautiful & Enticing Designers Websites

ThePixel

Dr. Martian

Digimurai

Marchand De Trucs

Web Designer Wall

Corvus Design Studio

Carbon Sugar

Web Designer Depot

JR Velasco

Bei.ro

No Milk Today

The Great Bearded Reef

Matt Mullenweg

N design Studio

SimpleArt

Meomi

Miki Mottes

Snailbird

Morphix

Gisele Jaquenod

More Beautiful Websites:

Here are more showcases of beautiful websites we’ve published in the past:

• Beautiful University Websites
• Beautiful Government Websites
• Black/White Websites
• WordPress-powered Websites

Related posts:

1. Mobile App Design/Dev: Beginner’s Guide to jQuery Mobile
2. Brilliant Use of HTML Lists in Web Design
3. 5 Tips to Simplify Your Web Design
4. 10 Design Features Webmasters Should (Probably) Avoid

[Mac only] Siri is the artificial intelligence personal assistant made available on your iPhone. It will answer to all your questions and searches as well as complete tasks you ask it to manage. It’s the perfect assistant anyone can hope for, fitted in the palm-sized gadget. That’s why it’s such a waste to not have a little fun with Siri.

Since its debut, the Web was riddled with funny parody videos about Siri. In most of these videos, Siri says things that was not programmed its system, basically it says anything the video maker wants.

Did you know that you can actually make Siri say whatever you want her to say? It is still not possible on your iPhone, but it definitely can be done, on your Mac. In this article, we will guide you through the process to get Siri on your Mac, and make her say anything so you too can play with (or make fun of) Siri.

Find Siri in your Mac

You may not know this but your Mac has a built-in text-to-speech application. To find Siri’s voice, go to System Preference and click on the Speech icon.

You will have a voice already selected for text-to-speech. To change it to Siri’s voice, click on the dropdown menu.

Click Customize…

Now scroll until you find Samantha, check the box and click OK. Note: Samantha’s the voice for Siri in the US.

You will be prompted by the system, to confirm if you want to download Samantha’s voice. Click Install.

When the installation is done, go back to the Speech window and select Samantha as the preferred system voice.

Camera, Lights, Action

To make Siri say whatever you want, go to Applications > Utilities > Terminal. When the Terminal is open, you can instruct Siri to speak your text in the format of: say “speech here”. For example, you can use the following, copy and paste them to your Terminal and enter.

say "Hi, my name is Siri, and I am now your voice assistant."

You will hear Siri’s voice saying ‘Hi, my name is Siri, and I am now your voice assistant”.

Save the speech

To save the speech by Siri, simply include ‘-o‘ in the command after the keyword ‘say‘, followed by the file name (you can name it whatever you wish)

say -o "filename" "Hi, my name is Siri."

By default, the speech will not be played, instead it will be saved in your home directory in .aiff format. To save the speech on your desktop, first you need to change the directory. Type the following in your Terminal.

cd desktop

After changing the directory, use the line ‘-o’ command again and your speech will now be saved in your desktop with the file name you specified.

Saving a long Speech

If you have a long speech text for Siri, you can easily save the text file in a plain text format and save it to your desktop directory, then use the following line in Terminal.

say -o "filename" -f "speech.txt"

The ‘-f‘ function will call your input speech text file that you must first save in plain text format .txt

Again, Siri will not voice out the text, but the voice will be saved in your desktop in .aiff format.

Conclusion

Now you have Siri as your speech assistant on your Mac, and you can command Siri to say anything you want, be it a short quip or long speech. Have a new parody video featuring Siri/Samantha on your mind? Don’t forget to share it with us!

Related posts:

1. Siri Alternative Apps for Android – Best Of
2. How to Activate Text-to-Speech on iOS [Quicktip]
3. Apple’s iOS6: 9 New Features You Should Know
4. How To Make Your Own Facebook Timeline Movie [Quicktip]