W3Bits

The Correct way to Toggle Display with JavaScript

Fri, 08 Apr 2022 00:00:00 GMT

Exploring bugs in the traditional show/hide methods along with fixes to toggle display with JavaScript correctly at any given event.

CSS Flip Animation: Super SMOOTH 3d Flipping Cards

Tue, 02 Jun 2020 00:00:00 GMT

Easy-peasy CSS-only 3d Card flip Animation effect with three free, beautiful, downloadable mock-ups. No bootstrap required!

Create jQuery slideToggle in Pure Javascript

Wed, 27 Mar 2019 00:00:00 GMT

A detailed tutorial explaining the creation of pure JavaScript SlideToggle feature without any involvement of jQuery or any additional JS library.

The Correct Way to Center-align Web Layouts

Fri, 01 Mar 2019 00:00:00 GMT

A how to guide to center a website: the right and robust method to achieve centered layouts with no hacky stuff but just CSS.

Quick and Beautiful CSS Floating Labels for Input Fields

Sun, 30 Dec 2018 00:00:00 GMT

Use these smooth, interactive, ready-made pure CSS floating label (or placeholder) effects for HTML form elements.

Load Disqus on Click and Scroll Events

Fri, 28 Dec 2018 00:00:00 GMT

This guide is all about loading Disqus comments the right way based on the actions performed by the user. In other words, loading the comments on either...

A Guide to Create and Use SVG Sprites

Tue, 25 Dec 2018 00:00:00 GMT

Planning to switch to SVG for the graphic assets on your website? I guess SVG sprites is one of those things you should know then--which this guide is all...

Quickly Create Christmas Snowfall with Pure CSS

Mon, 24 Dec 2018 00:00:00 GMT

I was looking at some JavaScript-based snowfall effects on web when the idea of writing this article clicked my mind--doing Christmas snowfall effect in pure...

Left-to-right Masonry Layout using CSS Grid

Sun, 23 Dec 2018 00:00:00 GMT

Doing a masonry layout with CSS Grid module seems quite an interesting task. I’ve covered creating masonry with CSS columns and Flexbox, but this is going to...

Classic Sublime Text themes that still hold up in 2026

Thu, 20 Dec 2018 00:00:00 GMT

A handpicked collection of the best Sublime Text themes with quick image previews, short reviews, and download links.

CSS Sprites: Creating PNG Sprites and Using with CSS

Sat, 16 Jun 2018 00:00:00 GMT

Often times our designs carry elements like icons, image roll-overs, and decorated CTAs. CSS sprites come in very handy to achieve all those things.

A Quick Guide to CSS Attribute Selectors

Fri, 13 Apr 2018 00:00:00 GMT

Modern day CSS enhancements has made it pretty easy to play with the selectors. Before that, we didn't have that much control over selection in CSS, and had to...

Creating Holy Grail Layouts with CSS Flexbox

Wed, 15 Nov 2017 00:00:00 GMT

There was a time when creating and managing a holy grail layout "Holy grail layouts in Web design") used to be a pain in the head.

A Guide to Absolute Centering in CSS

Tue, 14 Nov 2017 00:00:00 GMT

Centering things in CSS has always been quite a task for the front-end developers.

CSS-only Responsive Dropdown Navigation Menu

Tue, 10 Oct 2017 00:00:00 GMT

Keeping dropdown navigation menus CSS-only is a tricky job. It's true that such menus are not touch-friendly in nature, but still, they are handy when you want...

Simple Masonry layouts with CSS Flexbox

Sun, 08 Oct 2017 00:00:00 GMT

CSS Flexbox module allows you to layout things more easily. In this post, I'm going to share an easy way to do a masonry layout with Flexbox.

Simple Responsive Tables with CSS

Fri, 22 Sep 2017 00:00:00 GMT

Tables are the only elements you need to fight hard for to make them adapt to screen resolution. We do have some excellent inventions on web to make our data...

