Yuba Mundo Customiser

This week we whipped up a little online product customiser.

The Yuba Mundo Customiser was made to help customers of cargocycles find out quickly and easily how much their complete Yuba package would cost, they can also send there Yuba and accessories to their email account as a reference.

This little customiser was made using HTML, CSS3, jQuery and PHP to send the email and fetch the products. jQuery handles most of the hard work and CSS3 transitions help to provide some smooth transitions.

Simple, Purely CSS3 Buttons

CSS buttons in web design is not a new thing, but by using CSS3 properties like gradients, box shadows, text shadows, transitions and even animations we can make rich buttons with plain CSS.

Below are a few really simply CSS buttons, these buttons are best viewed in Firefox, Chrome and Safari and the animation in Button Two only works in Firefox. The CSS for each of these buttons is below the only HTML needed is the addition of one class to your button (span, div, a, and so on), i.e. add a class of button-one to your anchor link and that's it. Feel free to use them on your own site.

Button One CSS

.button-one {
    background: #15668C; /* Old browsers */
    background: -moz-linear-gradient(top, #15668C 0%, #072838 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#15668C), color-stop(100%,#072838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #15668C 0%,#072838 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #15668C 0%,#072838 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #15668C 0%,#072838 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15668C', endColorstr='#072838',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #15668C 0%,#072838 100%); /* W3C */
    color: #fff;
    padding: 0.3em 0.8em;
    border: 1px solid #137199;
    box-shadow: 0px 2px 2px rgba(0,0,0,1), 1px 0px 1px rgba(0,0,0,0.5) inset, -2px 2px 1px rgba(255,255,255,0.2) inset;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    font-size: 25px;
    border-radius: 8px;
    font-weight: bold;
    -moz-transition: box-shadow 0.2s ease; 
    -o-transition: box-shadow 0.2s ease;
    -webkit-transition: box-shadow 0.2s ease;
    -ms-transition: box-shadow 0.2s ease;
    transition: box-shadow 0.2s ease;
}
.button-one:hover {
    background: #1B739B; /* Old browsers */
    background: -moz-linear-gradient(top, #1B739B 0%, #072838 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1B739B), color-stop(100%,#072838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1B739B 0%,#072838 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1B739B 0%,#072838 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #1B739B 0%,#072838 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1B739B', endColorstr='#072838',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #1B739B 0%,#072838 100%); /* W3C */
    box-shadow: 0px 2px 3px rgba(0,0,0,1), 1px 0px 1px rgba(0,0,0,0.4) inset, -2px 2px 1px rgba(255,255,255,0.3) inset;
}
.button-one:active {
    box-shadow: 0 1px 1px #000000, 1px 0 1px rgba(0, 0, 0, 0.6) inset, -2px 2px 1px rgba(255, 255, 255, 0.5) inset;
}

Button Two CSS

.button-two {
    position: relative;
    background: #910000; /* Old browsers */
    background: -moz-linear-gradient(top, #910000 0%, #700000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#910000), color-stop(100%,#700000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #910000 0%,#700000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #910000 0%,#700000 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #910000 0%,#700000 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910000', endColorstr='#700000',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #910000 0%,#700000 100%); /* W3C */
    border: 1px solid #A30000;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 2px 2px #000000, 1px 0 1px rgba(0, 0, 0, 0.5) inset, -2px 2px 1px rgba(255, 255, 255, 0.2) inset;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    padding: 0.3em 0.8em 0.3em 1.8em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    -moz-transition: box-shadow 0.2s ease; 
    -o-transition: box-shadow 0.2s ease;
    -webkit-transition: box-shadow 0.2s ease;
    -ms-transition: box-shadow 0.2s ease;
    transition: box-shadow 0.2s ease;
}
.button-two:before {
    content: "\2605";
    position: absolute;
    left: 0.3em;
    top: 0.3em;
    position: absolute;
}
.button-two:hover {
    background: #AD0000; /* Old browsers */
    background: -moz-linear-gradient(top, #AD0000 0%, #700000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AD0000), color-stop(100%,#700000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #AD0000 0%,#700000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #AD0000 0%,#700000 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #AD0000 0%,#700000 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AD0000', endColorstr='#700000',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #AD0000 0%,#700000 100%); /* W3C */
    box-shadow: 0px 2px 3px rgba(0,0,0,1), 1px 0px 1px rgba(0,0,0,0.4) inset, -2px 2px 1px rgba(255,255,255,0.3) inset;
}
.button-two:hover:before {
    -moz-animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { -moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0px); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { -webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px); }
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { -ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0px); }
}
@keyframes spin {
    from { transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { transform: rotate(360deg) scale(1) skew(0deg) translate(0px); }
}
.button-two:active {
    box-shadow: 0 1px 1px #000000, 1px 0 1px rgba(0, 0, 0, 0.6) inset, -2px 2px 1px rgba(255, 255, 255, 0.5) inset;
}

Button Three CSS

.button-three {
    position:relative;
    background: #7FBF00; /* Old browsers */
    background: -moz-linear-gradient(top, #7FBF00 0%, #588400 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7FBF00), color-stop(100%,#588400)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7FBF00 0%,#588400 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7FBF00 0%,#588400 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #7FBF00 0%,#588400 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7FBF00', endColorstr='#588400',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #7FBF00 0%,#588400 100%); /* W3C */
    border: 1px solid #84C600;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 2px 2px #000000, 1px 0 1px rgba(0, 0, 0, 0.5) inset, -2px 2px 1px rgba(255, 255, 255, 0.2) inset;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    padding: 0.3em 0.8em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   -moz-transition: box-shadow 0.2s ease; 
    -o-transition: box-shadow 0.2s ease;
    -webkit-transition: box-shadow 0.2s ease;
    -ms-transition: box-shadow 0.2s ease;
    transition: box-shadow 0.2s ease;
}
.button-three:before {
    content: "for more information";
    position: absolute;
    top: -2em;
    width: 100%;
    left: 0;
    text-align: center;
    background: #eee;
    color: #444;
    text-shadow: 1px 1px 1px #fff;
    font-size: 16px;
    font-weight: normal;
    border-top: 1px solid #dfdfdf;
}
.button-three:after {
    content: "";
    border-top: 5px solid #ededed;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    left: 48%;
    top: -27%;
}
.button-three:hover {
    background: #89CE00; /* Old browsers */
    background: -moz-linear-gradient(top, #89CE00 0%, #588400 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#89CE00), color-stop(100%,#588400)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #89CE00 0%,#588400 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #89CE00 0%,#588400 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #89CE00 0%,#588400 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89CE00', endColorstr='#588400',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #89CE00 0%,#588400 100%); /* W3C */
    box-shadow: 0px 2px 3px rgba(0,0,0,1), 1px 0px 1px rgba(0,0,0,0.4) inset, -2px 2px 1px rgba(255,255,255,0.3) inset;
}
.button-three:active {
    box-shadow: 0 1px 1px #000000, 1px 0 1px rgba(0, 0, 0, 0.6) inset, -2px 2px 1px rgba(255, 255, 255, 0.5) inset;
}

Button Four CSS

.button-four {
    position:relative;
    background: #CECECE; /* Old browsers */
    background: -moz-linear-gradient(top, #CECECE 0%, #999999 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CECECE), color-stop(100%,#999999)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #CECECE 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #CECECE 0%,#999999 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #CECECE 0%,#999999 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CECECE', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #CECECE 0%,#999999 100%); /* W3C */
    color: #fff;
    padding: 0.3em 0.8em;
    border: 1px solid #c5c5c5;
    box-shadow: 0px 2px 2px rgba(0,0,0,1), 1px 0px 1px rgba(0,0,0,0.5) inset, -2px 2px 1px rgba(255,255,255,0.2) inset;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    font-size: 25px;
    border-radius: 8px;
    font-weight: bold;
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.button-four:before {
    content: "\2714";
    position: absolute;
    font-weight: normal;
    left: 0.4em;
    color: #444;
    text-shadow: 1px 1px 1px #FFFFFF;
    top: 0.3em;
    width: 0;
    display: none;
}
.button-four:hover {
    background: #dfdfdf; /* Old browsers */
    background: -moz-linear-gradient(top, #dfdfdf 0%, #999999 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#999999)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dfdfdf 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dfdfdf 0%,#999999 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #dfdfdf 0%,#999999 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #dfdfdf 0%,#999999 100%); /* W3C */
    box-shadow: 0px 2px 3px rgba(0,0,0,1), 1px 0px 1px rgba(0,0,0,0.4) inset, -2px 2px 1px rgba(255,255,255,0.3) inset;
    color: #333;
    text-shadow: 1px 1px 1px #fff;
    padding-left: 1.5em;
}
.button-four:hover:before {
    display: block;
}
.button-four:active {
    box-shadow: 0 1px 1px #000000, 1px 0 1px rgba(0, 0, 0, 0.6) inset, -2px 2px 1px rgba(255, 255, 255, 0.5) inset;
}

Web Design in Joomla or Wordpress?

Have you ever wanted to get a website up and running relatively quickly, while still wanting to have an easily extensible website built upon a solid, tested and community supported framework. If you have then you've surely come across Joomla and Wordpress, but which one should you use?. Choosing the right platform for your website can be quite tricky, and unfortunately there is no simple solution. There are many factors that need to be considered before choosing Joomla or Wordpress for your web design and development project. Sometimes neither will be appropriate and you may need to custom develop a website from scratch.

Below is a very basic table outlining the kinds of projects each platform (joomla and wordpress) can be suited for, this is by no means a definitive guide it's just a quick reference, there will be many other factors you need to consider before making your final decision. For instance you'll need to consider design requerments, user requirements and any future requirements you may have for your website, you'll also need to test and research the best components and plugins for each platform.

Also it should be noted that if, for instance wordpress or joomla doesn't have a tick for a certain project type this doesn't necessarily mean you can't use that platform for that kind of project it merely means the other platform with the tick is better suited for that project type.

Shopping Cart / Ecommerce website	Shopping Cart / Ecommerce website
Community / Membership based website	Community / Membership based website
Porfolio website	Porfolio website
Intranets and Extranets	Intranets and Extranets
Forum	Forum
Blog	Blog
Mobile	Mobile (plugin)

If you would like some professional assistance in deciding which platform or even if a platform is ideal for your website you can contact us for a chat, or if your located in and around Melbourne feel free to drop into our Collingwood studio.

Website Typography

Gone are the days when web developers could only use flash or image graphics to add fancy or intriguing fonts to websites. You can still do this is you wish using flash based font replacement techniques like sIFR but there are other alternatives available to the modern web designer.

So what alternatives are there? Well for one there's Cufon, Cufon uses the HTML5 canvas element to correctly render text. Another alternative and the easiest way to implement custom fonts is by using the CSS @font-face rule. To use @font-face you need to download the font you wish to use then include the path to your font in your css file. You will need several different versions of your font to be compatible with the different browsers. The formats you'll most likely need are TTF, EOT, WOFF and SVG. One great site for finding font's is fontsquirrel, they also have @font-face generator that can convert your fonts to the different required formats. To add your font to your style sheet you need to including the font and then use that font like so:

Including your font:

@font-face {
    font-family: 'SansationRegular';
    src: url('Sansation_Regular-webfont.eot');
    src: url('Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Sansation_Regular-webfont.woff') format('woff'),
         url('Sansation_Regular-webfont.ttf') format('truetype'),
         url('Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Calling your font:

#headline {
	font-family: 'SansationRegular', helvetica, sans-serif;
}
 

If you have any experience with CSS using @font-face will be a piece of cake.

Another element of web typography is of course the actually styling of the text, one fun way to style text is to use the CSS text-shadow rule. Below are a couple of examples of a custom font loaded using the @font-face rule and styled using text-shadow (as well as the normal font-size, font-weight and so on).

*Note: While text-shadow is super cool and works in all modern browsers, it still doesn't work in Internet Explorer.

Styled Custom Font 1

Styled Custom Font 2

Last Christmas we decided to send out a Christmas card to all of our great clients. We didn't want to do the old fashioned cardboard card in the mail, and being a web design company we figured it should be a web based card, so we whipped up an interactive, online Christmas card.

Click the image below to check it out!

There are several methods for animation in web design, a few of the more prominent methods include flash, css3, and javascript (canvas, webgl).
Here I just want to show you a great example of each:

Flash

While flash has fallen out of favor over recent years it is still an incredibly powerful animation tool, and in some cases it is the only animation method that can get the job done. Check out the FWA website for many examples of flash on the web.

CSS3

CSS3 animations are still relatively new, currently only the latest Firefox and Webkit browsers support CSS3 animations. Here is an example of a animated stick man skating which was created purely with CSS.

Javascript - Canvas

The HTML5 Canvas element is fairly well supported, it works in pretty much all modern browsers (note, it is not supported by ie8 and down). Here is a beautiful example of what happens when Canvas is use to create art.

Javascript - WebGL

WebGL brings 3D graphics to the Web, it is currently support by Firefox 4.0 and up, Chrome, Safari nighty build, and Opera 11 preview build. To see an amazing example of WebGL in action check out the Rome project.