iPixel Creative - Singapore web design & web development company: May 2014

Saturday, May 31, 2014

Build Modals Using Pure CSS With CSS Modal

In web design, you need to have good content organization. This helps to give the users more readable and functional information. You can do this by building a neat and tidy layout on the website. To organize the content, there are many interface elements and structures you can use, and modal dialog is one of them.

If you’ve been creating modal dialog with jQuery or other plugins, we’ve got some good news for you. With CSS Modal library, you’ll only need pure CSS.

Hans Christian Reinl, the one who developed CSS Modal, has included a lot of advantages that come with it. Some of the advantages are that it can be used as a SASS plugin, there’s cross browser support, it’s optimized for mobile, it can be inserted with media (image, video and sound), and it’s small and fast.

Almost all modern browsers support CSS Modal. It has been tested on Chrome, Firefox, Safari 6, Opera 12, IE8, IE9+, Windows Phone 8, iOS 6 and Android. While it still has minor problems for Android 2.3 (scrolling being the biggest issue, at the time of writing), it still works well.

Recommended Reading: 50 Useful CSS Snippets Every Designer Should Have

HTML Markup

CSS Modal has three parts to work with: header, content and footer. The header is where you can put the title for the modal. The content is for displaying the important information you want to highlight. This part supports text, pictures and embedded code. As for the footer, you can add additional information here, such as a close button, an open new window button, etc.

To create a modal dialog, you should use the section tag and some predefined data-attributes, class and id. Inside the section tag, an element wrapped with .modal-inner class must be included. Here is the basic markup:

 <section class="semantic-content" id="modal-id" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true"> <div class="modal-inner"> <header id="modal-label"><!-- Header --></header> <div class="modal-content"><!-- The modals content --></div> <footer><!-- Footer --></footer> </div> <a href="#!" class="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">×</a> </section>

The id in the section tag is used for calling the modal from another function, by a link for example, and the value can be changed as required. a tag on the code, will be used as the modal close button. Attribute of the href should be left as shown above, as it will stop the page from scrolling to the top when clicked.

The header and footer are optional parts, which you may (or may not) include. But please keep in mind, if you use a header, you must add in a unique ID name and change the aria-labelledby attribute to the same value.

Don’t forget to include the CSS Modal library, which you can download from its GitHub page, to your project.

 <head> .. <link rel="stylesheet" href="css/modal.css"> .. </head>

Additional Javascript

There are still some issues when you use CSS Modal with pure CSS, such as:

Issues with IE 8 compatibility

Keyboard Escape button to exit

Scrolling background prevention

Focus effect to the modal and back to page after closing it

So to fix those problems, javascript is still needed here. Fortunately, CSS Modal has provided you with a lightweight javascript source code for your convenience. Include this code before your closing body tag.

 <script type="text/javascript" src='js/modal.js'></script>

Final Thought

Creating modal with pure CSS still has some drawbacks, but it can become an alternate tool to further enrich your website. And you probably want to try something slightly different. With a little creativity, you could make some pretty awesome modals. Give it a shot.

Build Modals Using Pure CSS With CSS Modal

[Giveaway] Win $1000 Worth of PSD to Code Services By ReliablePSD

Need to get PSD files converted to code? Well, you’re in luck. In this giveaway, we are looking to give away 00 worth of PSD to code services by ReliablePSD.com.

ReliablePSD.com is the first ever PSD to Code company run by graphic designers for graphic designers. They expanded on the PSD to Code process to make it how it should be: stress-free and awesome.

Reliable offers PSD to HTML5, WordPress, Responsive, E-Commerce, JavaScript / JQuery, and more. All completed coding will be reviewed by an expert designer before it’s sent back to you, ensuring it perfectly matches your PSD. They pride themselves on awesome turnaround time, high quality work, and super friendly customer support.

The Prizes

We are looking for 3 winners to take home 3 prizes:

1st Prize: 0 worth of Reliable’s services

2nd Prize: 0 worth of Reliable’s services

3rd Prize: 0 worth of Reliable’s services

How To Win

Using the Rafflecopter widget below:

Like Us on Facebook (if you aren’t already a fan).

a Rafflecopter giveaway

[Giveaway] Win $1000 Worth of PSD to Code Services By ReliablePSD

Apply Smooth Zoom Effect To Images With Zoomer

There’s a quote that goes, “a picture is worth a thousand words.” In web design, it becomes even more relevant. Especially when it’s about showcasing products, like in an e-commerce site for example. People need to get a clear grasp and be able to look at the product in a visual manner before they make a purchase after all.

Making the image as large as possible can’t solve this problem, as it will also take a huge amount of available space. Therefore the best choice is to make the image zoomable. With Zoomer you can make that happen with ease.

Zoomer is a free javascript library that enables your image to be zoomable. When it’s enabled, it will add its own style and a button for zooming in and out. It also supports multiple images, which will automatically be turned into an image gallery.

Recommended Reading: JPEG Optimization For The Web – Ultimate Guide

Initialization

Before initializing it, first include the Zoomer script (which you can get from GitHub page) into your project like so:

 <script src="js/jquery.fs.zoomer.js" type="text/javascript"></script>

Zoomer will surround the image with its style and add a zooming in and out button. You should include the Zoomer stylesheet before the closing tag of head as well.

 <head> .. <link href="css/jquery.fs.zoomer.css" rel="stylesheet" type="text/css"> .. </head>

Zooming In And Out

To create a new Zoomer, easily include an image inside a wrapper. Don’t forget to give the wrapper fixed height and width as all available space will be filled by the new markup. For instance, I create a wrapper with the name of .zoomable and define the height to 500px and the width to 100% like so:

 .zoomable height: 500px; width: 100%;