Creating Pure CSS Equal-height Columns

Fri, 22 Sep 2017 00:00:00 GMT

A layout seems so incomplete, unplanned, and unprofessional without a grid plan. Not gonna talk about CSS grid framework in this post; but will be talking...

6 Tools to Compress, Optimize and Clean CSS online

Mon, 11 Sep 2017 00:00:00 GMT

Optimizing CSS is one of those common things that front-end developers deal with often. That optimization however may vary and completely dependent on nature...

CSS Hack: Disable Chrome's Pull-to-Refresh on Android

Thu, 07 Sep 2017 00:00:00 GMT

I was working on a small project for a friend lately. One of the needs of the project was to get rid of Google Chrome's Pull-to-refresh functionality on...

CSS-only Instagram-like Progress bar

Tue, 27 Jun 2017 00:00:00 GMT

Few days ago I noticed that cool multicolor, animated rainbow progress bar on Instagram Web for the first time. Obviously, I tried to create similar effect...

Quick and Simple Pop-up Modal with plain JavaScript

Sat, 27 May 2017 00:00:00 GMT

I stumbled upon a query somewhere about needing guidance to create a fancy, media-rich pop-up modal. On the same question page, I saw people recommending...

13 Must-have SASS Mixins for Web Designers

Mon, 18 May 2015 00:00:00 GMT

I've been using SASS for almost two years, and since when I started up with it, I've been using some cool mixins to automate certain things in my projects.

Touch-friendly Animated Hamburger Icons

Tue, 12 May 2015 00:00:00 GMT

In a previous article, I posted my interpretation of an animated navigation menu icon aka the Hamburger icon. It received a fair amount of appreciation from...

CSS-only Responsive Multi-level Navigation Menu

Wed, 17 Sep 2014 00:00:00 GMT

In today's world of Responsive Web design, people want every part of their website to look perfect on all the devices.

Techniques to clear floats in CSS

Fri, 12 Sep 2014 00:00:00 GMT

Using CSS floats is a common thing Web designers do to align different elements in the markup according to their design.

3d Earth with Rotating Animation with CSS

Fri, 12 Sep 2014 00:00:00 GMT

A friend of mine suggested me to do some animated planet stuff with CSS. I gave it a go and ended up with a kinda-cool animated planet Earth.

Creating a Simple Responsive Navigation menu with CSS

Wed, 10 Sep 2014 00:00:00 GMT

A dead-simple CSS-only navigation menu that adapts well to the screen size and can be customized to match your website's theme.

Wavy Preloader Animation with CSS

Thu, 04 Sep 2014 00:00:00 GMT

I've been watching people doing lots of cool preloader stuff with CSS nowadays. I decided to give it a go and came up with a wavy animation loader (kind-of)...

Quick n' Easy Spritesheet Animation with CSS

Wed, 03 Sep 2014 00:00:00 GMT

Ever thought of creating a CSS sprite animation without using JS at all?

Disable automatic paragraphs in WordPress posts

Tue, 02 Sep 2014 00:00:00 GMT

WordPress automatically adds paragraph tags (

) in the posts wherever it notices double line-breaks. For example, if you write one line and press the return...

Animated Hamburger Menu icon with Pure CSS

Mon, 01 Sep 2014 00:00:00 GMT

Designers nowadays experiment a lot with animations to give their designs cool effects.

Creating a search box like CSS-tricks.com

Wed, 27 Aug 2014 00:00:00 GMT

I'm a big fan of CSS-tricks. Its a Web design community website which has taught me several important CSS concepts and trickery from basic to advanced level.

Creating a CSS-only Responsive Image Carousel Slideshow

Tue, 26 Aug 2014 00:00:00 GMT

An Image slider is anything that helps you represet the content and images as creative galleries. Image and Content sliders are generally developed in...

Modern CSS Image Hover Effects with Performance Optimization

