Skip to content

Instantly share code, notes, and snippets.

View kannankumar's full-sized avatar
🥊
pushing pixels

Kannan Kumar kannankumar

🥊
pushing pixels
14 followers · 38 following
View GitHub Profile
@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;
@kannankumar
kannankumar / Adding Images to markdown files in Gist.markdown
Last active April 9, 2024 12:00

How To - Upload and add Images to markdown files in Gist

Markdown files allow embedding images in it. However it requires the image to be hosted at some location and we can add the url of the image to embed it.

Example: ![Alternate image text](https://someurl/imagelocation/image.png)

We can use services like imgur or other services to host the images and use the hosted URL.

@kannankumar
kannankumar / github sparkline.markdown
Last active May 3, 2017 04:45
Github Activity Sparkline Example
@kannankumar
kannankumar / faded-horizontal-line-using-css-gradients.markdown
Last active August 4, 2016 16:06
Faded Horizontal Line using CSS Gradients
@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 / Basic CSS Animation.markdown
Last active March 3, 2016 17:56
Basic CSS Animation
@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 / 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 / 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;