You may have noticed the updated background on DesignFestival, currently, it is Blind Date Prep by Alan Dowling . Over the next number of weeks we’ll be rotating the background through the most popular entries to further show off the hard work people applied in this contest. Didn’t catch the contest? The Cicada Principle Explained Gallery of Entries Contribute to the Gallery Thanks again to all of the entrants for their great work, and we look forward to seeing more entries into the Gallery.

View post:
DesignFestival: Celebrating The Cicada Principle

css-border-image

Editor’s Note: Images are used throughout this article to illustrate the effects achieved with border-image. To see this in action. and view the code, go to the demonstration page.

A feature that is new in CSS3, but not so new to browsers, is the border-image property. Border-image provides a method to add decorative borders to any element. With the border-image properties you can create decorative borders for elements, beyond simple rounded corners, with images of very small file size or even with gradients.

The border-image property allows you to take a small image, slice it virtually into nine sections, and place /spread the portions of your small image across a much larger element.

You can take an image and stretch it across a button or a whole page.

CSS3 border-image fig1

We’ve used the image on the left as a border-image for the div on the right, maintaining the corners, while stretching the center of the border-image to cover the entire div on the right.
CSS3 border-image fig2
In this second example, instead of stretching the middle of the border-image, we’ve repeated, slightly distorting the image if necessary to ensure we don’t have a broken image in supporting browsers.To ensure that the image is not ‘broken’, the width should be a multiple of the slice’s width. While we’ve repeated the top, bottom and sides, we’ve maintained the four corners, creating a stamp-like effect.

Next, we’ll cover how to take a background-image, virtually cut it up, and either repeat or stretch the image to cover the borders and background of our element.

The border-image is a shorthand property used to declare:

  border-image-source:
  border-image-slice:
  border-image-width:
  border-image-outset:
  border-image-repeat:

The syntax for the shorthand is:

 border-image: <source>
<slice {1,4}> / <width {1,4}> <outset> <repeat{1,2}>;

At this time, Opera, Firefox, Chrome and Safari all support the vendor prefixed border-image shorthand property but don’t support any of the longhand properties that make up the shorthand. So, while we’ll cover the various properties that define border images, you should always use the shorthand instead of the shorthand properties described below.

border-image-source:

The border-image-source, is the URL, gradient or data URI of the image you want to use as your border image. In the above examples, while the longhand property is NOT supported, it is as if we we had used

.gradientBox {
  border-image-source: url(gradient.png);
}
.stamp {
  border-image-source: url(stamp.gif);
}

Just as you can include gradients, base 64, gifs, jpegs, pngs, and even SVG images as background images, you can include all these image types as border images.

border-image-slice:

The border-image-slice property defines from one to four lengths that set the distance from each edge of the image marking the area that will be used to cut, or slice, up our border image.

The border-image-slice property values represent inward offsets from the top, right, bottom, and left (TRouBLe) edges respectively of the image. In effect, with the four lines you define, the browser divides the one border image into nine regions: four corners, four edges and a middle. The four corners maintain their exact size. The other five values can be stretched or repeated or a combo of the two (round), depending on the values of the other border-image properties.

CSS3 border-image fig3

The black lines in the images above delineate how our four defined slice lines cut up our border-image.

In our examples, we’ve sliced the image 30px in from each side for our gradient, and 8 pixels in from each side for our stamp.

In the above examples, while the longhand property is NOT supported, it is as if we we had used

.gradientBox {
  border-image-slice: 30 30 30 30;
}
.stamp {
  border-image-slice: 8 8 8 8;
}

or, since the values are repeated, like the TRBL of border or padding, we can use a single value for all four sides

.gradientBox {
  border-image-slice: 30;
}
.stamp {
  border-image-slice: 8;
}

Note we’ve used no length units. If you are setting the slice values in length, and the value will be interpreted as pixels, omit the units. If you are using percentage values, include the percent. In our example, we could also have used the following:

.gradientBox {
  border-image-slice: 30%;
}
.stamp {
  border-image-slice: 26.7%;
}

For bitmap images, the omitted values are interpolated as pixel values. For vector images (SVG), the values are coordinates. For percentages use the percent sign (%).

border-image-width:

The border-image-width property sets the width of the element’s border. If the border-image-width property is declared, it takes precedence over the border-width, if one is declared. If omitted and the border-width is omitted, the value defaults to the border-width default which is ‘medium’, or generally 3px.

This shorthand is NOT supported in Opera (build 1024 is the most recent one checked). Additionally, the value of auto is not supported in any browser. As such, it is often recommended to include border-width as a separate property. Declaring as part of the shorthand is as if we had declared:

.gradientBox {
  border-image-width: 30px 30px 30px 30px;
}
.stamp {
  border-image-width: 8px 8px 8px 8px;
}

or, since all the value are the same,

.gradientBox {
  border-image-width: 30px;
}
.stamp {
  border-image-width: 8px;
}

So far we have:

.gradientBox {
  border-image: url(gradient.png) 30 / 30px;
}
.stamp {
  border-image: url(stamp.gif) 8 / 8px;
}

Since including border-image-width in the shorthand currently makes Opera fail, it is recommended to exclude this property, and instead opt for including the CSS2 border-width value.

.gradientBox {
  border-width: 30px;
}
.stamp {
  border-width: 8px;
}

Having the border-image-width be the same width as the border-image-slice will create the best looking border image with no distortion. But, they don’t need to have the same values. The slice will be stretched (or contracted) to the width of the border-image-width if the values are not the same.

Remember the box model! As you increase the border-image-width, your element will grow larger.

border-image-outset

The border-image-outset property specifies the amount by which the border-image area extends beyond the border box on all four sides. It is not supported in any browsers, and makes the entire declaration fail, so, for now, don’t include it. The default value is 0.

border-image-repeat

The border-image-repeat property allows you to delineate how non-corner images (the sides and middle) are repeated and/or scaled. The first value is the top and bottom, the second value is the left and right sides. If the second value is omitted, all four sides will have the same value.

The specifications currently define four possible values, but only three are well supported. stretch means that the image should not be tiled, but rather stretched to fill the area. repeat means the image is tiled ( or repeated) to fill the area. If the area allocated for the repeating image is not exactly divisible by the width of the image, the last tiled image may be cut off. With round the image is tiled (repeated) to fill the area, with the image being scaled down, possibly losing its aspect ratio, but ensuring that the image is never cropped. Note that Webkit doesn’t support the round value, replacing it with repeat instead (which is better than failing, I guess).

The space value is not currently supported, but when supported, the border-image will be repeated as many times as can fully fit in the area provided, with the tiles evenly spaced, showing white space between the tiles if the width provided is not an exact multiple of the image size.

In our above examples, we used stretch for the gradient and round for the stamp. You will always want to stretch gradients, as repeating them creates harsh lines as one tile ends and the next begins. And, while it may seem to make sense to use repeat for the stamp, we have no way of knowing if the image is evenly divisible by the width of our design. The round does distort the image ever so slightly, but that is better than having the image cut off.

If we had used the inverse, the effect would be odd. While the top and bottom can use round, repeat or stretch, the left and right sides definitely need the stretch value:

CSS3 border-image fig4

CSS3 border-image fig5

Border-image shorthand

As mentioned earlier, no browser supports the longhand properties defined above, but Opera, Firefox, Chrome and Safari understand the prefixed shorthand border-image property. Now that we understand the components of the shorthand property, let’s put it all together.

The correct syntax is

border-image: <source>
<slice {1,4}> / <width {1,4}>  / <outset> <repeat{1,2}>;

Since outset is not currently supported, we can omit it:

border-image: <source>
<slice {1,4}> / <width {1,4}> <repeat{1,2}>;

Like all border-images, we’ve cut our gradient image into nine slices defined by the border-image-slice property. Generally, the slices are the same width as the border-width. And, since we have a gradient, we want to stretch the image, not tile it, so we don’t get harsh color transitions. As such our code is:

.gradientBox {
    border-image: url(gradient.png) 34 34 34 34 / 34px 34px 34px 34px stretch stretch;
}

which, with repeated values, we can narrow down to:

.gradientBox {
    border-image: url(gradient.png) 34  / 34px  stretch;
}

Since Opera doesn’t understand border-image-width when included in the shorthand, we include the border-width separately and then expand our declarations to include the various vendor prefixes:

.gradientBox {
   border-width: 34px;
  -moz-border-image: url(gradient.png) 34 / 34px  stretch;
  -webkit-border-image: url(gradient.png) 34 / 34px  stretch;
  -o-border-image: url(gradient.png) 34   stretch;
   border-image: url(gradient.png) 34 / 34px   stretch;
}

Similarly, our stamp effect includes the stamp image as the border-image-source, has borders that are eight pixels wide, has a repeating border which can’t have a partial image showing lest we break the design. We still have the Opera issue of border-width, and all supporting browsers still use the vendor prefix. As such, our code looks like this:

