All posts by “Sani Halid”

CSS Mask
February 16, 2015   |   Less than a minute reading time
comment 0

Create Beautiful Texture Using CSS Mask

CSS masking can be used to apply unique texture on your website elements like headings and buttons for identity or branding purposes, as demonstrated by Jeremy Frank in his blog post about his recent work for a PBS new series based on nature. Altogether, the effect is pretty simple to achieve with just two lines of code and the PNG-24 texture image. Here’s the code:

.grit {
 -webkit-mask-image: url("grit.png");
 mask-image: url("grit.png");
}

That’s it! However CSS mask is only supported in modern browsers. To learn more and see the demo, hit the buttons below.

View More   View Demo

Filed under: CSS

 

Shade
February 16, 2015   |   Less than a minute reading time
comment 0

Shade: Gradient Explorer Tool

Shade is a mathematically derived gradient explorer tool created by Brent Jackson that could be useful to frontend developers for quickly visualizing the kinds of gradient they have in mind. At the control panel section, you have the option to set base color via hex code and control the gradient spread by changing hue, saturation and lightness values using the slider controls. Shade will then auto-generate the CSS code based on the gradient settings like background-image: linear-gradient(-90deg, #FF0048, #30CFB2);. However, you don’t have control over the type of gradients and its directions. Hit the button below to try it out.

View More

pagerank
February 15, 2015   |   Less than a minute reading time
comments 4

Improve Website Ranking With This 5 SEO Tips

If you are wondering how to improve your website ranking in search engines, try this 5 SEO Tips by Andreas Hecht from noupe.com.

Tip 1: Internal Links

A good internal linking is very important as it allows search engines to crawl the website better. A great example would be Wikipedia.

Tip 2: Improve Your Content

Make sure your website have the best, relevant and updated content. Test your content from different perspectives especially as a visitor looking for specific and straightforward information.

Tip 3: Enhance the Click Rate in the Search Results

Take advantage of search engine extra features to boost your visibility in the search results page such as using Google Rich Snippets to highlight your entry.

Tip 4: Enhance Interaction

Not only the click rates but also the bounce rate and the time spent on the site are relevant indicators. Both indicators can be improved by increasing user interaction with your website by having good navigation and content structure, picture gallery or videos.

Tip 5: Loading Performance – All You Need Is Speed

The faster the information is loaded, the higher the chance visitors will continue browsing sub pages of your website and search engine crawlers notice this too. Caching and compression are the most common solution. If you are running a high-traffic website, a top tiered hosting plan is also crucial.

Hit the button below to read more.

View More

Sinousgame - A Games Created Using HTML5
February 14, 2015   |   Less than a minute reading time
comment 0

Sinuous – A HTML5 Game

Sinuous is a simple yet addictive game created using HTML5 by Hakim El Hattab. A game with a single objective: avoid colliding with the red dots. You can gain power-ups by picking up the the bigger non-red dots such as for slowing down the game speed and magnetic force field around your cursor. Do try this HTML5 game and see how many levels you can last!

Play Game!

Grid Displayer
February 13, 2015   |   Less than a minute reading time
comment 0

Grid Displayer for Bootstrap and Foundation

Grid Displayer is a bookmarklet that can be used to the display grid systems on Bootstrap or Foundation based websites. Grid Displayer is designed and built by Antoine Lefeuvre. To install this bookmarklet, simply drag the Grid Displayer button to your bookmark bar and open any Bootstrap or Foundation based websites. Hit the button below to get the Grid Displayer.

View More

snabbt.js - Minimalistic Javascript Animation Library
February 12, 2015   |   Less than a minute reading time
comment 0

snabbt.js – Minimalistic JavaScript Animation Library

snabbt.js is a minimalistic JavaScript animation library. It focuses on moving things around like translating, rotating, scaling, skewing and resizing your elements. The goal is to make a library that will let users make smooth animations without needing to know too much about browser rendering. However, there are a few limitations:

  • All transforms work on pixels or radians. Any unit conversion has to be done beforehand.
  • No arbitrary property animations, e.g. colors, padding, margin or line height animations.
  • For performance reasons, snabbt never queries the DOM. This means that in some cases you need to transforms yourself.(Specifically when using value feeding)
  • snabbt.js needs requestAnimationFrame and matrix3d to work, so no IE < 10

Hit the button below to learn more and view some demos on how snabbt.js works.

View More   View Demo

css3
February 11, 2015   |   Less than a minute reading time
comment 0

Twitter’s Animated Fav Button

Recently, Twitter has updated their fav button to an animated fav button. The key to producing this effect is by using CSS animation steps timing function. How it works? The general concept of this implementation is similar to zeotrope devices which display a sequence of illustrations showing progressive phases of that motion. In this demo by Donovan Hutchinson, the key frames are placed equally spaced in one line in a single image file, and we control it using transition from the first to the last frame by positioning the background. Hit the button below to learn more.

View More

Filed under: CSS

 

Highlight Table Row and Column
February 10, 2015   |   Less than a minute reading time
comment 0

Table Row and Column Highlighting Using CSS

Highlighting table rows on hover is pretty straightforward to do in CSS using tr:hover. Table columns on the other hand are somewhat tricky because columns don’t really have a parent container that you can target. Worry no more, Chris Coyier has came up with a fine CSS solution to this front-end developer conundrum by taking advantage of pseudo elements and negative z-index. With a dab of JavaScript the whole thing can be made to work on touch devices too. Hit the button below to learn more and view the table row and column highlighting demos.

View More   View Demo

Filed under: CSS

 

Simple.Timer
February 1, 2015   |   Less than a minute reading time
comment 0

JavaScript Countdown Timer using Simple.Timer jQuery plugin

Simple.Timer.js is an easy to use jQuery plugin to create a simple JavaScript countdown timer. To use it, just set the desired duration using either data-seconds-left or data-minutes-left data attributes and then start the timer with $('.timer').startTimer();. It also supports an onComplete event once the countdown has timed out.

<div class='timer' data-minutes-left='3'></div>
<div class='timer' data-seconds-left='180'></div>

$('.timer').startTimer();

If you are looking for a slightly more advanced countdown timer library, check out the standalone JS library by Robert Hashemian. It allows outputting the countdown in “XX Days, XX Hours, XX Minutes and XX Seconds left” format.

View More   View Demo