Then I wrap the image I want to make zoomable, as per below:

 <div class="zoomable"> <img src="img/image-demo.jpg" /> </div>

The plugin will resize the image until some empty space for the wrapper is available. And if you add more images inside the wrapper, the plugin will automatically detect it then build its own gallery with a pagination button.

So, is the image zoomable? Not yet. We still need to call the plugin and include the class we’ve just created inside it:

 $(".zoomable").zoomer();

It’s done! The image is zoomable now.

Giving Options

If you not satisfied with the button, the background, the zooming increment etc, you can customize it by adding a small javascript snippet. Just put it into the plugin script like so.

 $(".zoomable").zoomer( customClass: "custom", increment: 0.05 )

The customClass option can replace the background wrapper of the plugin while increment can be used to increase the degree of your zooming, and whether it is "smooth" or "rough".

You can also handle a really large image that has been sliced into equal tiles with Zoomer. To do this, you must pass the tiles when initializing the plugin with source. Give it a thumbnail then declare all the sliced image sources using the following snippet:

 $(".zoomable").zoomer( source: thumbnail: "img/thumbnail.jpg", tiles: [ ["img/01-01.jpg", "img/01-02.jpg", "img/01-03.jpg"], ["img/02-01.jpg", "img/02-02.jpg", "img/02-03.jpg"], ["img/03-01.jpg", "img/03-02.jpg", "img/03-03.jpg"] ] );

In the HTML code, just call the wrapper without the img source like so:

 <div class="zoomable"> </div>

There are still plenty of other options and methods available in Zoomer. Check out their doc page for more details on this.

Final Thought

Images can give users more detailed representation. There are many ways to display images to be as detailed as possible, such as applying a lightbox or hover zoom. Zoomer gives you an additional option to do this. If you have any other ways, share it with us in the comment box below.

Apply Smooth Zoom Effect To Images With Zoomer

Validate Form Inputs Easily On Any Browser With Validatr

Dealing with forms on the Web can be real interesting. You can do a lot of customisation in web design Singapore, on the label and even on the authentication. With a lot of new features available in HTML5, Jay Morrow created Validatr which rely on the new HTML5 input attributes to perform easy and automatic form validation.

Validatr is a cross-browser free jQuery plugin. It will automatically wrap the form border in red if the user inputs an invalid value. It also can do lot of input validation like email, number, url, range, color inputs and date.

Custom error messages are also available with various choices using HTML5 data attributes. You may customize the error message element with your own CSS, and the plugin has some pretty good CSS styles.

Basic Guide

To use Validatr, Include the latest jQuery and also the Validatr script in your project.

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="js/validatr.js" type="text/javascript"></script>

Then call the plugin with the following snippet:

 <script> jQuery(function ($) $('form').validatr(); ); </script>

The plugin will recognize the form element to apply changes.

HTML Markup

As mentioned, Validatr utilizes the input element to work. The element is wrapped inside the form tag. The input element will handle all different form types and settings using HTML5 data-attribute.

For example, when you want to create number form, just add type="number" into the input and some additional requirements e.g. limiting the min and max number. If the users are not allowed to leave the form blank, just add the required attribute.

The following is a basic implementation example:

 <form action="./"> <label for="number">Number</label> <div> <input type="number" id='number' step=2 min=1 max=11 name="number" required> <input type="submit" value="Submit"> </div> </form>

The step attribute is used for value increments when the user clicks the increase or decrease arrow in the form, starting within the defined min number or 0. If the value is set to “0″, this means it uses default increment or increased only one point (the value must be a positive number).

And here’s the result when a user inputs an invalid value or out of range number. Our example uses 2 for the step which means starting from 1, the only numbers that are valid, have an increment of 2, that is: 3, 5, 7 and so on. The max value is 11.

For a complete list of other input types and attribute documentation, please head over to the Validatr page.

Validate Form Inputs Easily On Any Browser With Validatr

25 Websites To Download Free STL Models For 3D Printers

3D printers are going mainstream, as more consumers warm up to and adopt the idea of 3D printing. The Micro, for example, is a Kickstarter project for a 3D printer for consumers. It was funded in mere minutes. But you can’t start printing once you get your printer. You will need to get the materials and more importantly the blueprint to printout your product.

If 3D modelling sounds difficult to you, fret not, the Web is filled with sites that offer users free 3D models to print on their printers free of charge. In this post, we’ve compiled 25 websites that you can use to search and download free STL models for 3D printers. Hopefully you will be able to find what you are looking for in these spots.

Recommended Reading: 10 Things You Need To Know Before Buying A 3D Printer

Thingiverse

Thingiverse is a website operated by MakerBot Industries, the creators of the popular Replicator series of 3D printers. The website allows users to upload and share 3D model files to be used on 3D printers. The site is extremely popular and has a large community of people uploading files of varying categories, so if you’re looking for cool things to print, Thingiverse is the site to visit.

Saturday, May 31, 2014

Build Modals Using Pure CSS With CSS Modal

HTML Markup

Additional Javascript

Final Thought

[Giveaway] Win $1000 Worth of PSD to Code Services By ReliablePSD

The Prizes

How To Win

Apply Smooth Zoom Effect To Images With Zoomer

Initialization

Zooming In And Out

Giving Options

Final Thought

Validate Form Inputs Easily On Any Browser With Validatr

Basic Guide

HTML Markup

25 Websites To Download Free STL Models For 3D Printers

Thingiverse

YouMagine

Cubify

My Mini Factory

GrabCAD

DEFCAD

Autodesk 123D

3DVIA

Cubehero

Bld3r

Sproutform

Shapeways

Instructables

Cults

Pinshape

RascomRas

Repables

ShapeDo

3D Hacker

Fabster

Fabribles

CGTrader

Google Custom Search

Yeggi

3dbility