iPixel Creative - Singapore web design & web development company: February 2013

Thursday, February 28, 2013

Yahoo.com redesigned – Free PSD

Wow! This PSD freebie is amazing! Dann Petty has decided to test himself rethinking Yahoo.com.

The post Yahoo.com redesigned – Free PSD appeared first on Freebiesbug.

Yahoo.com redesigned – Free PSD

City guide app free PSD

Today’s free PSD is a file including 3 screens for a “city guide” app. Designed by Sergey Minkin.

The post City guide app free PSD appeared first on Freebiesbug.

City guide app free PSD

Web Design: Customize Checkboxes and Radio Buttons with CSS3

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

With CSS3 we can customize web presentations to be almost anything we want it to be. In this post, as the title says, we are going to customize the look of checkbox and radio input.

These two types of input are a few form elements that are a bit tricky to style (to achieve the same appearance across different platforms) – Windows, OS X and Linux have their own design to display these form elements.

If you want to customize these two form elements, then this tutorial is for you. So, let’s get started.

HTML Markup

We start off by creating a new HTML document. The HTML structure is as follows.

Radio Input


<div class="radio">
	<input id="male" type="radio" name="gender" value="male">
	<label for="male">Male</label>
	<input id="female" type="radio" name="gender" value="female">
	<label for="female">Female</label>
</div>

Checkbox Input


<div class="checkbox">
	<input id="check1" type="checkbox" name="check" value="check1">
	<label for="check1">Checkbox No. 1</label>
	<br>
	<input id="check2" type="checkbox" name="check" value="check2">
	<label for="check2">Checkbox No. 2</label>
</div>

CSS

We are done with the HTML structure, so now let’s put on the styles to these <input>. We will first customize the radio input type. The idea is to turn the default OS design to be as shown in the screenshot below.

Styling Radio Input

First of all, we turn the label cursor to a pointer to indicate that it is clickable then slot in other decorative styles.


label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	font-size: 13px;
}

Then, we will hide the input radio type.


input[type=radio] {
	display: none;
}

And we replace the hidden input radio type with the pseudo-element :before.


