Skip to content

Instantly share code, notes, and snippets.

View dhunmoon's full-sized avatar

Atul Chaudhary dhunmoon

7 followers · 13 following
View GitHub Profile
@dhunmoon
dhunmoon / transformSkew.css
Last active September 8, 2015 09:48
CSS: Transform Skew
transform: skew(Xdeg, Ydeg) ;
-webkit-transform: skew(Xdeg, Ydeg) ;
-moz-transform: skew(Xdeg, Ydeg) ;
-o-transform: skew(Xdeg, Ydeg) ;
-ms-transform: skew(Xdeg, Ydeg) ;
/*
For IE8 Support:
http://www.useragentman.com/IETransformsTranslator/
*/
@dhunmoon
dhunmoon / transformTranslate.css
Last active September 8, 2015 09:48
CSS: Transform Translate
transform: translate(Xpx, Ypx);
-webkit-transform: translate(Xpx, Ypx);
-moz-transform: translate(Xpx, Ypx);
-o-transform: translate(Xpx, Ypx);
-ms-transform: translate(Xpx, Ypx);
/*
For IE8 or Less support:
http://www.useragentman.com/IETransformsTranslator/
*/
@dhunmoon
dhunmoon / cssRGBAColor.css
Last active September 8, 2015 11:44
CSS: RGBA and ARGB colors
background: red or transparent; /* Feedback color */
background: rgba(red, green, blue, alpha); /* For modern browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#FFFFFFFF', EndColorStr='#FFFFFFFF')"; /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FFFFFFFF', EndColorStr='#FFFFFFFF'); /* For IE6,IE7 */\
/*
Link To generate RGBA colors for all browsers:
http://beijingyoung.com/articles/rgba-argb-converter/
*/
@dhunmoon
dhunmoon / cssLinearGradientHorizontalLR.css
Last active September 8, 2015 11:51
CSS: Linear Gradient Horozontal LR
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, rgba(249,249,249,1) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-g
@dhunmoon
dhunmoon / cssLinearGradientVerticalTB.css
Created September 8, 2015 11:53
CSS: Linear Gradient Vertical TB
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-
@dhunmoon
dhunmoon / cssDiagonalGradientTL.css
Created September 8, 2015 11:55
CSS: Diagonal Gradient TL
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZjlmOWY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(-45deg, rgba(249,249,249,1) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
background: -webkit
@dhunmoon
dhunmoon / cssDiagonalGradientTL.css
Created September 8, 2015 12:07
CSS: Diagonal Gradient BL
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZjlmOWY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(45deg, rgba(249,249,249,1) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
background: -webkit-
@dhunmoon
dhunmoon / borderRadius.css
Last active September 8, 2015 12:47
CSS: Border Radius
-webkit-border-radius: Top Right Bottom Left ;
-moz-border-radius: Top Right Bottom Left;
border-radius: Top Right Bottom Left;
behavior: url(https://raw.githubusercontent.com/atulc007/CSS3-PIE/master/PIE-1.0.0/PIE.htc);
/*
For IE8 or Less:
http://www.hongkiat.com/blog/css3-border-radius-in-internet-explorer/
*/
@dhunmoon
dhunmoon / cssBoxShadow.css
Last active September 8, 2015 12:48
CSS: Box Shadow
-webkit-box-shadow: inset Horizontal Length[px] Vertical Length[px] Blur Radius[px] Spread Radius[px] ShadowColor;
-moz-box-shadow: inset Horizontal Length[px] Vertical Length[px] Blur Radius[px] Spread Radius[px] ShadowColor;
box-shadow: inset Horizontal Length[px] Vertical Length[px] Blur Radius[px] Spread Radius[px] ShadowColor;
behavior: url(https://raw.githubusercontent.com/atulc007/CSS3-PIE/master/PIE-1.0.0/PIE.htc);
/*
For IE8 or Less:
http://www.hongkiat.com/blog/css3-border-radius-in-internet-explorer/
*/
@dhunmoon
dhunmoon / cssPIEGradient.css
Created September 8, 2015 12:50
CSS: CSS PIE Gradient IE
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(https://raw.githubusercontent.com/atulc007/CSS3-PIE/master/PIE-1.0.0/PIE.htc);