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

3 Flat Design Video Tutorials to Change Your Design Style

Posted in Quick Tips, Tutorials, Web Interface • Posted on 3 Comments

We truly live in a flat world! With iOS7, Android and even Windows Metro now adapting the flat design layout trend, the world has become a flatter place, indeed. Flat design video tutorials are a great help in the transition.

Website designs have followed the same pattern, transforming their sites to become easy-to-browse, colorful, responsive and simple. How is this made possible?

  • The use of larger and wider spacing
  • The use of simpler logos
  • The use of slightly desaturated colors
  • The use of thinner fonts

For starting and freelance web designers, it might be very difficult at first to learn the philosophy of flat design. Of course, you are born during the Skeumorphic Design Era, where all should be seemingly real and predominantly having 3D designs.

3 Flat Design Video Tutorials to Change Your Design Style 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

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

Posted in Coding, Coding, Tutorials, Tutorials, Web Interface • Posted on 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

Using Adobe Lightroom to Produce Amazing Photos for Your Website

Posted in Photo Effects, Photography, Quick Tips • Posted on

It may seem unimportant, but for a web designer, the ability to produce good-looking photos using Adobe Lightroom is an edge, particularly in attracting more clients. With the sudden influx of high-resolution and cheaper Digital Single-Lens Reflex (DSLR) cameras, photos are now becoming must-haves for websites.

Using Adobe Lightroom to Produce Amazing Photos for Your Website 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

CSS Best Practices to Follow and Bad Habits to Avoid

Posted in Quick Tips, Tips, Tutorials • Posted on 13 Comments

Creating a well-managed set of CSS codes can be a challenge. As technology evolves, it’s not really easy to say if you’re doing the right CSS practices or you’re just messing up the code and compromising the quality of your website on different browsers.

Through practice, you should be able to avoid CSS errors. So, to give you a guide on the dos and dont’s when writing CSS codes, we listed below the CSS best practices to follow as well as the bad habits to avoid. So, get ready and let’s get started.

CSS Best Practices to Follow and Bad Habits to Avoid Read More

Learning SASS: A Beginner’s Guide to SASS

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

How to Use UI Kits – Plus Free UI Kits to Choose From!

Posted in HowTos, Quick Tips, Tutorials, Web Interface, WordPress • Posted on 2 Comments

UI kits can be seen anywhere on the Web. But what is this UI kit thing? Do you know how to use UI kits? You can see a lot of resources with beautiful interface elements such as buttons, sliders, breadcrumbs, media players, forms and the likes. Perhaps it crossed your mind how these elements came to be.

Let me give you first a brief introduction about UI kits. A UI kit stands for “User Interface Kit”, which are PSD files that are composed of user interface elements. These come in a variety of colors, patterns and asl files that are being integrated on web and mobile designs. Though sometimes there are UI elements that are included on the package that you don’t think you will be using. That being said, UI kits will vary according to your web design needs. Usually the premium versions of UI kits come with a lot of user interface elements than the free ones.

Using UI kits is all about improving and speeding up the workflow without giving a lot of time thinking what to design. This allows you to focus more on the functionality and usability of the website you are working on.

How to Use UI Kits – Plus Free UI Kits to Choose From! Read More
54.92.236.20 - unknown - unknown - US