Skip to content

Instantly share code, notes, and snippets.

View kannankumar's full-sized avatar
🥊
pushing pixels

Kannan Kumar kannankumar

🥊
pushing pixels
16 followers · 38 following
View GitHub Profile
@kannankumar
kannankumar / dabblet.css
Created March 31, 2014 08:19
Untitled
.blue{background-color:#4A7496;}
.green{background-color:#49796B;}
.grey{background-color:#888}
.etched{
width:50px;
height:50px;
border:1px solid rgba(0,0,0,0.2);
position:relative;
border-radius:1px 0 0 1px;
box-shadow:1px 1px 2px -1px #000;
@kannankumar
kannankumar / etched_border.css
Last active August 29, 2015 13:57
Etched Border Effect
.blue{background-color:#4A7496;}
.green{background-color:#49796B;}
.grey{background-color:#888}
.etched{
width:50px;
height:50px;
border-top:1px solid rgba(0,0,0,0.2);
border-bottom:1px solid rgba(0,0,0,0.2);
position:relative;
box-shadow:1px 1px 2px -1px #000;
@kannankumar
kannankumar / Convert-SVG-Polyline-To-Path.md
Last active August 29, 2015 14:20 — forked from andytlr/_description.md
Simple trick to convert all SVG Polylines to Path so that they can be animated

Convert SVG polyline to path

Replace all instances of <polyline with <path and points=" with d="M.

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
-<polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="100.712,141.534 582.904,227.835 425.37,478.521
+
@kannankumar
kannankumar / Animated Close Button.markdown
Last active March 3, 2016 15:28
Animated Close Button

Animated Close Button

Rotating close icon on hover Using css3 transforms and :before and :after pseudo classes

animated_close_button

A Pen by Kannan Kumar on CodePen.

License.

@kannankumar
kannankumar / Basic CSS Animation.markdown
Last active March 3, 2016 17:56
Basic CSS Animation
@kannankumar
kannankumar / index.html
Last active July 25, 2016 04:39 — forked from artemgoncharuk/gist:b31b6a656c954a2866e8
Speech to Text and Text to Speech using Chrome API. (integrated with api.ai with an ajax call)
<html>
<head>
<title>API Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var accessToken = "<your agent's client access token>";
var baseUrl = "https://api.api.ai/v1/";
@kannankumar
kannankumar / CopySAPUI5Text.md
Last active August 4, 2016 15:54
@kannankumar
kannankumar / faded-horizontal-line-using-css-gradients.markdown
Last active August 4, 2016 16:06
Faded Horizontal Line using CSS Gradients
@kannankumar
kannankumar / github sparkline.markdown
Last active May 3, 2017 04:45
Github Activity Sparkline Example
@kannankumar
kannankumar / box-shadow.html
Created August 20, 2017 11:59 — forked from ocean90/box-shadow.html
CSS3 Box Shadow, only top/right/bottom/left and all
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style>
.box {
height: 150px;
width: 300px;
margin: 20px;