Energize Your Static Website with This WordPress Conversion Tutorial (Part 2)

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

Help!

That’s the first reaction you might have if you are trying to figure out your WordPress conversion tasks, right?

Even if you are just a beginner and not really a web expert, you can definitely create a WordPress theme for as long as you know how WordPress works.

If you’ve been using WordPress as your website platform, chances are, you’re tired of using generic WordPress themes for your site. You might even think of just doing your own theme to have your preferred styles and features.

Customizing Your WordPress site

You can design your ideal site by creating a mockup in Photoshop and then convert the PSD file to HTML and CSS. Afterwards, you can then convert it to a fully functional WordPress theme.

Energize Your Static Website with This WordPress Conversion Tutorial (Part 2) Read More

Energize Your Static Website with This WordPress Conversion Tutorial (Part 1)

Posted in HTML & CSS, Tutorials, Web Design • Posted on 11 Comments

Web design and development are one of the most in-demand skills in last years. Agree?

As online business are grows, more and more clients are willing to pay large amounts of dollars for their sites to those with the right skill sets. You’ve probably have learned how to create an HTML and CSS website but, chances are, these sites won’t make any more sense for a big business or even blog site nowadays. This is the very reason why it’s important that there should be WordPress conversion of your site from HTML and CSS.

At first blush, there are a number of reasons why you would choose to have a static (HTML and CSS) website.

Why do people have static websites in the first place?

  • You want to make it easier to customize your site even if you are not a developer.
  • A static website is supported on almost every browsers.
Energize Your Static Website with This WordPress Conversion Tutorial (Part 1) Read More

Image Caption Animation with CSS3 Transform and Transitions

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

jQuery caption hover effects have been on the Web for a long time. There are plenty of jQuery libraries out there that can be used to obtain a cool and amazing image caption animation and hover effects.

That being said, it is now possible to do the same cool effects with CSS3 transitions and transform properties.

Today I want to show you how you can create cool animation hover effects with CSS3 animation. The images used in the demos were illustrated by Rudolph Musngi.

Image Caption Animation with CSS3 Transform and Transitions Read More

How to Create WordPress Widgets

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

WordPress widgets give you the ability to edit a certain part of your WordPress theme, usually on the sidebar. Using its drag-and-drop features, it’s really easy for beginners to add, customize or delete a widget.

Although there are a lot WordPress plugins available on the Web, the best way to get your exact desired output on the front end is coding it.

Coding WordPress widgets is just like coding a plugin but, this time, it’s more simple and easy. WordPress widgets provide user the options to fill out forms, include or exclude certain data information and some other features.

The order and placement is set by the WordPress theme in the functions.php file.

In today’s tutorial, learn how to create WordPress widgets by coding an Advertisement Banner  widget to display banners on your site. OK, let’s start.

How to Create WordPress Widgets Read More

Texturize It: How to Create Textured Text Using CSS

Posted in Coding, HTML & CSS, Tutorials • Posted on Leave a comment

Still remember the old days where in you are just starting out with Photoshop? You designed an image-based text and then just uploaded it on your website?

Instead of doing this with Photoshop, the good news is, it is now possible to create textured text using CSS3. Webkit now supports the background-clip CSS3 property that does exactly what Photoshop does.

Aside from that, you can also use the mask-image CSS property to do almost the same effect; however, this property clips the visible portion of an element according to the transparency of the mask images.

In today’s tutorial, you will learn how to apply these effects and create a cool textured text using CSS3 and HTML5.

Texturize It: How to Create Textured Text Using CSS Read More

Make Shapes with CSS: How to Create Different Shapes in CSS

Posted in Coding, HTML & CSS • Posted on 8 Comments

One of best cool features of CSS3 is that it reduces the use of images in web designs and allows you to create different shapes in CSS. Commonforms that you usually see in Photoshop or Illustrator can now be done using CSS3. New CSS properties like transform and border-radius add complexity with shapes instead of creating them in drawing applications.

In today’s tutorial, let’s create a simple list of the most common shapes that can be done using CSS3.

Make Shapes with CSS: How to Create Different Shapes in CSS Read More

How to Create a Registration Page Validation Using jQuery

Posted in Coding, HTML & CSS • Posted on 3 Comments

Registration page validation using jQuery ensures that the information provided by the user is correct so the user can fill out the complete online form easily with little amount of time.

Although HTML5 has a validation form feature and there are many of JavaScript plugins out there, you must carefully choose the best one that will work on old browsers as well as for your cross-browser functionality considerations.

In today’s tutorial, I will show you how to set up a front-end validation that will work on old browsers. I will also be using the jQuery plugin name Validator jQuery Plugin by Yair Even-Or. There is a live demo download package that you can check out. So let’s get started.

How to Create a Registration Page Validation Using jQuery Read More

Customize Your Anchor Link Tooltips Using This Tutorial

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

Tooltips, also referred to as ScreenTips, are a great way to show more information or messages that appears when a cursor is positioned over a hyperlink, icon, images or any other element. There are many ways to create anchor link tooltips.

The idea of tooltips came from older Microsoft applications like Microsoft Word. It had a toolbar where moving the mouse over the buttons displayed the tooltips.

In today’s tutorial, you will learn how to customize your tooltips using pure HTML and CSS3 using a span element. Let’s get started.

Customize Your Anchor Link Tooltips Using This Tutorial Read More

Shine Bright like a Diamond: How to Create CSS3 Diamond Grids

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

CSS has come a long way. Creating of shapes using CSS3 alone without the use of images was made possible with its new properties. This enables developers and designers to experiment and do more with this basic shapes.

Creating a diamond shape using CSS is cool but how about combining diamonds to create a grid? Today’s tutorial will show you how to do CSS3 diamond grids.

Shine Bright like a Diamond: How to Create CSS3 Diamond Grids Read More

How to Use CSS3 and Photoshop to Animate Objects

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

Back in the old days, animations with CSS is only limited to hovering effects. Thanks to the power of CSS3 animation, it is now possible to create amazing effects without the use of JavaScript plugins.

The introduction of CSS3 keyframes rule has increased the ability of CSS to create or animate objects in a  more advanced and amazing way. Using this rule, you can change the set of CSS styles many times.

In today’s tutorial, I am going to show you how to animate a giraffe vector character walking forward with the fences, clouds and background. Please take note that this is not an introductory tutorial for CSS3 animation. If you don’t know how CSS3 animation works, I suggest visiting this page.

How to Use CSS3 and Photoshop to Animate Objects Read More
54.163.84.199 - unknown - unknown - US