Bring Your Website to Life Using This Animate.css Tutorial

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

CSS3 animation is a great new feature of CSS3. With this feature, it is possible to animate transitions from one CSS style to another. The introduction of CSS keyframes rule made it possible to have intermediate waypoints along the way of animation.

Compiling all of the useful CSS animations in one CSS library is a great idea but may take some time. Good thing there is already a prebuilt library that compiles all good CSS animations.

Introducing Animate.css, a free prebuilt CSS library, created by Dan Eden. It is consist of over 50 amazing, cross-browser CSS animations that save you from writing a little more lines of CSS to animate elements on your site projects.

Today, we’re going to check how we can apply cool animations using  this Animate.css tutorial. You can feature this animation in a landing page. Let’s get started!

Bring Your Website to Life Using This Animate.css Tutorial Read More

Final Countdown: Adding a Countdown Timer on the Coming Soon Page

Posted in Coding, HTML & CSS, Tutorials • Posted on 5 Comments

A website that is not yet ready to be launched needs a “Coming Soon” Page to notify the visitors that it would be soon launched on a specific time frame. As the modern web development evolved, this page is more than just a simple text page or an under construction image.

Designing the “Coming Soon” page increases the level of expectation of the visitors, thus, giving them the thrill of what will be soon published on the site. Aside from the design, you can also collect information of interested users by inserting a “Notify Me” textbox and a “Subscription Button” on the page.

In today’s tutorial, we are going to create a coming soon page that has a countdown timer on it using jQuery Countdown plugin by Keith Wood

Final Countdown: Adding a Countdown Timer on the Coming Soon Page Read More

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

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

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

Learning LESS: A Comprehensive Introduction

Posted in Coding, Coding, HTML & CSS, Tutorials • Posted on 7 Comments

Now that we’re done talking about SASS let’s now talk about learning LESS. If you haven’t seen my SASS tutorial, I recommend you check it here. In our previous tutorial, we listed down the drawbacks of CSS and how pre-processed methods can improve your workflow. We also talked about how to implement SASS using variables, nested, mixins, functions and so on. So we’re ready to take another learning curve with another pre-process method which is LESS.

LESS in a Nutshell

LESS is a dynamic style sheet language that extends CSS and, just like SASS, it has dynamic behavior such as variables, mixins, operations and functions.

It allows you to write CSS in a simpler way by just using and combining mixins, functions, and so on. LESS also increases readability and organization of CSS using imports, nested rules and comments with .less extension.

Learning LESS: A Comprehensive Introduction Read More
54.167.173.250 - unknown - unknown - US