Sam Norton

Role: Author

is a web, graphic and video enthusiast based in Angeles City, Philippines. Have a passion for designing detailed, creative and modern websites & graphics. He describes himself as a jolly, blessed and favored man.

Retina-fy: Creating High Density Retina Displays for Your Website

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials18 hours ago • Written by Leave a comment

High density retina displays or screens, like Apple’s Retina Display, have lots of pixels in a small space that it is almost impossible see the pixelation, thus, displaying smoother images and texts. Although Apple offered it first on the market, manufacturers have been releasing similar devices recently to compete with Apple.

When using Retina Display devices, you can see that other sites online appear blurry. This is because of the low-resolution images being stretched to fill the screen that makes the site look disgusting. A Retina Display scales 1px to 2px, making the size double.

Retina-fy: Creating High Density Retina Displays for Your Website Read More

Create a Sliding Navigation Menu in CSS3 and jQuery 4 Easy Steps

Posted in Coding, HTML & CSS, Tutorials3 days ago • Written by 2 Comments

There are many ways to create a navigation menu for the Web. One of the most popular navigation menus is the accordion look drop-down navigation that slides up and down, showing its sub-menus when toggled.

In this tutorial, we’re going to build a sliding navigation menu using CSS3, along with some jQuery codes to manage the sliding animation.

Let’s get started.

Create a Sliding Navigation Menu in CSS3 and jQuery 4 Easy Steps Read More

30 Stunning WebGL Examples and Demos in Action

Posted in 3D Effects, Inspiration, Showcase, Web Interfaces1 week ago • Written by Leave a comment

WebGL(Web Graphics Library) was released  on the Web early last year. Its ability to use HTML5 Canvas elements to generate graphics dynamically made it easy for web designers and developers to create smooth 2D and 3D effects. Here are some WebGL examples and demos you should look at.

WebGL is a branch of OpenGL based on OpenGL Embedded Systems (ES). It is a JavaScript API for drawing 2D and 3D graphics in a compatible web browser of an HTML5 canvas without the use of plugins.

This Javascript API is managed by the consortium of non-profit technology Khronos Group and work together with Mozilla Foundation. Since early 2009 they develop prototypes and deploy such technology.

30 Stunning WebGL Examples and Demos in Action Read More

Creating a Responsive Email Template

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials1 week ago • Written by 9 Comments

As smart phones and tablets have become popular, more and more people are have been reading their emails regularly on their small screen devices. According to Campaign Monitor, mobile surpassed web and desktop client usage last July 2012. As the mobile email usage grows, web developers and designer must consider optimizing the look of their email newsletters on phones and tablet.

Email clients such as Outlook (Windows), Mail (OSX), etc. use different HTML engines. Many have some rules and regulations. That being said, some CSS might work while some might not.

So, in making an email template, it is highly recommended to use a different approach. Many email clients completely remove the head and strip out styles while some support a limited set of inline and internal styles for formatting. To many, an old-school table layout is the best way to go.

Creating a Responsive Email Template Read More

Creating Shapes with SVG : An SVG Tutorial

Posted in Coding, Coding, Tutorials, Tutorials2 weeks ago • Written by 4 Comments

Have you tried using the SVG image format? Here is an SVG tutorial to help you delve deeper on how to use this image format to your full advantage.

In the past, the only image format that was supported by all browsers was the GIF, an image file developed by CompuServe. Then came the JPEG image file, which offered lousy compression without the loss of details, but the size is really small compared to the GIF file image.

After some time, the aim for advance 2-dimensional vector computer graphics on the Web came into being. With so much competing formats that were submitted to W3C, SVG was finally developed in 1999.

Creating Shapes with SVG : An SVG Tutorial Read More

Why Web Developers Should Learn Web Design

Posted in Inspiration, Tips, Web Design4 weeks ago • Written by 8 Comments

As a web developer, you are in charge of making the website do things. You are responsible for creating interactivity on the site, which may may include jQuery and Ajax validation forms, submitting forms to database, rollovers, sliding menus or many other aspects of the site that needs programming. But how about the website’s design?

In my previous article Why Being a Web Designer Who Codes Is Way Cooler, I talked about why web designers should learn how to code and its benefits.

For this article, I encourage developers to learn proper web design process and how this will benefit them.

Why Web Developers Should Learn Web Design Read More

How to Create Smooth CSS3 Animation Styles and Effects with Ease

Posted in Coding, HowTos, Tutorials, Tutorials, Web Interface1 month ago • Written by 12 Comments

With the newest capability of CSS3, transition from one style to another without using JavaScript or Flash becomes possible. It allows elements to change values over a specified duration, animating the property changes instead of having them static and leaving them dead. CSS3 animation styles and effects give your more freedom to create the design you want.

Today, I’m going to introduce to you different transitions and effects that can be done using only CSS3. So get ready and let’s rock!

How to Create Smooth CSS3 Animation Styles and Effects with Ease Read More

Bend and Set Text on a Circle Without Using Photoshop

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials1 month ago • Written by 5 Comments

When web designer creates pages, sometimes they want to set an element where they need to bend  or wrap texts inside a circle (e.g. for the site’s logo or title). Photoshop and some image editing software is often the go-to software for creating these images.

On the other hand, bending and setting text on a circle without using Photoshop gives flexibility to the design and value to the SEO since search engines can’t read texts in images.

This can be an easy task using Adobe Photoshop and Illustrator but setting text on web type using HTML and CSS might be a challenge. Thanks to the power of CSS3 and jQuery, this can be done.

Bend and Set Text on a Circle Without Using Photoshop Read More

How to Create a CSS3 Pop-Out Menu Without Learning Programming

Posted in Coding, Coding, Tutorials, Tutorials, Web Interface1 month ago • Written by 8 Comments

Modern websites offer a more complex hierarchy of navigation. This navigation sometimes makes user-experience on the website’s menu a bit confusing. Using a CSS3 pop-out menu makes it easier to find your way to what you want on the site quickly. Thanks to CSS3, animation is now possible.

Using CSS3, you can simply hide and unhide an element under other elements. This will not only simplify your code but also makes it  easily updated. This means you can now perform some sliding animation even without the knowledge of programming.

How to Create a CSS3 Pop-Out Menu Without Learning Programming Read More

Secret Ingredients to an Unforgettable User Experience

Posted in Tools, Web Design2 months ago • Written by 5 Comments

User experience (UX) is an important facet of website development, though, it is often neglected. The reason is that most web developers focus on the technical features of the site. However, when one forgets to build a website that is easy to navigate, the user tends to shift his or her attention to other websites and would not ever come back.

On the contrary, when a website is well-thought of, a favorable and long-term impression is created, together with the preference of your website over that of the competitor’s. It is in this reason why it is pertinent to plan and prepare the experience a user will have when they browse through your website.

Secret Ingredients to an Unforgettable User Experience Read More
54.237.134.62 - unknown - unknown - US