{"id":2436,"date":"2013-04-16T14:24:14","date_gmt":"2013-04-16T13:24:14","guid":{"rendered":"http:\/\/www.stevepugh.net\/VTT\/?p=2436"},"modified":"2013-04-16T14:24:14","modified_gmt":"2013-04-16T13:24:14","slug":"pure-css-things","status":"publish","type":"post","link":"https:\/\/stevepugh.net\/VTT\/2013\/04\/pure-css-things\/","title":{"rendered":"Pure CSS Things"},"content":{"rendered":"<p>I&#8217;ve had to add them to loads of web pages over the years, but I&#8217;m not sure what the proper name for them is. You know, the many-pointed stars \/ jagged edged circles used to denote special offers or prices. Them. Anyway, yesterday I had to add one to a page and decided to see if I could add it via pure CSS.<\/p>\n<p>And for all browsers except IE8 and lower, I could.<\/p>\n<style>\n.offer-flash {\n  background-color: #DE277D;\n  width: 50px;\n  height: 50px;\n  position: relative;\n  -webkit-transform: rotate(45deg);\n  -moz-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  -o-transform: rotate(45deg);\n  transform: rotate(45deg);\n}\n.offer-flash:before, .offer-flash:after, .offer-flash b  {\n  position: absolute;\n    display: block;  width: 50px; height: 50px;  background-color: #DE277D;\n  }\n.offer-flash:before {\n  -webkit-transform: rotate(22.5deg);\n  -moz-transform: rotate(22.5deg);\n  -ms-transform: rotate(22.5deg);\n  -o-transform: rotate(22.5deg);\n  transform: rotate(22.5deg);\n    z-index: 4;\n    content: \"\";\n  }\n.offer-flash:after {\n  -webkit-transform: rotate(-22.5deg);\n  -moz-transform: rotate(-22.5deg);\n  -ms-transform: rotate(-22.5deg);\n  -o-transform: rotate(-22.5deg);\n  transform: rotate(-22.5deg);\n    z-index: 4;\n    content: \"\";\n  }\n.offer-flash  b {\n  -webkit-transform: rotate(-45deg);\n  -moz-transform: rotate(-45deg);\n  -ms-transform: rotate(-45deg);\n  -o-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n    font-size: 16px;\n    line-height: 45px;\n    text-align: center;\n    color: #fff;\n    text-transform: lowercase;\n    z-index: 5;\n  }\n<\/style>\n<div class=\"offer-flash\"><b>Wow!<\/b><\/div>\n<pre><code>\n.offer-flash {\n  background-color: #DE277D;\n  width: 50px;\n  height: 50px;\n  position: relative;\n  transform: rotate(45deg);\n}\n.offer-flash:before, .offer-flash:after, .offer-flash b  {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  background-color: #DE277D;\n}\n.offer-flash:before {\n  transform: rotate(22.5deg);\n  z-index: 4;\n  content: \"\";\n}\n.offer-flash:after {\n  transform: rotate(-22.5deg);\n  z-index: 4;\n  content: \"\";\n}\n.offer-flash  b {\n  transform: rotate(-45deg);\n  font-size: 16px;\n  line-height: 45px;\n  text-align: center;\n  color: #fff;\n  text-transform: lowercase;\n  z-index: 5;\n}\n<\/style>\n\n&lt;div class=\"offer-flash\">&lt;b>Wow!&lt;\/b>&lt;\/div>\n<\/code><\/pre>\n<p>I&#8217;ve removed the various prefixed versions of <code>transform<\/code> for clarity, don&#8217;t forget to add them in if you want to support IE9, Firefox 15 or lower, Opera 12 or lower or any Webkit browser.<\/p>\n<p>One caveat is that as the various elements and pseudo-elements overlap each other we can&#8217;t add borders or dropshadows to those elements. Borders I&#8217;m not going to get into, but dropshadows are possible by wrapping one extra HTML element. (Watch out for the interaction of <code>z-index<\/code>, <code>position<\/code>, <code>:before<\/code> and <code>:after<\/code>.)<\/p>\n<style>\n.offer-flash-shadow {\n  background-color: transparent;\n  width: 50px;\n  height: 50px;\n  position: relative;\n-webkit-box-shadow:  3px 3px 6px #333;\n  box-shadow:  3px 3px 6px #333;\n  z-index: 1;\n}\n.offer-flash-shadow:before, .offer-flash-shadow:after {\n    position: absolute;\n    width: 50px; height: 50px;  background-color: transparent;\n-webkit-box-shadow:  3px 3px 6px #333;\n    box-shadow: 3px 3px 6px #333;\n    z-index: 2;\n  }\n.offer-flash-shadow:before {\n  -webkit-transform: rotate(-22.5deg);\n  -moz-transform: rotate(-22.5deg);\n  -ms-transform: rotate(-22.5deg);\n  -o-transform: rotate(-22.5deg);\n  transform: rotate(-22.5deg);\n  content: \"\";\n}\n.offer-flash-shadow:after {\n  -webkit-transform: rotate(22.5deg);\n  -moz-transform: rotate(22.5deg);\n  -ms-transform: rotate(22.5deg);\n  -o-transform: rotate(22.5deg);\n  transform: rotate(22.5deg);\n  content: \"\";\n}\n.offer-flash-shadow .offer-flash {\n-webkit-box-shadow:  3px 3px 6px #333;\n    box-shadow:  3px 3px 6px #333;\n    position: absolute;\n    z-index: 3;\n}\n<\/style>\n<div class=\"offer-flash-shadow\">\n<div class=\"offer-flash\"><b>Wow!<\/b><\/div>\n<\/div>\n<pre><code>\n.offer-flash-shadow {\n  background-color: transparent;\n  width: 50px;\n  height: 50px;\n  position: relative;\n  box-shadow:  3px 3px 6px #333;\n  z-index: 1;\n}\n.offer-flash-shadow:before, .offer-flash-shadow:after {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  background-color: transparent;\n  box-shadow:  3px 3px 6px #333;\n  z-index: 2;\n  }\n.offer-flash-shadow:before {\n  transform: rotate(-22.5deg);\n  content: \"\";\n}\n.offer-flash-shadow:after {\n  transform: rotate(22.5deg);\n  content: \"\";\n}\n.offer-flash-shadow .offer-flash {\n  box-shadow:  3px 3px 6px #333;\n  position: absolute;\n  z-index: 3;\n}\n\n&lt;div class=\"offer-flash-shadow\">&lt;div class=\"offer-flash\">&lt;b>Wow!&lt;\/b>&lt;\/div>&lt;\/div>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve had to add them to loads of web pages over the years, but I&#8217;m not sure what the proper name for them is. You know, the many-pointed stars \/ jagged edged circles used to denote special offers or prices. Them. Anyway, yesterday I had to add one to a page and decided to see [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"I don't know what to call them, but here's how to make them. Pure CSS Things http:\/\/wp.me\/p1fxq5-Di","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[15],"tags":[74,75],"class_list":["post-2436","post","type-post","status-publish","format-standard","hentry","category-www","tag-css","tag-css3"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1fxq5-Di","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/2436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/comments?post=2436"}],"version-history":[{"count":0,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/2436\/revisions"}],"wp:attachment":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/media?parent=2436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/categories?post=2436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/tags?post=2436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}