Mon, 25 Aug 2014 00:00:00 GMT

Adding CSS transitions like zooming on hover is not a big deal. Simply use the transition property, tune it to use the properties you’d like transitioned, and...

Setup Google Code Prettify on your Website

Mon, 25 Aug 2014 00:00:00 GMT

Syntax highlighting is one of the basic needs of websites that feature code. I'm using Google Code Prettify or Prettyprint to highlight code on this website.

Pixel Polyfill for REM Units (with SASS Mixin)

Wed, 13 Aug 2014 00:00:00 GMT

It is so common to see rem units over em and px nowadays in web design, which has been around since 2012.

The Box Sizing Reset in CSS

Thu, 24 Jul 2014 00:00:00 GMT

Sizing elements is crucial in front-end Web development. Talking about CSS, every now and then you need to size things up if you are into architecting web...

Find previous versions of WordPress plugins

Wed, 16 Jul 2014 00:00:00 GMT

WordPress plugins are version-based. You receive updates in your admin dashboard as soon as a new version update for a plugin is available.

Lazy loading JavaScript to improve site speed

Sun, 25 May 2014 00:00:00 GMT

The use of JavaScript is so common on web. Ranging from site functionality, visitor tracking, advertisement to social media assets, we can see JavaScript...

Build an XML Sitemap for your static website

Sun, 25 May 2014 00:00:00 GMT

Sitemaps are important - both for the visitors / readers of your website and search engines. For your readers' convenience of browsing your website, HTML...

Best WordPress Plugins to generate XML sitemap

Sun, 25 May 2014 00:00:00 GMT

An XML Sitemap provides you the way to let search engines crawl and index the new URLs on your website.

Convert colored images to Grayscale with CSS

Sat, 24 May 2014 00:00:00 GMT

Ever tried turning an image into grayscale in CSS? Can it be doable? Yes. With the help of filters.

Add Font Awesome to WordPress Navigation Menus

Thu, 22 May 2014 00:00:00 GMT

Icon fonts allow you to add resolution-independent, multicolor icons to your web design projects. There are many icon fonts out there available for free, but...

AJAX load Disqus comments on Scrolling down the page

Wed, 21 May 2014 00:00:00 GMT

In a previous post, we implemented loading Disqus on click event, when visitors don't see the comment box unless they click the "Load Comment" button.

Creating a Responsive Pure CSS Masonry Layout

Tue, 20 May 2014 00:00:00 GMT

The CSS-only way to create masonry layouts. Easy to understand, simple to implement. Demos included.

Pure CSS Rainbow text with Animation effects

Tue, 20 May 2014 00:00:00 GMT

Rainbow text with CSS is pretty easy thing to create while playing with some background properties.

Understanding the CSS Box Model

Mon, 19 May 2014 00:00:00 GMT

I didn't learn CSS systematically. First I started playing with colors and fonts, then I started building (those insane, red-green) 'table-based' layouts.

Set Up a Custom Domain with your Ghost blog

Mon, 19 May 2014 00:00:00 GMT

Ghost is the freshly introduced blogging platform on the web. It rolled out in October 2013 and was available to limited audience that time.

Add "Read More" link in Ghost Theme

Fri, 16 May 2014 00:00:00 GMT

Ghost themes have a clean, minimal interface. The home page in them generally carries list of posts in the typical blog fashion; wrapping in post titles, meta...

Using Custom Post Excerpt in Ghost Themes

Thu, 06 Mar 2014 00:00:00 GMT

Ghost Blogging Platform is available publicly now. Designers & developers have started creating stuff around it, most popularly the Ghost themes.

3 Beautiful Proxima Nova Alternative Google Fonts

Thu, 13 Feb 2014 00:00:00 GMT

Proxima Nova is one of the best-received fonts on the Web. Designed by Mark Simonson in 2005, it provides great readability and rendering on and off the Web.

20+ Awesome Resort & Restaurant Blogger Templates

