Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 22 2013

06:30

July 08 2013

06:30

July 01 2013

06:30

June 17 2013

07:00

June 10 2013

07:00

May 20 2013

07:00

May 13 2013

07:00

May 06 2013

07:00

How To Create an iOS App Icon for Your Website

Did you know you can give your website its very own app icon for iPhones and iPads? It only takes a few seconds and it makes your site look really smart when it’s saved on a user’s home screen, or when viewed in popular apps such as Reeder.

Why create an app icon?

Specifying an app icon is one of those little finishing touches that isn’t really noticeable but makes all the difference if you take it away. Without an app icon if you bookmark a site on your iPhone or iPad you’re left with an ugly screenshot of the page crammed into the little rounded square, but with one line of code you can choose your own icon design, such as a logo. It’s much like a favicon, but on a larger scale.

Having someone bookmark your site onto their device home screen is probably a rare occurrence, but as I discovered today there’s another major benefit of creating an app icon. Roberto Alanís tweeted me recently asking how I achieved such a nice icon in Reeder app. My first response was “I don’t know!”, but then I realised it was my apple touch icon that was being used.

How to create an Apple touch icon

The specified dimensions of a touch icon directly from Apple is 114x114px, this will compensate for Retina displays and produce a nice crisp home screen icon. However, as you can see from the Reeder screenshot, other sites using 114px touch icons don’t fill all the available space. Reeder is one of the most popular RSS apps, plus the touch icon may be used elsewhere too, so it’s worth creating your icon at much larger dimensions.

I chose the dimensions of 512x512px, which is probably a little overkill, but apparently 241x241px would suffice.

Next you need to decide whether you want Apple to add their glossy highlight effects to your icon. If you do, name it apple-touch-icon.png, if you don’t, name it apple-touch-icon-precomposed.png.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

You don’t actually need to write any code to get your touch icon working, just pop it in the root directory of your website and it will automatically be used by Apple devices. It might be worth linking it in your <head> though just as a reminder that it’s there. If you ever redesign you might end up forgetting to update it. Once again, make your choice of glossy or precomposed.

April 15 2013

07:00

April 08 2013

07:00

April 01 2013

07:00

20 Free Web Icon & Glyph Packs for Your UI Designs

Constructing icons is one of the most time consuming tasks when working on a web or interface design, but thankfully there’s loads of fantastic ready made icon packs being shared for free by generous designers. This post rounds up over 20 free web icon and glyph packs all featuring a range of monochrome symbols to represent various actions and objects.

Free 16px Retina Icons by Visual Idiot

Download the icon pack

Geomicons by Brent Jackson

Download the icon pack

44 Shades of Free Icons by Victor Erixon

Download the icon pack

Other Icons by Luboss Volkov

Download the icon pack

MimiGlyphs by Sallee Design

Download the icon pack

Batch Icons by Adam Whitcroft

Download the icon pack

Gemicon by Turqois

Download the icon pack

Bijou by Visual Idiot

Download the icon pack

Mini Glyphs by Julian Leiss

Download the icon pack

12px Glyphs by Facundo Gonzalez

Download the icon pack

Pixel Perfect Icons by Thom van der Weerd

Download the icon pack

Free Icon Set by Joe Prince

Download the icon pack

Free Shopping Icons by Virgil Pana

Download the icon pack

105 Loops by Pranav

Download the icon pack

Agile Toolkit Icon Set by Mayack

Download the icon pack

Free Icons Set by Brankic1979

Download the icon pack

Chunky Pika Icon Set by Dutch Icon

Download the icon pack

Linecons by Designmodo

Download the icon pack

160 Tiny Icons by Monsters’Lab

Download the icon pack

28.7 Icons by Kipyatok

Download the icon pack

Freecns by Yanlu

Download the icon pack

Freecns 1.1 by Yanlu

Download the icon pack

Free Ui Icons by Pausrr

Download the icon pack

March 25 2013

08:00

How To Create a WordPress Custom Page Template

Creating a WordPress theme to accommodate your website design concept becomes so much easier when you know about things like Custom Page Templates. WordPress operates using posts and pages, but every page doesn’t have to be cookie-cut from the same format. You can create unique layouts and content for specific pages to create visually interesting sites that are still editable via WordPress’ powerful publishing tools.

What is a custom page template?

WordPress custom page templates are theme files that provide an alternative to the default page.php file. These custom templates can contain whatever HTML and template tags you wish to build your desired layout or content, then the file can be attached to a specific page in order for WordPress to use this new template when serving that particular page of the site.

Common uses for custom page templates are to create unique page layouts for about pages, testimonials or services; an eye-catching portfolio with an array of clickable thumbnails; or a clever about or contact page with features embedded directly to the template in code. If you need to configure your page layout beyond what is available in the default page.php file, a custom page template is what you need.

How to create a custom page template

Creating a custom page template couldn’t be easier. Create a blank php document, then add the following code:

< ?php
/*
Template Name: About
*/
?>

Configure the template name to something recognisable, this is what will appear in a drop down menu within the WordPress admin screen. Saving the file with a name corresponding to your chosen template name makes sense, for example about.php.

In the remainder of the document add your HTML and WordPress template tags to construct your desired layout. This might utilise tags such as <?php get_header(); ?> to build the page using the existing header/sidebar/footer elements, or you might be building something completely unique using a complete WordPress loop. Don’t forget, you can also hard code features into your template file that are unique to this page, such as a contact form, YouTube video or a Google Maps iFrame.

