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

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials3 months ago • Written by 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, Tutorials4 months ago • Written by 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, Tutorials4 months ago • Written by 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, Tutorials5 months 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

Learning LESS: A Comprehensive Introduction

Posted in Coding, Coding, HTML & CSS, Tutorials5 months ago • Written by 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

Learning SASS: A Beginner’s Guide to SASS

Posted in Coding, Coding, HTML & CSS, Tutorials6 months ago • Written by 13 Comments

Writing a lot of CSS can be overwhelming that is why learning SASS and LESS can make  any web developer and designer’s life much easier. For a beginner, you might find it fine but as time goes by and your CSS skills are improving. You begin to wonder if there is a way so that you don’t need to repeat a lot of CSS codes in your style sheet. The good news is, there is one! Thanks to the CSS pre – processor, it’s now possible to write concise CSS codes without repeating each of them again and again. It is even formatted nicely. You can perform computations and do dynamic styling using these pre-processing methods. There are two pre-processing methods that I will tackle: SASS and LESS. For this tutorial I will talk about SASS first and then on a separate tutorial, I’ll talk about LESS.

Learning SASS: A Beginner’s Guide to SASS Read More

Simple Yet Important Cross-Browser Styling Tips Everyone Should Know

Posted in Coding, Coding, HTML & CSS, Tutorials6 months ago • Written by 7 Comments

Many have been searching for cross-browser styling tips that can help them solve their browser compatibility problems. After all, creating a website can be easy but developing one that looks the same on all browsers can be tough. For many years, browser compatibility is one of the hardest parts of web development.

Simple Yet Important Cross-Browser Styling Tips Everyone Should Know Read More

Jimmy Neutron and The Anatomy of the Atomic Design

Posted in HTML & CSS, Web Interfaces7 months ago • Written by 1 Comment

If Jimmy Neutron were real, could he become a pretty decent web designer? Of course, he would.  For starters, he knows the anatomy of the Atomic Design. He could be designing the best web pages you will ever see, and make your eyes shed blood out of extreme admiration of his designs. And you’ll probably wonder why he is that good.

Well, for one thing, Jimmy Neutron understands a fundamental yet commonly unappreciated principle in web design. He knows how to work on a very potent tool to his full advantage. Using this tool, he could easily design mock-ups and code them without difficulty.

Jimmy Neutron and The Anatomy of the Atomic Design Read More

How to Create a Scrolling Parallax Website

Posted in Coding, HTML & CSS, Tutorials8 months ago • Written by 31 Comments

Parallax websites are one of the latest and biggest trends on the web for some time now. If you want to impress your clients or implement immediate impact on your site, this is a good choice for you. In this tutorial, I’ll teach you how to create a simple but beautiful parallax website that will create an illusion of 3D depth to your site. It will surely catch your viewers’ attention. So let’s dig in.

How to Create a Scrolling Parallax Website Read More

10 Creative Loading Effects for Your Website

Posted in Coding, HTML & CSS8 months ago • Written by 13 Comments

People hate waiting. It is a fact that web designers and developers should accept. It has been quite a maxim that as designers, we shouldn’t make our viewers wait. This is because many people tend to get bored and choose a website that loads faster. And that, my friend, is a big no-no.

However, waiting is seemingly inevitable. Despite modern internet connection speeds, some browsers still take time to load web elements. So it becomes a need to make people still want to visit your website even if it takes a little bit of time when they load it. There are a lot of plausible solutions for this, and I have to say, that our topic for this article is one of these.

10 Creative Loading Effects for Your Website Read More
54.211.50.5 - unknown - unknown - US