The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations\/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image…<\/p>\n
Links from Video:<\/strong><\/p>\n The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations\/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image… […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":15601,"url":"https:\/\/css-tricks.com\/snippets\/css\/useful-css3-less-mixins\/","url_meta":{"origin":2402,"position":0},"title":"Useful CSS3 Less Mixins","date":"December 16, 2011","format":false,"excerpt":".text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0,\u2026","rel":"","context":"With 51 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196160,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/","url_meta":{"origin":2402,"position":1},"title":"background-origin","date":"February 17, 2015","format":false,"excerpt":"The background-origin property defines where to paint the background: across the whole element, inside the border, or inside the padding. There are four values: border-box, padding-box, content-box and inherit. Here\u2019s a demo: CodePen Embed Fallback background-origin is similar to background-clip, except it resizes the background rather than clipping it. The\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7035,"url":"https:\/\/css-tricks.com\/snippets\/css\/picross-style-buttons\/","url_meta":{"origin":2402,"position":2},"title":"Picross Style Buttons","date":"August 10, 2010","format":false,"excerpt":"As in, the game PICROSS3D. CSS3 Technique \u00a0 Button Button Button \u00a0 .btn { color: white; font-family: Helvetica, Arial, Sans-Serif; font-size: 20px; text-decoration: none; text-shadow: -1px -1px 1px #616161; position: relative; padding: 15px 30px; -webkit-box-shadow: 5px 5px 0 #666; -moz-box-shadow: 5px 5px 0 #666; -webkit-transition: all 0.3s ease; -moz-transition: all\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148076,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/04-jquery-selectors-css3-selectors\/","url_meta":{"origin":2402,"position":3},"title":"#04: jQuery Selectors are CSS3 Selectors","date":"August 25, 2013","format":false,"excerpt":"In CSS, you can select all elements on the page with this: h1 { \/* style all elements *\/ } In jQuery, you can use that exact same selector. $(\"h1\") \/\/ set of all elements In fact, you can use any CSS selector (even CSS3 selectors) in jQuery. In this\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178801,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule\/","url_meta":{"origin":2402,"position":4},"title":"column-rule","date":"August 14, 2014","format":false,"excerpt":"To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you\u2019ve ever styled border, then you are ready to style column-rule. .container { -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black;\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16320,"url":"https:\/\/css-tricks.com\/snippets\/css\/corner-ribbon\/","url_meta":{"origin":2402,"position":5},"title":"Corner Ribbon","date":"February 17, 2012","format":false,"excerpt":"NEWS \u200b .wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; }\u2026","rel":"","context":"With 58 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2402"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2402"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2402\/revisions"}],"predecessor-version":[{"id":155778,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2402\/revisions\/155778"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2402"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n