.stamp {
    border-width: 8px;
   -webkit-border-image: url(stamp.gif) 8 / 8px round;
   -moz-border-image: url(stamp.gif) 8 / 8px round;
   -o-border-image: url(stamp.gif) 8  round;
    border-image: url(stamp.gif) 8 / 8px  round;
    }

Resources

At this point, you hopefully have a good understanding of how to create a border image. There are a few tools to help you along:

Images are used throughout this article to illustrate the effects achieved with border-image. To see this in action. and view the code, go to the demonstration page.

3d-edge

The Mobile Web is the most important development in the online world since the internet itself. Due to better services and smaller, cheaper devices, there has been a huge explosion in mobile technology that far outpaces the growth of any other computing cycle.

Are you ready for this?

Our brand new title Build Mobile Websites and Apps for Smart Devices is a practical guide for innovative front-end web designers and developers. You’ll discover a fun and accessible approach to mobile web design and development, with enormous scope for opportunity.

If you need convincing as to the mobile web’s impact, simply look around you. Everywhere you go, people are accessing the Web from their devices. Check out these statistics:

  • By the year 2014, consumers will be buying more smartphones than PCs and Laptops.[1]
  • Since the launch of the iPhone, more than four billion apps have been downloaded, with an average of 47 apps per user. Android and iPad app stats are also in the millions.[2]
  • Worldwide mobile browsing has increased 148% in just a year. [3]
  • The number of users accessing Facebook and Twitter through their mobile devices has more than doubled in a year.[4][5]

Clearly, the need to develop for mobile devices is very much alive, and will only become more necessary as time goes on. This book will take you from turning a basic website into a sexy mobile site, from cool mobile app to lucrative and seductive native app.

For the first time ever, you can grab a multi-media bundle including the epack, print book, and a comprehensive online course. The course is from our sister-site, Learnable and taught by one of the book’s authors, Myles Eftos.

You can grab the bundle here for only $49.95 (Saving of 50%!) and take part in this comprehensive learning experience!

The crew with their toys

 

363-opera-106

Speaking as a developer, Opera’s version numbering seems sensible. Unlike Chrome and Firefox’s rapid updates or IE’s ridiculously sedate pace, Opera normally release a new browser once or twice a year. The version number is incremented when it’s right to do so.

Opera 11.50 is out now and it’s brimming with lovely new features. Come on Opera — as the last bastion of logical updates, it should have been version 12! The most obvious change is the redesigned interface:

Opera 11.5

The differences are subtle, but 11.5 sports a lighter, sleeker and cleaner look. It’s easier to concentrate on web page content and Opera claim it’s faster. I like it.

Speed Dial Extensions

Perhaps the biggest change is speed dial extensions. Rather than simply providing quick access to favorite sites, extensions can add dynamic information to the Speed Dial page. Essentially, it’s a personal home page or set of desktop widgets on the start-up screen. A few extensions will be available today including Read It Later, Webdoc and StockTwits.

To help you manage your favorites and extensions, a new flow feature provides an unlimited number dials. Sizes are automatically adjusted for your screen or you can specify your own zoom level.

Password Synchronization

Password sync has finally arrived in Opera Link. The browser implements strong security so passwords are encrypted on the client using your Opera account password and a randomly generated key. No password is ever stored or transmitted as plain text, so that should reassure those affected by the recent high-profile security breaches experienced by Sony, Nintendo, the CIA and other organizations.

For more information, see Security of synchronized passwords with Opera Link.

Under the Hood

The developers have fixed thousands of bugs and upgraded the rendering engine. It should result in a 10-15% speed improvement for CSS and SVG rendering.

The browser has always been on the cutting edge of HTML5 and it now supports Session History and Navigation, the W3C File API, classlist and the <time> element.

Finally, if you’re a Dragonfly fan, you’ll be pleased to hear that version 1.1 will be available shortly (please, please, please can we have CSS line numbers and links!)

Opera 11.5 builds on what was already a great browser. If you don’t have it installed, head over to Opera.com and become one of the many thousands featured on their live download counter.

What do you think of Opera 11.5?

Thumbnail

What’s interesting about the development platform for Windows Phone is that it is based on Silverlight, which, as most of us are aware, was first and foremost a web technology. As such Silverlight supports a navigation model that maps well to the way browsers work with the ability to navigate forward to new pages and back to previous pages. In this post you’ll learn how to carry out navigation tasks within your Windows Phone application. When you create a new application in Visual Studio or Expression Blend your project will contain a number of files which define a basic Windows Phone application, see Figure 1

See the original article here:
BuildMobile: Windows Phone 7 Navigation

WordPress menu

In my previous WordPress posts we discovered how to create a plugin, change the administration panel branding, and remove unnecessary dashboard widgets and meta boxes.

In this post, we’ll make some fundamental changes to the main administration menu. If you haven’t created an initial plugin, please read the first part. Welcome back — let’s begin…

The standard WordPress menu can be a little daunting — and third-party plugins often add further items. You can restrict user roles so clients do not see all menu items but, unless you’re using every WordPress feature, they’ll still see options which don’t apply to their site.

We’ll create a function which removes redundant links and simplifies the experience for your clients. Here’s the full code which you can copy into easy-admin.php:


// remove unnecessary menus
function remove_admin_menus() {
	global $menu, $submenu;
	// main menus removed for all users
	$restrict = explode(',', 'Links,Comments');
	// sub-menus removed for all users
	$restrictsub = explode(',', 'Categories,Post Tags');
	// main menus removed for everyone except administrators
	$restrict_user = explode(',', 'Media,Profile,Appearance,Plugins,Users,Tools,Settings');
	// sub-menus removed for everyone except administrators
	$restrictsub_user = explode(',', 'Updates,My Sites');
	// WP localization
	$f = create_function('$v,$i', 'return __($v);');
	array_walk($restrict, $f);
	if (!current_user_can('activate_plugins')) {
		array_walk($restrict_user, $f);
		$restrict = array_merge($restrict, $restrict_user);
		array_walk($restrictsub_user, $f);
		$restrictsub = array_merge($restrictsub, $restrictsub_user);
	}
	// remove menus
	end($menu);
	while (prev($menu)) {
		$k = key($menu);
		$v = explode(' ', $menu[$k][0]);
		if(in_array(is_null($v[0]) ? '' : $v[0] , $restrict)) unset($menu[$k]);
	}
	// remove sub-menus
	foreach ($submenu as $k => $p) {
		foreach($submenu[$k] as $j => $s) {
			if (in_array(is_null($s[0]) ? '' : $s[0] , $restrictsub)) unset($submenu[$k][$j]);
		}
	}
}
add_action('admin_menu', 'remove_admin_menus');

The lines at the top of this function determine which menu items are removed:

  • $restrict (line 5) contains a comma-delimited list of main menu items which will not be shown to any users — including administrators. In the example above, we’re hiding Links and Comments since they’re not used in our site.
  • $restrictsub (line 7) contains a comma-delimited list of sub-menu items which will not be shown to any user. We’ve disabled Categories and Post Tags which normally appear in the main Posts menu.
  • $restrict_user (line 9) contains a comma-delimited list of main menu items which are hidden to everyone except administrators. The example above disables everything other than the Dashboard, Pages and Posts. (Non-administrators would not normally see Appearance and Plugins, but other plugins could change that functionality).
  • $restrictsub_user (line 11) contains a comma-delimited list of sub-menu items which are hidden to everyone except administrators. We’ve disabled Updates and My Sites which normally appear within the main Dashboard menu.

simplified WordPress menu

If you don’t want any items removed for a specific value, set it to an empty array, e.g. $restrict = array();

The result is a far simpler administration menu which is free of dangerous options which could confuse your clients.

This is part three of an ongoing series. You may wish to read or review the previous sections on iOS Development Basics and iOS Apps with Tasty UI . As the series goes on, we’re going to develop an application called “Orny”.

See more here:
BuildMobile: An Interactive Orny

Thumbnail

When most people think about grids, they think about engineering and architecture. However, the grid is an essential tool for graphic design as well, and the use of grids in website design have exploded in popularity in the last few years. Using a grid is more than just about making elements on the page be square and line up: it’s about proportion as well. That’s where the theory comes into grid theory

More here:
DesignFestival: Grid Theory

Thumbnail

The role of search in your site can be a hot topic. Sometimes there is pressure to make it a giant bandage to cover poor navigational structure, and other times it’s included just because “every site needs search.” Let’s look at three pervasive myths about search and two questions that will help us create a strategy unique to every site. Misconceptions About Search Myth #1: Site Visitors Prefer to Find Information With Search Researchers have worked to combat this myth and have found that site visitors’ behavior does not naturally trend toward search first, even when searchers know exactly what they’re looking for.

See the original article here:
DesignFestival: Creating Meaningful Site Search by Challenging Assumptions

Thumbnail

This is an excerpt from the upcoming book “Build Mobile Websites and Apps for Smart Devices” by Earle Castledine , Myles Eftos and Max Wheeler . Over the coming weeks BuildMobile will exclusively publish a complete chapter from the book, the chapter on Mobile Web Apps. Enjoy.

More:
BuildMobile: Mobile Web Apps: Setting Up Shop