label:before {
	content: "";
	display: inline-block;

	width: 16px;
	height: 16px;

	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #aaa;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

The styles above actually also apply to the checkbox input type. The only difference is that the radio input type is a circle. To achive the effect, we add border-radius with a radius size half of the height and width.


.radio label:before {
	border-radius: 8px;
}

Recommended Reading: Understanding pseudo-elements :before and :after

At this stage, here is how our radio input type looks like.

Now, we add the small circle inside when this input is checked. We will utilize the CSS3 :checked pseudo-class along with the Bullet HTML character (•). This bullet will be delivered through content property, thus we need to convert this HTML character for CSS with a Entity Conversion Tool.


input[type=radio]:checked + label:before {
    content: "22";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

So, when the input radio (which is hidden) is checked or selected, a smaller circle will appear, as shown in the following screenshot.

Alternatively, you can also use an image and show it through the background-image property in :before pseudo-element we have added previously. I didn’t use this as It is my preference to not use images, where possible.

Styling Checkbox Input

Now, we add styles to the checkbox input type. First, we also hide the input element.


input[type=checkbox] {
	display: none;
}

Since we have replaced the input with :before pseudo-element before, we now simply add the border radius.


.checkbox label:before {
	border-radius: 3px;
}

Next we will add the checked sign the same way we did with the radio input type. This time we use Check Mark HTML Character (✓).


input[type=checkbox]:checked + label:before {
	content: "13";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 15px;
	color: #f3f3f3;
	text-align: center;
    line-height: 15px;
}

And here is how our checkbox now looks like.

Final Thought

This is only one technique to customize checkbox and radio input type and certainly you can enhance the look to be more stunning. Also, Since we used CSS3 :checked, this technique will only work in browsers that support it. So, if you prefer, you can also use a jQuery Plugin.

Lastly, you can view the demo and download the source code from the links below.

View Demo

Download Source

Web Design: Customize Checkboxes and Radio Buttons with CSS3

Free PSD message widget

A simple and clean message widget with circle avatar and message button. Free PSD web design Singaporeed by Ionut Zamfir.

The post Free PSD message widget appeared first on Freebiesbug.

Free PSD message widget

Everything You Need To Know About Google Glass

I’m sure by now, most of us have heard of the potential Google Glass has. In the video you see a few people going through everyday routines while others put it on for more extreme stuff like skydiving.

On their head, is the wearable gadget that gives you the first-person’s view of the experience, made possible by you guessed it, Google Glass.

Glass Sessions

While Google Glass is still currently a developer’s toy, who has the time to wait until it becomes an item for the masses? So we did a little digging, got our fingers dirty and found 10 things you can expect from this high-tech eyewear.

We’ll talk about its hardware, what it’s capable of doing and how it’ll do it. Be prepared for the future as you might see many people wearing the Google Glass when it’s released.

Recommended Reading: 10 Upcoming Technology That May Change The World

1. Tiny (But Powerful) Hardware

It’s amazing how the Project Glass team has managed to squeeze all of its features into a tiny ‘computer’ supported on a lightweight yet strong frame.

Glass Flexibility

Google Glass is packed with Bluetooth, Wi-Fi, GPS, speakers, a camera, microphone, touchpad and possibly a gyroscope that detects head-tilts. Then there’s the main piece, a tiny screen the size of your finger, that shows you all the information you need at your finger tips.

Glass Prototype
(Image Source: The Verge)

You can tell by the prototype that the design and engineering team have done a great job cramping everything into the current Glass design: a wearable, non-intrusive gadget that doesn’t get in the way of daily life.

2. Heed My Command!

Well, all that hardware is put to good use: Google Glass has voice input, which makes everything a lot more interesting. The built-in microphone combined with Google Now connects you directly to the search engine.

You activate Google Now by saying "Okay Glass" then send a command or question. Tilting your head up does the same thing.

Glass Voice

You can take a photo or record a video, all by just saying the command for it – more on that, later. On the right, is a touchpad where you can swipe through, to get to menus; tapping, registers your selection.

3. Life Pauses for No One

Google Glass users can now live in the moment, and keep that memory in pictures or videos. No more foraging around for a camera, tuning the settings of your photo apps, and letting the moment go by without a single snap. Just say, "Take a Photo" and your view at the moment is captured, hands-free. Imagine the possibiltiies.

Glass Taking Picture

Other than photos, you can do the same with videos, which spells opportunities for extreme sports, real-life tutorials and more. Of course, picture quality coming from a device this small would not be comparable to a DSLR camera, but oftentimes, you’d rather not lose out on the moment.

4. Always On Call, Literally

With Glass being able to record videos, it can also act as a webcam with the data connection from your home or smartphone. You can use Google Hangout for a group conference, and still do what you need to do without being confined to a desk.

Glass Handsfree

The powerful voice input feature also allows you to dictate text messages, attach videos and pictures alongwith and sending it via your mobile data connection, without having to remove your phone from your pocket.

5. Never Get Lost Again

Since it’s built with a GPS chip, it’ll be able to help you navigate, with help from Google Maps. This will take away the need to look down at your smartphone and it will be especially handy when you are driving, when you’re walking through crowded streets or when you’re hiking through the countryside.

Glass Navigation

Travellers, backpackers and even long distant cyclists won’t have to stop and check on where they are. In fact, this is the perfect example of augmented reality.

Recommended Reading: 8 Next-Generation User Interface That Are (Almost) Here

6. Blend In With The Locals

If you have read this recap on Awesome Things Google Search Can Do For You, know that you can do all of this on Glass as well. What’s the difference? Think about travelling and visiting a place where you don’t speak the local language.

Glass Translate

You can now convert the currency rate, understand the measurement system (metric or not), or translate your questions and their answers on the spot. Get the fun facts, best drinking spots, and gain access to the local secrets when you are still there, not when you are back in your apartment looking through vacation photos.

7. Live from the Field

Live information that is shown to you would come from the predictive software of Google Now. On Android’s Jelly Bean, Google Now knows when you’re leaving your home for work and can warn you of bad traffic before you get stuck in it.

You can also set your favourite sports team and it’ll give you the latest news, scores and updates from the team, whenever they play.

Glass Information

All those features are available on Android, but with Glass, you can skip checking your device and just get it shown to you as and when it happens, or as news feeds. Google Now cards also shows you your boarding pass, next appointment, hotel or restaurant reservations, reminders for important birthdays and events in your calendar.

8. OS Compatibility Not An Issue

Google Glass works not only with Android phones but also with the iPhone, according to this report. Apart from the GPS chip inside, Google Glass is dependent on the Wi-Fi or mobile connectivity to deliver its features. It is only fair game it if is available like any third-party accessory.

Glass Notification

When paired up with your smart device, it can show social network notifications and let you communicate via the same channels as you would on the computer. This removes the need of looking at your smartphone constantly, giving you more time to concentrate on the task at hand.

9. Time for A Make-Over

What is high tech without a sleek and cool design? Google Glass weighed an astounding 8 pounds when it first was announced more than a year ago, but now is seeking to receive nods from the fashion industry.

Already lightweight, and soon to be available in 5 color options (Shale, Tangerine, Charcoal, Cotton and Sky), Google Glass is set to get a make-over with help from eyewear companies.

Glass Colors

The flexibility in design is made possible with different frame and lens shapes — the computing part of Glass can be unscrewed from the current frame and attached onto another. We’re looking forward to a less cyborg, more natural feel to it. But for now, it’s wait and see.

10. Still Elusive But Almost Here

Google first made Glass available to developers during the Google I/O conference. At the time, it was priced at ,500 and word has it that it will still be within that price range when it is finally released end of this year.

Glass

More recently, participants of the #ifihadglass competition can get an opportunity to buy Glass if they give the most creative Tweet or Google+ comment. For the rest of us, we’ll just have to wait until they iron out the rough edges before we can put on a pair.

(Images courtesy of Google and The Verge.)

Everything You Need To Know About Google Glass

Free PSD leather UI kit

Free PSD Leather UI Kit that contains also PNG slices ready to be imported to your app. The slices are for iPhone and iPhone@2x.

The post Free PSD leather UI kit appeared first on Freebiesbug.

Free PSD leather UI kit

Wednesday, February 27, 2013

40 New WordPress Themes – February, 2013

One of the great benefits of using WordPress as a CMS or blogging platform is the availability of high-quality themes. New themes are being released all the time, and it’s pretty difficult to stay up-to-date on the available themes because they come out so quickly and because there are so many different companies and websites releasing themes. We thought it would be helpful to showcase some of the best new themes that have been released during the past month.

StyleShop eCommerce WordPress Theme
Price: (includes access to all themes by Elegant Themes)

Available at: ElegantThemes