Once you’ve created your custom page template and uploaded it to your theme directory, create your page using the WordPress editor. Any content you add using the WYSIWYG will appear wherever the <?php the_content(); ?> tag was placed within the template. This page will use the default page.php template unless your change the Template option under Attributes.

Select the Template menu and choose the template file with the name you supplied. Hit the publish button and see your WordPress content dynamically generated using the structure of your custom page template.

March 18 2013

08:00

March 11 2013

08:00

March 04 2013

08:00

September 03 2012

07:00

Showcase of 40 Insanely Detailed iOS Icon Designs

iOS icons have come a long way since the birth of the iPhone. Not only are they now shared between iPhone and iPad, with the introduction of retina displays the resolution of the these icons is so high it allows the designer to incorporate some unbelievable detail. This post showcases some of the most detailed iOS icons on the web, with some even crossing into the realm of hyperrealism.

Sandwich iOS icon by Ryan Ford

Sandwich iOS icon by Ryan Ford

Toybox icon by Julian Frost

Toybox icon by Julian Frost

Unlaced App Icon by Ryan Ford

Unlaced App Icon by Ryan Ford

Tiki Kingdom App Icon by Fabricio Rosa Marques

Tiki Kingdom App Icon by Fabricio Rosa Marques

Broadcast iOS App Icon by Román Jusdado

Broadcast iOS App Icon by Román Jusdado

Mophie Outdoor iOS App Icon

Mophie Outdoor iOS App Icon

Treasure Trouble iOS App Icon by Michael Flarup

Treasure Trouble iOS App Icon by Michael Flarup

Cigar Box iOS Icon by Konstantin Datz

Cigar Box iOS Icon by Konstantin Datz

History of Rock App Icon by Michael Flarup

History of Rock App Icon by Michael Flarup

Journal iOS Icon by Román Jusdado

Journal iOS Icon by Román Jusdado

ProPlayer iOS App Icon

ProPlayer iOS App Icon

Record Player Icon by Iasha Simonishvili

Record Player Icon Design by Iasha Simonishvili

Veggie Meals iOS Icon by Max Rudberg

Veggie Meals iOS Icon by Max Rudberg

On this day iOS App Icon

On this day iOS App Icon

Nikon Camera iOS Icon by Gianluca Divisi

Nikon Camera iOS Icon by Gianluca Divisi

Game App Icon by Aleksandr Novoselov

Game App Icon by Aleksandr Novoselov

iOS Icon Design by Konstantin Datz

iOS Icon by Konstantin Datz

iOS Game Icon by Ratmotion

iOS Game Icon by Ratmotion

Record Player iOS Icon by Román Jusdado

Record Player iOS Icon by Román Jusdado

Physique Workout Tracker by Román Jusdado

Physique Workout Tracker Icon by Román Jusdado

Coffee Lovers Icon by Aditya Nugraha Putra

Coffee Lovers Icon by Aditya Nugraha Putra

Good Music iOS App Icon Design

Good Music iOS App Icon

InstaGenius App Icon Design by Artua

InstaGenius App Icon by Artua

Coach’s Eye iOS App Icon

Coach's Eye iOS App Icon

Camera App Icon by Aditya Nugraha Putra

Camera App Icon by Aditya Nugraha Putra

Boxing Glove iOS Icon by Konstantin Datz

iOS Icon by Konstantin Datz

Bacon Diet App Icon by Ryan Ford

Bacon Diet App Icon by Ryan Ford

Baby Accordeon App Icon by Serg

Baby Accordeon App Icon by Serg

Alarm Icon by Eddie Lobanovskiy

Alarm Icon by Eddie Lobanovskiy

Tape Icon Design by Sosoa

Tape Icon by Sosoa

Weather App Icon by Dash

Weather App Icon by Dash

Pizza App iOS Icon by Ryan Ford

Pizza App iOS Icon by Ryan Ford

Wee Rockets iOS App Icon

Wee Rockets iOS App Icon

App Icon by Jackie Tran

App Icon by Jackie Tran

Poker Club iOS Icon Design by Ruaridh Currie

Poker Club iOS Icon Design by Ruaridh Currie

Darth Vadar Icon by Michael Flarup

Darth Vadar Icon by Michael Flarup

Stormtrooper Icon by Michael Flarup

Stormtrooper Icon by Michael Flarup

Lendthing iOS App Icon

Lendthing iOS App Icon

August 27 2012

07:00

August 20 2012

07:00

August 13 2012

07:00

How To Create a Pure CSS Dropdown Menu

With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu.

View the pure CSS dropdown menu demo

The menu we’ll be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action.

View the pure CSS dropdown menu demo

The HTML Structure

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a></li>
		<li><a href="#">Articles</a></li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

First up we’ll need to create the HTML structure for our CSS menu. We’ll use HTML5 to house the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list.

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a></li>
			</ul>
		</li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
			</ul>
		</li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the <li> of its parent menu option.

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
			</ul>
		</li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. These links are placed into another unordered list and inserted into the “Web Design” <li>.

HTML menu

So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents.

The CSS Styling

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

Let’s begin the CSS by getting the basic dropdown functionality working. With CSS specificity and advanced selectors we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any UL’s within a UL with the display:block; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.

HTML menu

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;
	}

The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.

HTML menu

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}

The main navigation bar is now all styled up, but the sub menus still need some work. They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom).
The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.

HTML menu

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>.

The Completed Pure CSS Dropdown Menu

View the pure CSS dropdown menu demo

View the pure CSS dropdown menu demo

August 06 2012

07:00
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl