An Easy Way of Building Responsive CV Websites

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials • Posted on 1 Comment

Resume websites a.k.a Curriculum vitae (CV) websites have been on the Internet over the years. The trend dictates that more and more people are into responsive CV websites.

These kinds of website provide information that makes it easy for employers to evaluate that particular person’s skills. This has a lot of advantages as you do not need to submit a paper version of your CV because it can already be accessed online anytime and anywhere.

Its purpose is to provide an overview of of the following:

  • Experience
  • Basic information
  • Portfolios

On today’s tutorial, we’re going to build a responsive CV website using CSS and a jQuery plugin called Easy Tabs Plugin, a lightweight jQuery plugin to provide full tab functionality.

An Easy Way of Building Responsive CV Websites Read More

Create Reflection Effect Using CSS3 and Reflection.js

Posted in Coding, Photo Effects, Tutorials, Tutorials • Posted on 2 Comments

One of the amazing effects you can do with today’s modern web design is to create an image reflection effect. However, creating an image reflection effect using CSS3 alone for your site can be time consuming. This might work for awhile; however, when you need modify the images on your site, you also need to change some parts of your CSS that may take some time to be done.

Another problem you might encounter is that it might not work on all browsers.
Good thing there is a new JavaScript utility called Reflection.js available for both jQuery and MooTools. This creates reflections for your site much easier and faster.

In today’s tutorial, I am going to show you how to create an image reflection effect with two versions. The first one is using CSS3 alone while in the second version, we will be using Reflection.js.

Ok let’s get started.

Create Reflection Effect Using CSS3 and Reflection.js Read More

Visualize Data Beautifully With Chart.js Library

Posted in Coding, HowTos, Tutorials, Tutorials • Posted on

Creating charts that look presentable can be a bit of a pain sometimes. Most often, web designers or developers use graphics to display data using Photoshop or Illustrator, which may take a lot time to be done.

Good thing, there are many available free JavaScript libraries online that web designers or developers can use to display data beautifully. The web designer or developer can then present data without creating graphics in Photoshop or Illustrator.

Chart.js library is one of the great online JavaScript libraries which builds data using HTML5 canvas element to draw graphs and charts, complete with documentation.

To see chart.js in action, we’re going to build the following charts using web programming languages as our labels with their fictional data.

Visualize Data Beautifully With Chart.js Library Read More

Typography Designs Using CSS3 and Lettering.js

Posted in Coding, HowTos, HTML & CSS, Tutorials • Posted on 2 Comments

Web typography has become even more popular on the Internet in recent years.  In the past, this was ignored, but with the different screens nowadays, this is an essential topic that should be dealt with. These days, with the options to use Web fonts like Google Fonts and Typekit, you can achieve cross-browser, stunning and high resolution web texts without worrying the screen sizes.

However, with all these available technologies, there’s a key ingredient missing for typographers: Kerning.

Kerning is the process of adjusting the spacing between characters in a proportional font. Thanks to the power of CSS3 and jQuery, it’s now possible to structure a well-designed typography with complete control of the text and animation quickly and easily.

Today, I’ll show you how to create stunning typography designs with CSS3 and a jQuery plugin called Lettering.js, a simple, lightweight, and easy-to-use jQuery plugin that gives complete control on web typography.

Typography Designs Using CSS3 and Lettering.js Read More

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

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials • Posted on 1 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, Tutorials • Posted on 6 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

Creating a Responsive Email Template

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials • Posted on 10 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, Tutorials • Posted on 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

How to Create Smooth CSS3 Animation Styles and Effects with Ease

Posted in Coding, HowTos, Tutorials, Tutorials, Web Interface • Posted on 14 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, Tutorials • Posted on 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
54.198.201.44 - unknown - unknown - US