Skip to content

Instantly share code, notes, and snippets.

View Shaz3e's full-sized avatar

Shahrukh A. Khan Shaz3e

View GitHub Profile
Shaz3e / Useful :nth-child Recipes
Last active December 31, 2015 14:59
I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have! In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to…
<link href='' rel='stylesheet' type='text/css'>
<h2>Useful :nth-child Recipes <small>with lESS</small></h2>
<div class="s3-containers s3-container1">
<h2>Select Only the Fifth Element</h2>
<div clss="s3-relative">
<div class="s3-absolute">
The centered absolute div under relative div
Shaz3e / Full Page Background Image
Created December 17, 2013 12:40
With this trick you can use full page background image
<div class="s3-shaz3e">
An Example for
Shaz3e / Simple example for LESS
Created December 17, 2013 12:41
A simple example for implementing less which is really more...
<div class="s3-div">
<h1>Less CSS Example</h1>
<p>This is how it works
Really easy to create more complex styles
this will never end.
<div id="slider">
<input checked="" type="radio" name="slider" id="slide1" selected="false">
<input type="radio" name="slider" id="slide2" selected="false">
<input type="radio" name="slider" id="slide3" selected="false">
<input type="radio" name="slider" id="slide4" selected="false">
<div id="slides">
<div id="overflow">
<div class="inner">
<a href=""><img src=""></a>
<div class="s3-left-fixed">
<li><a href="#1">First Page</a></li>
<li><a href="#2">Second Page</a></li>
<li><a href="#3">Third Page</a></li>
<li><a href="#4">Fourth Page</a></li>
<li><a href="#5">Fifth Page</a></li>
<div class="s3-center">
Shaz3e / S3 Horizontal Responsive Menu
Created December 17, 2013 12:44
S3 Horizonal Resonsive Menu updated with sample codes you can customize more according to device requirements.
<link href='' rel='stylesheet' type='text/css'>
<h1>S3 Horizontal Responsive Menu</h1>
<div class="s3-menu">
<div id="s3-menu">
<a href="#">
Home <span>Front Page</span>
Shaz3e / Help Complete Email Addresses with <datalist>
Created December 17, 2013 12:45
The character after @ in emails will trigger a dropdown of choices of popular email domains.
# Email Domain Datalist Helper
Shows a list of suggestions after you've hit the @.
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="">
Shaz3e / Skype API
Created February 11, 2014 19:33
How to use Skype API to Detect Online Users example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
<title>How to use Skype API to Detect Online Users</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
display: inline-block;
Shaz3e / Image Less CAPTCHA with PHP
Created February 12, 2014 19:37
Image Less CAPTCHA with PHP
if (isset($_POST['submit'])){
$number = floatval($_POST['number']);
if ($number != $_SESSION['correctNumber']) {
$message = "<br /><span class='errors'>The number you entered for the spam filter is incorrect.</span><br />";
$message = "<br /><span class='success'>CAPTCHA Verified!!!</span><br />";