Skip to content

Instantly share code, notes, and snippets.

View kianoshp's full-sized avatar

Kianosh Pourian kianoshp

  • North Andover, MA
View GitHub Profile
@kianoshp
kianoshp / index.html
Created February 18, 2019 15:37
Slicebox - 3D Image Slider
<div class="container">
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="https://tympanus.net/Development/Slicebox/images/1.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
@kianoshp
kianoshp / index.html
Created February 18, 2019 15:13
Very Simple Slider
<h1>Incredibly Basic Slider</h1>
<div id="slider">
<a href="#" class="control_next">></a>
<a href="#" class="control_prev"><</a>
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
@kianoshp
kianoshp / SassMeister-input.scss
Created January 26, 2014 19:01
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
$border-default-size: 1px !default;
$border-default-pattern: solid !default;
$border-default-color: #000000 !default;
@function add-border(
@kianoshp
kianoshp / _arrow-box-mixin.scss
Last active December 25, 2015 00:09
A Sass mixin to create arrow boxes (similar to tooltips) borrowing from http://cssarrowplease.com, I created the following:
//Setting the initial border color to be red
$red: #9d261d;
//this mixin will set the box-shadow values. It will also allow for the felxibility of
//doing an inset shadow.
@mixin box-shadow ($isInset: false, $hOffset: 0, $vOffset: 0, $blur: 0, $spread: 0, $color: #ccc) {
@if $isInset {
-moz-box-shadow: inset $hOffset $vOffset $blur $spread $color;
-webkit-box-shadow: inset $hOffset $vOffset $blur $spread $color;
box-shadow: inset $hOffset $vOffset $blur $spread $color;
@kianoshp
kianoshp / domCSS
Created May 16, 2012 14:01
Follow the DOM CSS
header {
height: 88px;
}
header section {
position: relative;
color: #fff;
}
aside {
float: right;
width: 330px;
@kianoshp
kianoshp / getListValue.sass
Last active August 29, 2015 14:16
Example of a simple Sass mixin to create a background gradient with progressive error handling and introspection
@function get-list-value($list, $place: first)
$list-length: length($list)
$group: null
@if $place == first
$group: nth($list, 1)
@else if $place == last
$group: nth($list, length($list))
$listValue-object: nth($group, 1)
@return $listValue-object
@kianoshp
kianoshp / SassMeister-input.scss
Created September 30, 2014 16:08
Generated by SassMeister.com.
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
/**************** padding and margin settings *****************
Setting padding and margins to be added to different sections
This sections contains individual setting and also a mixin
to be able to add to different sections
@kianoshp
kianoshp / SassMeister-input.scss
Created September 30, 2014 03:17
Generated by SassMeister.com.
// ----
// libsass (v2.0.0)
// ----
/**
* libsass list manipulation problem
* I am using the following code as a crude example.
* the real world application I am trying to achieve
* is providing grid system setup via a single $args array.
*/
@kianoshp
kianoshp / SassMeister-input.scss
Last active August 29, 2015 14:07
Generated by SassMeister.com.
// ----
// libsass (v2.0.0)
// ----
/**
* libsass list manipulation problem
* I am using the following code as a crude example.
* the real world application I am trying to achieve
* is providing grid system setup via a single $args array.
*/
@kianoshp
kianoshp / SassMeister-input.scss
Created July 28, 2014 02:44
Generated by SassMeister.com.
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
$map-1: (
key-1-1: "value-1-1",
key-1-2: "value-1-2",
key-1-3: "value-1-3",
key-1-4: "value-1-4"