All posts by “Sani Halid”

z-index
November 4, 2014   |   Less than a minute reading time
comment 0

AtoZ: Z-index

One of the common challenges front-end developers face when working with web designs is having to stack or layer HTML elements on top of each other. With the z-index CSS properties, we can change the order elements get stacked. In AtoZ’s final episode for season one, Guy Routledge shares about:

  • The default stacking order of the document.
  • What a stacking context is and how they interact with each other.
  • How z-index controls layer order within the stacking contexts.
  • And a method he uses for standardizing z-index across a project.

Click on the button below to watch the video.

View More

Filed under: CSS

 

October 31, 2014   |   Less than a minute reading time
comment 0

Minions in Pure CSS

You guessed it right! We are talking about everyone’s favorite adorable mischievous little minions from Despicable Me drawn and animated using CSS3. Each character details like hair, eyes, mouth, clothes and limbs are divided into separate HTML elements and styled via pseudo-elements. This brilliant work was created by Amr Zakaria just for fun. Kudos! Check out the CSS minions by clicking on the button below.

View More

diagonal-scrolling
October 30, 2014   |   Less than a minute reading time
comment 0

Diagonal Scrolling Page

When standard vertical scrolling is too mainstream, let’s do it diagonally! Codepen user Gregor Adams came out with this experimental diagonal scrolling page demo using CSS3 and jQuery. The idea to build this diagonal scrolling page demo is taken from his own webpage and this demo version was created to make it more compatible with different nested markup.Experience the live website with diagonal scrolling or view the demo by clicking on the buttons below. It feels a bit unnatural to me but cool nonetheless.

View More   View Demo

web dev
October 29, 2014   |   Less than a minute reading time
comment 0

Google Chrome DevTools Trick and Tutorial Series

Chrome Developer Tools a.k.a DevTools is an essential component of any front-end developers’ arsenal. By mastering DevTools, you can substantially enhance your coding workflow and save time. If you are not yet familiar with DevTools, ‘fraid not, the folks at Six Revisions has compiled a series of tricks and tutorials covering many aspects of this amazing development tool. Pro users might want to check out the video by Google Web performance engineer, Ilya Grigorik showing you how to effectively use Chrome DevTools to analyze network performance, find memory leaks in your scripts, and much more.

View More

custom checkbox
October 29, 2014   |   Less than a minute reading time
comment 0

Create Custom Checkbox Using CSS3

When it comes to styling HTML checkboxes, our options are somewhat limited to the way browsers (and OS) render them and we may have to rely on bloated JS plugins to make things work across the board. That’s the old-school stuff. With CSS3 and some clever pseudo elements usage, you can create almost any kinds of fancy custom checkboxes as demonstrated by webdesigncrowd. In this demo, the HTML checkbox is hidden from view and all stylings are applied on the <label> taking advantage of its :before and :after pseudo elements to emulate a checkbox appearance with fancy transitions. Click here to view a similar demo.

View More   View Demo

Filed under: CSS

 

CSS Library
October 28, 2014   |   Less than a minute reading time
comment 0

Picnic CSS: CSS library

Picnic CSS is a CSS library containing pre-styled buttons, form, table, grids and nav created by Francisco Presencia. Picnic CSS is really handy when you are building a new website from scratch and want to speed up your styling time. It works by having most of the basic HTML elements already styled with minimal or no CSS classes. The author affectionately describes this feature as “invasive” for its tendency to mess with other CSS styling you may have. Luckily, in the Sass version there’s a flag that you can set to disable the “invasive” nature of the library.

View More   View Demo

Filed under: CSS

 

Grid System
October 27, 2014   |   Less than a minute reading time
comment 0

Sass-based Grid Systems

A solid grid system is essential in building a semantic and flexible website structure. One of the best grid systems I’ve been using for a while is Bootstrap. Many grid systems exist today; some are pure CSS and some has built-in JavaScript that allow web-developer to style a website instantly by calling the proper class names. For something more extensive, check out Sass-based grid systems that enables you to get the most out of advanced Sass features such as variables, mixins and nesting. View more to find out about the Sass-based grid systems.

View More

front-end developer
October 24, 2014   |   Less than a minute reading time
comment 0

Version 2: Tips and Guides for Front-End Developers

The weekend is perfect to wind down and to be spent in the pursuit of more knowledge in web design and development. Here’s one: After a number of nice feedbacks from his previous post, Louis Lazaris has shared another list of useful articles and guidelines for front-end developers, that you can go through at your own pace. Check them out by hitting the button below.

View More

jQuery plugins
October 23, 2014   |   Less than a minute reading time
comment 0

Collections of 30 jQuery Plugins

The folks at Speckyboy.com has been so kind to provide us with a collection of 30 freshest jQuery plugins from the past few months. The plugin collection caters everything from page layout and interaction, carousel, image gallery, social media sharing buttons, typography-related and many more that will surely enough to quench you thirst for jQuery plugins for many months to come. As a bonus, they even added a plugin for creating the universe! Make sure you bookmark this page. Something might be useful for your next projects.

View More