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

Posted in Coding, HTML & CSS3 days ago • Written by 5 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 & CSS1 week ago • Written by 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, Tutorials2 weeks ago • Written by 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, Tutorials3 weeks ago • Written by 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, Tutorials1 month ago • Written by 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

Bring Your Website to Life Using This Animate.css Tutorial

Posted in Coding, HTML & CSS, Tutorials1 month ago • Written by 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, Tutorials2 months ago • Written by 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, Tutorials2 months ago • Written by Leave a 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, Tutorials3 months ago • Written by 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
54.205.225.18 - unknown - unknown - US