{"id":4632,"date":"2009-11-06T04:45:39","date_gmt":"2009-11-06T11:45:39","guid":{"rendered":"http:\/\/css-tricks.com\/?p=4632"},"modified":"2009-11-06T04:45:39","modified_gmt":"2009-11-06T11:45:39","slug":"quickie-css3-tricks-with-fallbacks","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/quickie-css3-tricks-with-fallbacks\/","title":{"rendered":"Quickie CSS3 Tricks with Fallbacks"},"content":{"rendered":"

CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff<\/a> you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. Let’s look at a couple of quick, simple, cheezy examples.<\/p>\n

<\/p>\n

 <\/p>\n

Growing Links<\/h3>\n

Scaling an element is really fun any easy with CSS3. We don’t need CSS3 to do this, we could use relative positioning, offset the position, increase the width, height, and font size. But wow, that’s a heck of a lot of work when we can just apply a scale factor and be done with it. These links get their corners more rounded and a bit of a drop shadow applied on hover as well.<\/p>\n

\"\"<\/p>\n

.grower { \r\n    display: block;\r\n    margin: 0 auto;\r\n    width: 120px;\r\n    padding: 2px 5px;\r\n    border: 1px solid #2f2626;\r\n    \r\n    background: rgba(237,95,0,0.3); \r\n    -moz-transition: all 0.1s ease-in-out;\r\n    -webkit-transition: all 0.1s ease-in-out; \r\n    -moz-border-radius: 2px;\r\n    -webkit-border-radius: 2px;\r\n}\r\n.grower:hover { \r\n    background: rgba(237,95,0,1.0);\r\n    border-color: rgba(237,95,0,1.0);\r\n\r\n    -moz-transform: scale(1.2); \r\n    -webkit-transform: scale(1.2); \r\n    \r\n    -moz-box-shadow: 0 0 20px black;\r\n    -webkit-box-shadow: 0 0 20px black;\r\n    \r\n    -moz-border-radius: 10px; \r\n    -webkit-border-radius: 10px; \r\n}<\/code><\/pre>\n
 <\/p>\n
Blurred Edges<\/h3>\n
Using multiple shadows behind slightly transparent text can blurs the edges of text without the need of any images. A transition can fade the text out, track out the letters, and change the font size as well.<\/p>\n
\"\"<\/p>\n
h3 { \r\n    height: 100px;\r\n    font: bold 80px Helvetica, Sans-Serif;\r\n    \r\n    color: black; \/* fallback *\/\r\n    color: rgba(0,0,0,0.2);\r\n    \r\n    text-shadow: \r\n        0 0 2px rgba(0,0,0,0.2),\r\n        0 0 4px rgba(0,0,0,0.2), \r\n        0 0 6px rgba(0,0,0,0.2); \r\n    -webkit-transition: all 0.2s linear;\r\n}\r\nh3:hover { \r\n    color: rgba(28, 28, 28, 0.2); \r\n    opacity: 0.8;\r\n    letter-spacing: 15px; \r\n    font-size: 70px;\r\n}<\/code><\/pre>\n
 <\/p>\n
Elliptical Rounding<\/h3>\n
The poster child for progressive enhancement is border-radius. But did you know you don’t have to create perfectly circular rounded corners? We’ll create an oval here and give ‘er a spin just for fun (WebKit only… Mozilla has syntax for transitions but isn’t doing them yet).<\/p>\n
\"\"<\/p>\n
.oval { \r\n    background: #fe4902; \r\n    width: 200px; \r\n    height: 100px; \r\n    line-height: 100px; \r\n    text-align: center;\r\n    margin: 0 auto;\r\n    \r\n    \/* Notice the slightly different syntax *\/\r\n    -moz-border-radius: 100px \/ 50px; \r\n    -webkit-border-radius: 100px 50px;\r\n    \r\n    -webkit-transition: all 0.8s linear;\r\n    -moz-transition: all 0.8s linear;  \/* non functional just yet *\/\r\n}\r\n.oval:hover {\r\n    -webkit-transform: rotate(720deg);\r\n}<\/code><\/pre>\n
 <\/p>\n
Multiple Backgrounds<\/h3>\n
If more widely supported, multiple backgrounds would be amazing timesavers. Alas, we can only use them for optional subtle enhancements now, where a fallback of nothing at all is acceptable.<\/p>\n
\"\"<\/p>\n
body {\r\n    background: \r\n        url(..\/images\/top-right.png) top right fixed no-repeat, \r\n        url(..\/images\/top-left.png) top left fixed no-repeat, \r\n        url(..\/images\/bot-left.png) bottom left fixed no-repeat, \r\n        url(..\/images\/bot-right.png) bottom right fixed no-repeat;\r\n    background-color: #2f2626;\r\n}<\/code><\/pre>\n
 <\/p>\n
View Demo<\/a>   Download Files<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":302215,"url":"https:\/\/css-tricks.com\/css4\/","url_meta":{"origin":4632,"position":0},"title":"CSS4","date":"February 4, 2020","format":false,"excerpt":"What is CSS4? Is it a real thing? I hate to break it to you, but not really. But maybe we could make it a thing? CSS3 was successful, so why not keep that train rolling like they do in JavaScript?","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/css4.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359857,"url":"https:\/\/css-tricks.com\/whats-new-since-css3\/","url_meta":{"origin":4632,"position":1},"title":"What should someone learn about CSS if they last boned up during CSS3?","date":"January 19, 2022","format":false,"excerpt":"What's new in CSS? If someone asked you that, who knows CSS but hasn't stayed up to date the last, say, half a decade or more, what advice would you give?","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/css-tricks-logo-blur.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332370,"url":"https:\/\/css-tricks.com\/css-snapshot-2020\/","url_meta":{"origin":4632,"position":2},"title":"CSS Snapshot 2020","date":"January 11, 2021","format":false,"excerpt":"I think it's great that the CSS Working Group does these. It's like planting a flag in the ground saying this is what CSS looks like at this specific point in time. They do specifically say it's not for us CSS authors though... This document collects together into one definition\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/html5-css3.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":318198,"url":"https:\/\/css-tricks.com\/dark-ages-of-the-web\/","url_meta":{"origin":4632,"position":3},"title":"Dark Ages of the Web","date":"July 29, 2020","format":false,"excerpt":"A very fun jaunt through the early days of front-end web development. They are open to pull requests, so submit one if you're into this kind of fun chronicling of our weird history! That CSS3 Button generator really hits home. \ud83d\ude2c","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-28-at-4.21.08-PM.png?fit=1200%2C970&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303217,"url":"https:\/\/css-tricks.com\/css4-is-a-bad-idea\/","url_meta":{"origin":4632,"position":4},"title":"CSS4 is a Bad Idea","date":"February 5, 2020","format":false,"excerpt":"Louis Lazaris, reacting to the idea of CSS4: The reason \u201cCSS3\u201d worked is because it was real. It was the successor to \u201cCSS2.1\u201d. Everything after CSS2.1 was considered to be under the umbrella of \u201cCSS3\u201d. The gist is that CSS4 isn't real, so won't work, and we don't need it\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7806,"url":"https:\/\/css-tricks.com\/css3-finalize\/","url_meta":{"origin":4632,"position":5},"title":"CSS3 Finalize","date":"November 3, 2010","format":false,"excerpt":"jQuery plugin from Han Lin Yap which allows you to write CSS3 without vendor prefixes. This plugin will read through your CSS files and in-document blocks, find the CSS3 stuff, then append a new block to your page with the appropriate vendor extensions for the browser you are in. This\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4632"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"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=4632"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4632\/revisions"}],"predecessor-version":[{"id":4641,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4632\/revisions\/4641"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=4632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=4632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=4632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}