Skip to content

Instantly share code, notes, and snippets.

View Shaz3e's full-sized avatar

Shahrukh A. Khan Shaz3e

11 followers · 10 following
View GitHub Profile
@Shaz3e
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='http://fonts.googleapis.com/css?family=Exo+2' 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>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
@Shaz3e
Shaz3e / The centered absolute div under relative div
Created December 17, 2013 12:39
<div clss="s3-relative">
<div class="s3-absolute">
The centered absolute div under relative div
</div>
</div>
@Shaz3e
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
</div>
@Shaz3e
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
<small>
Really easy to create more complex styles
</small>
</p>
<small>
this will never end.
</small>
@Shaz3e
Shaz3e / CSS3 Slider
Created December 17, 2013 12:42
<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">
<article>
<a href="http://www.fdsempire.com/"><img src="http://imageshack.us/a/img23/9602/f78b.jpg"></a>
@Shaz3e
Shaz3e / Smooth Scrolling
Created December 17, 2013 12:43
<div class="s3-left-fixed">
<ul>
<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>
</ul>
</div>
<div class="s3-center">
@Shaz3e
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='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
<h1>S3 Horizontal Responsive Menu</h1>
<div class="s3-menu">
<div id="s3-menu">
<ul>
<li>
<a href="#">
Home <span>Front Page</span>
</a>
@Shaz3e
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="your@email.com">
@Shaz3e
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<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">
.inputbox{
display: inline-block;
@Shaz3e
Shaz3e / Image Less CAPTCHA with PHP
Created February 12, 2014 19:37
Image Less CAPTCHA with PHP
<?php
session_start();
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 />";
}else{
$message = "<br /><span class='success'>CAPTCHA Verified!!!</span><br />";
}