Sat, 25 Jan 2014 00:00:00 GMT

Blogger blogging platform is used by millions of people around the web - many use it casually to post misc and personal stuff, but you may want to your Blogger...

Using Custom Post Excerpts in Ghost Themes

Fri, 24 Jan 2014 00:00:00 GMT

Ghost Blogging Platform is available publicly now, and developers have started programming stuff around it, most commonly, Ghost themes.

Add YouTube-like loading bar effect to your website

Fri, 24 Jan 2014 00:00:00 GMT

The dynamic in-site progress bar on YouTube is cool. It shows the loading animation in the header area till the video page loads completely in the browser...

Show Post thumbnails in a Ghost Theme

Sat, 18 Jan 2014 00:00:00 GMT

Web people are giving good response to the Ghost blogging platform. Availability of hundreds of free and premium ghost themes on the web confirms the start of...

Dribbble logo font in TTF, OTF and Web Font format

Sat, 21 Dec 2013 00:00:00 GMT

If you're searching for the Dribbble logo font for your projects, stop here - that logo is a custom design, which is carved out by the designers specifically...

AJAX Load Disqus comments on click event

Tue, 02 Jul 2013 00:00:00 GMT

If you're working in the direction to make your website fast-loading, you should also think on loading the comment section of your site on user demand...

AJAX submit WordPress comments without reloading page

Sun, 30 Jun 2013 00:00:00 GMT

Ever thought of allowing readers of your WordPress-powered site to submit comments effortlessly and instantly without reloading the page? If so, this guide...

Add Plugin Settings link to plugin page in WordPress

Thu, 20 Jun 2013 00:00:00 GMT

WordPress developers do many custom things with their plugins and themes above the basic functionality available at WordPress Codex.

Notify Web crawlers about the updated content with meta revised tag

Mon, 13 May 2013 00:00:00 GMT

Almost every webmaster knows about meta tags. There are different types of meta tags which are generally placed in the section of the markup of a...

Put last modified / last Updated date in WordPress

Mon, 13 May 2013 00:00:00 GMT

You might have noticed that some WordPress blogs show a last modified or last updated date in place of the published date on the posts or pages.

WordPress Revised Meta Tag Plugin

Mon, 13 May 2013 00:00:00 GMT

You can now add the revised meta tag information to your WordPress posts and pages with our Revised meta tag plugin available at the WordPress repository for...

Automatically set Featured Thumbnails to WordPress posts

Tue, 07 May 2013 00:00:00 GMT

WordPress featured thumbnails allow you to add a featured image to your posts. If your WordPress theme has this functionality, then you may set a featured...

A Guide to CSS3 Rounded Corners

Mon, 06 May 2013 00:00:00 GMT

CSS3 has bring a lot of new features and possibilities into web design. One of such features is the rounded corner support to the box.

Download Facebook logo Font (TTF, OTF and Web Font)

Mon, 06 May 2013 00:00:00 GMT

Facebook is one of the most popular Social Networks in the world, and so is it's logo. Everyone knows how Facebook logo looks like, it looks neat on the navy...

Download Pinterest Font (TTF, OTF & Web Font)

Mon, 06 May 2013 00:00:00 GMT

Pinterest has a cute logo. People want to know what font the designer guys at Pinterest used to carve it out. But the truth is that the Pinterest logo is not a...

Really simple Sticky Scroll with jQuery without using plugins

Mon, 06 May 2013 00:00:00 GMT

Sticky divisions on websites are used to drag attention of readers to a particular section. For example, you have a subscribe box that is floating down the...

Disable WYSIWYG Editor for WordPress Custom Post Types

Sun, 05 May 2013 00:00:00 GMT

There are times when developers want to hide the Visual or the WYSIWYG Editor from their Custom Post Types. If such is the case, add the following code in your...

Download Google Glass Font (TTF, OTF and Web Font)

Sun, 05 May 2013 00:00:00 GMT

Google Glass has become the hot property among people on web in the past few months. For those who are willing to start websites around Google Glass concept,...

Redirect to post if search results return only one post

Sun, 05 May 2013 00:00:00 GMT

Although WordPress traditional search doesn't provide search quality as good as Google Custom Search, however many WordPress users still use it, as it is the...

Remove version from WordPress enqueued CSS and JS

Fri, 26 Apr 2013 00:00:00 GMT

WordPress functions wpenqueuescript / wpregisterscript and wpenqueuestyle / wpregisterstyle add additional version info in the end of the JavaScript and CSS...

Add Google+ Comments on your Blogger blog

Mon, 22 Apr 2013 00:00:00 GMT

Google+ has rolled out it's commenting for blogspot or Blogger based blogs. From now, Blogger users can opt into using Google+ commenting system instead of...

10+ Best Mobile WordPress Themes

Thu, 18 Apr 2013 00:00:00 GMT

Since when Responsive Web design is into action, everybody want their websites look perfect on any device. And mostly, the mobile-friendly web design is in...

Break that frame with JavaScript Framekiller

Sat, 13 Apr 2013 00:00:00 GMT

HTML frames have the capability to show webpages as the sub-division of their parent webpage. Sometimes this ability of frames give advantage to external sites...

40+ Free Responsive WordPress Themes

Fri, 12 Apr 2013 00:00:00 GMT

A Responsive WordPress Theme enables your WordPress site to adapt according to different screen resolutions on different devices.

List of WordPress Keyboard Shortcuts

Fri, 12 Apr 2013 00:00:00 GMT

Keyboard shortcuts or hotkeys speed up the work on any platform. WordPress too has some handy keyboard shortcuts that can be helpful while composing a post.

Enabling Post Thumbnails in WordPress

Wed, 10 Apr 2013 00:00:00 GMT

WordPress post thumbnails or featured images can add more beauty and interactivity to a WordPress theme. If you have WordPress thumbnails enabled in your...

Make WordPress Shortcodes working in Widgets

Wed, 10 Apr 2013 00:00:00 GMT

WordPress Shortcodes allow users to add an inbuilt or plugin-driven functionality into their posts and pages without using PHP or any sort of coding.

Remove automatic dimensions from WordPress Image attachments

Wed, 27 Mar 2013 00:00:00 GMT

WordPress Thumbnail function when used in themes, automatically adds width and height attributes to the image attachments, which may create problems with a...

Completely Disable WordPress Search feature

Sat, 23 Mar 2013 00:00:00 GMT

The default WordPress search is the only thing that used to annoy me a lot and I wasn't using it on any of my WordPress sites.

Themify's Bold Theme 30% Discount Coupon!

Sat, 23 Mar 2013 00:00:00 GMT

Bold WordPress theme from Themify is an awesome Portfolio and personal blog theme. The theme is responsive in nature and provides the user a great number of...

Disable Hyperlinks in WordPress Comments

Tue, 19 Mar 2013 00:00:00 GMT

Have you came across that annoying moment, when a commenter starts posting unwanted and irrelevant links in comments that survive from Akismet spam filtering?...

MP6 Plugin to make WordPress Admin Interface more attractive

Tue, 19 Mar 2013 00:00:00 GMT

With every new version update, WordPress adds something new to it's features. Version-by-version you can notice the increasing power of this fabulous CMS...

Remove automatic or clickable links from WordPress comments

Fri, 15 Mar 2013 00:00:00 GMT

Whenever someone leaves a comment with a URL (eg. www.w3bits.com) on your WordPress site, it gets automatically converted to a clickable link.

20+ Stunning WordPress Photoblog Themes (Free + Paid)

Fri, 15 Mar 2013 00:00:00 GMT

Photoblog themes are a need to Photographers and photo bloggers to present and curate their photos, portfolio, and other content effectively.

Add rel="nofollow" to WordPress Categories

Thu, 14 Mar 2013 00:00:00 GMT

Webmasters curate their content differently. Some want their tags and categories crawled and followed by search engines, while some cease them from that.

Blogger Custom Redirects to redirect posts / pages to new ones

Mon, 21 Jan 2013 00:00:00 GMT

If you are a Blogger user, I want to discuss the two cases with context to Content management on Blogger.

Remove the default Gallery Style in WordPress

Mon, 21 Jan 2013 00:00:00 GMT

We want to customize a lot of things in our WordPress themes, and WordPress gallery style can be one of those. At first, it looks like to throw some CSS code...

Styling HTML5 Placeholder with CSS

Sat, 19 Jan 2013 00:00:00 GMT

Remember that JavaScript driven placeholder we used to create for the search fields on our sites and blogs? No? How could you, as we have HTML5 placeholder...

Add your own Smilies to WordPress

Fri, 18 Jan 2013 00:00:00 GMT

Everyone on internet knows about smilies or emoticons. Smilies basically add emotions and expressions to write-ups.

Redirect Google Image Search Traffic to your Website

Wed, 16 Jan 2013 00:00:00 GMT

Google Image Search is used by millions of users to search images daily, and websites that have frequent usage of images may receive good traffic from there.

W3Bits Pinterest Icon Set: Free Pinterest Icons

Fri, 10 Aug 2012 00:00:00 GMT

After receiving great response on WP Pinterest, we're back with one more Pinterest attraction for you, and that is free Pinterest Icons!

Change / Reset WordPress password using MySQL / PHPMyAdmin

Thu, 02 Aug 2012 00:00:00 GMT

Imagine someone somehow manages to break into your WordPress dashboard, and changes it's password and email. If you request a "Forget Password", the reset...

Add Breadcrumbs to Blogger / Blogspot blogs

Mon, 30 Jul 2012 00:00:00 GMT

Breadcrumbs or breadcrumb navigation on a website or blog helps users to navigate the content in a broader way, and they are on the site.

Add robots.txt to Blogger / Blogspot blogs

Mon, 30 Jul 2012 00:00:00 GMT

Using robots.txt on your website gives you the control to tell search engines which pages to crawl for indexing and which to skip.

Create a custom 404 page for Blogger / Blogspot blogs

Mon, 30 Jul 2012 00:00:00 GMT

Content Management Systems like WordPress, Joomla and Drupal allows you to create a custom 404 page for your website.

FIX: WordPress Conditionals is_single(), is_home() not working

Mon, 30 Jul 2012 00:00:00 GMT

If you're a WordPress developer or a DIY WordPress geek, you might have came across this problem when WordPress conditionals like issingle(), ishome(),...

Optimize your Blogger URLs with Custom Blogger Permalinks

Thu, 26 Jul 2012 00:00:00 GMT

Blogger has added a new feature that allows you to customize the permalinks or URL structure of your blog posts and pages.

Remove rel="category tag" attribute from WordPress categories

Sun, 22 Jul 2012 00:00:00 GMT

WordPress functions wplistcategories() and thecategory() render the list of categories and the related post categories respectively in a WordPress theme.

How to avoid Duplicate posts in WordPress loop (multiple loops)?

Sat, 21 Jul 2012 00:00:00 GMT

Have you experienced duplicate posts appearing on your WordPress blog? By duplicate posts, I mean - posts repeating again-and-again in the post index.

WP Pinterest - WordPress Plugin for Pinterest Integration

Thu, 19 Jul 2012 00:00:00 GMT

WP Pinterest WordPress plugin helps you to put Pinterest assets right on your WordPress site without hassle. In simple words, the plugin lets you place the...

Add a Pinterest Pin-it Button to Your Website

Mon, 13 Feb 2012 00:00:00 GMT

A Pin-it button on your website or blog helps the audience to pin your content to their Pinterest boards in no time.