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.Read More
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.Read More
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.Read More
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.
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.Read More
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.Read More
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.Read More
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.Read More
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!Read More
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.Read More