{"id":413,"date":"2012-10-04T11:44:00","date_gmt":"2012-10-04T06:14:00","guid":{"rendered":"https:\/\/chayilyam.com\/stories\/?p=413"},"modified":"2012-10-04T11:44:00","modified_gmt":"2012-10-04T06:14:00","slug":"css3-gradient-backgrounds","status":"publish","type":"post","link":"https:\/\/chayilyam.com\/stories\/css3-gradient-backgrounds\/","title":{"rendered":"CSS3 Gradient Backgrounds"},"content":{"rendered":"<div dir=\"ltr\" style=\"text-align: left;\">\n<div>\n<h1><\/h1>\n<div style=\"text-align: left;\"><span style=\"color: #444444;\">\u00a0<big>The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. <a href=\"http:\/\/webdesignerwall.com\/tutorials\/cross-browser-css-gradient\" target=\"_blank\">Read more &gt;&gt;<\/a><\/big><\/span><\/div>\n<h2>Linear Gradient (Top \u2192 Bottom)<\/h2>\n<div style=\"background: -webkit-linear-gradient(top, #2F2727, #fddfa4); clear: both; display: block; float: left; height: 100px; width: 100%;\"><\/div>\n<p>#linearBg2 { background-color: #fddfa4; background: url(images\/linear_bg_2.png); background-repeat: repeat-x; \/* Safari 4-5, Chrome 1-9 *\/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fddfa4), to(#2F2727)); \/* Safari 5.1, Chrome 10+ *\/ background: -webkit-linear-gradient(top, #2F2727, #fddfa4); \/* Firefox 3.6+ *\/ background: -moz-linear-gradient(top, #2F2727, #fddfa4); \/* IE 10 *\/ background: -ms-linear-gradient(top, #2F2727, #fddfa4); \/* Opera 11.10+ *\/ background: -o-linear-gradient(top, #2F2727, #fddfa4); }<\/p>\n<h2>Linear Gradient (Left \u2192 Right)<\/h2>\n<div><\/div>\n<div style=\"background-color: #fddfa4; background-repeat: repeat-y; background: -webkit-linear-gradient(left, #2F2727, #fddfa4); float: left; height: 100px; width: 100%;\"><\/div>\n<p>#linearBg1 { background-color: #ec800b; background-repeat: repeat-y; \/* Safari 4-5, Chrome 1-9 *\/ background: -webkit-gradient(linear, left top, right top, from(#fddfa4), to(#2F2727)); \/* Safari 5.1, Chrome 10+ *\/ background: -webkit-linear-gradient(left, #2F2727, #fddfa4); \/* Firefox 3.6+ *\/ background: -moz-linear-gradient(left, #2F2727, #fddfa4); \/* IE 10 *\/ background: -ms-linear-gradient(left, #2F2727, #fddfa4); \/* Opera 11.10+ *\/ background: -o-linear-gradient(left, #2F2727, #fddfa4); }<\/p>\n<h2>Linear Gradient (with Even Stops)<\/h2>\n<div style=\"background: -webkit-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); float: left; height: 100px; width: 100%;\"><\/div>\n<p>#even-stops { \/* Safari 4-5, Chrome 1-9 *\/ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.75, #fddfa4), to(#2F2727)); \/* Safari 5.1+, Chrome 10+ *\/ background: -webkit-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); \/* Firefox 3.6+ *\/ background: -moz-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); \/* IE 10 *\/ background: -ms-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); \/* Opera 11.10+ *\/ background: -o-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); }<\/p>\n<h2>Linear Gradient (with Specified Arbitrary Stops)<\/h2>\n<div style=\"background: -webkit-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); float: left; height: 100px; width: 100%;\"><\/div>\n<p>#arbitrary-stops { \/* Safari 4-5, Chrome 1-9 *\/ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.95, #fddfa4), to(#2F2727)); \/* Safari 5.1+, Chrome 10+ *\/ background: -webkit-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); \/* Firefox 3.6+ *\/ background: -moz-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); \/* IE 10 *\/ background: -ms-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); \/* Opera 11.10+ *\/ background: -o-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); }<\/p>\n<h2>Radial Gradient (Centered, Full Size)<\/h2>\n<div style=\"background: -webkit-radial-gradient(circle, #fddfa4, #2F2727); float: left; height: 100px; width: 100%;\"><\/div>\n<p>#radial-center { background-color: #2F2727; background-image: url(images\/radial_bg.png); background-position: center center; background-repeat: no-repeat; \/* Safari 4-5, Chrome 1-9 *\/ \/* Can&#8217;t specify a percentage size? Laaaaaame. *\/ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fddfa4), to(#2F2727)); \/* Safari 5.1+, Chrome 10+ *\/ background: -webkit-radial-gradient(circle, #fddfa4, #2F2727); \/* Firefox 3.6+ *\/ background: -moz-radial-gradient(circle, #fddfa4, #2F2727); \/* IE 10 *\/ background: -ms-radial-gradient(circle, #fddfa4, #2F2727); \/* Opera cannot do radial gradients yet *\/ }<\/p>\n<h2>Radial Gradient (Positioned, Sized)<\/h2>\n<p>Warning: Not Consistent Among Browsers<\/p>\n<div style=\"background: -webkit-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); float: left; height: 100px; width: 100%;\"><\/div>\n<p>#radial-position { background-color: #2F2727; background-position: 80% 20%; background-repeat: no-repeat; \/* Safari 4-5, Chrome 1-9 *\/ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fddfa4), to(#2F2727)); \/* Safari 5.1+, Chrome 10+ *\/ background: -webkit-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); \/* Firefox 3.6+ *\/ background: -moz-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); \/* IE 10 *\/ background: -ms-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); \/* Opera cannot do radial gradients yet *\/ }<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[81,85,196,492],"tags":[1627,1349,1358],"class_list":["post-413","post","type-post","status-publish","format-standard","hentry","category-css","category-css3","category-html5","category-tutorials","tag-css","tag-tutorial","tag-web-designs"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/pfoK1S-6F","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/comments?post=413"}],"version-history":[{"count":0,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/413\/revisions"}],"wp:attachment":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/media?parent=413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/categories?post=413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/tags?post=413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}