CSS3 Cheat Sheet

CSS3 Cheat Sheet code school learn by doing BORDER- BOX-SHADOW RADIUS -webkit-border-radius -webkil-box-shadow -moz-box-shadow box-shadow -moz-border-radius border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius syntax: x y blur color -webkit-border-bottom-left-radius example: box-shadow: 5px 5px #0003; -webkit-border-bottom-right-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -webkit-text-shadow -moz-text-shadow TEXT-SHADOW text-shadow -moz-border-radius-bottomleft syntax: x y blur color border-top-left-radius border-top-right-radius border-bottom-right-radius example: text-shadow: 5px 5px #000; border-bottom-left-radius example: border-radius: 5px -webkit-transition TRANSITION -moz-transition transition TRANSFORM -webkit-transform syntax: Css-property duration timing-function scale(val) rotate(val) skew(val, [val]) translate(val, [val]) -moz-transform transform fx example: transform: scale(1.5); example: transition: opacity .2s ease-in-out; BACKGROUND GRADIENTS -webkit-gradient(type, point, [radius], point, [radius], color-stops); example: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A4B183), to(#C2D19B); -moz-inear-gradient ([point or angle], color-stop, color-stop, [color-stop]) example: -moz-linear-gradient (19%, 75% 90deg, #A4B183, #C2D19B); linear-gradient (color-stop, color-stop); MULTIPLE BACKGROUND background:url(path_to_file) no-repeat right top, url(path_to_file) repeat center top; RGBA/HSLA FONTS rgba(red, green, blue, opacity); hsla (hue, saturation, lightness, alpha); @font-face { font-family: "Font Family Name"; src: url("path_to_file"); format("font_type"); } example: background: rgba(208, 208, 198, 0.5); Produced by envylabs envylabs.com