{"id":11146,"date":"2014-04-04T11:54:57","date_gmt":"2014-04-04T11:54:57","guid":{"rendered":"http:\/\/www.oik-plugins.com\/?post_type=shortcode_example&#038;p=11146"},"modified":"2014-04-04T11:54:57","modified_gmt":"2014-04-04T11:54:57","slug":"bw_css-add-custom-gradient-background-drop-shadow-opacity","status":"publish","type":"shortcode_example","link":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/","title":{"rendered":"bw_css to add custom gradient background, drop shadow and opacity"},"content":{"rendered":"Here we demonstrate the bw_css shortcode to style the &lt;code&gt; tag.<!--more-->\r\n<div><style  type=\"text\/css\" media=\"screen,print\">\r\ncode {\r\n-moz-box-shadow: 0px 0px 17px #000000;\r\nbox-shadow: 0px 0px 17px #000000;\r\nfilter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f7edbf', endColorstr = '#58351a');\r\n-ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f7edbf', endColorstr = '#58351a')\";\r\nbackground-image: -moz-linear-gradient(top, #f7edbf, #58351a);\r\nbackground-image: -ms-linear-gradient(top, #f7edbf, #58351a);\r\nbackground-image: linear-gradient(top, #f7edbf, #58351a);\r\nopacity: 0.75;\r\n-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 75);\r\nfilter: alpha(opacity = 75); }\r\n<\/style><div class=\"bw_css\"><code><br \/>\ncode <span style=\"color: #00AA00;\">&#123;<\/span><br \/>\n-moz-box-shadow<span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">0px<\/span> <span style=\"color: #933;\">0px<\/span> <span style=\"color: #933;\">17px<\/span> <span style=\"color: #cc00cc;\">#000000<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n<span style=\"color: #000000; font-weight: bold;\">box-shadow<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">0px<\/span> <span style=\"color: #933;\">0px<\/span> <span style=\"color: #933;\">17px<\/span> <span style=\"color: #cc00cc;\">#000000<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n<span style=\"color: #000000; font-weight: bold;\">filter<\/span><span style=\"color: #00AA00;\">:<\/span> progid<span style=\"color: #00AA00;\">:<\/span>DXImageTransform<span style=\"color: #6666ff;\">.Microsoft<\/span>.gradient<span style=\"color: #00AA00;\">&#40;<\/span>startColorstr <span style=\"color: #00AA00;\">=<\/span> <span style=\"color: #ff0000;\">'#f7edbf'<\/span><span style=\"color: #00AA00;\">,<\/span> endColorstr <span style=\"color: #00AA00;\">=<\/span> <span style=\"color: #ff0000;\">'#58351a'<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n-ms-filter<span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #ff0000;\">&quot;progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f7edbf', endColorstr = '#58351a')&quot;<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n<span style=\"color: #000000; font-weight: bold;\">background-image<\/span><span style=\"color: #00AA00;\">:<\/span> -moz-linear-gradient<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #993333;\">top<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #cc00cc;\">#f7edbf<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #cc00cc;\">#58351a<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n<span style=\"color: #000000; font-weight: bold;\">background-image<\/span><span style=\"color: #00AA00;\">:<\/span> -ms-linear-gradient<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #993333;\">top<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #cc00cc;\">#f7edbf<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #cc00cc;\">#58351a<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n<span style=\"color: #000000; font-weight: bold;\">background-image<\/span><span style=\"color: #00AA00;\">:<\/span> linear-gradient<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #993333;\">top<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #cc00cc;\">#f7edbf<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #cc00cc;\">#58351a<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n<span style=\"color: #000000; font-weight: bold;\">opacity<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #cc66cc;\">0.75<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n-ms-filter<span style=\"color: #00AA00;\">:<\/span> progid<span style=\"color: #00AA00;\">:<\/span>DXImageTransform<span style=\"color: #6666ff;\">.Microsoft<\/span>.Alpha<span style=\"color: #00AA00;\">&#40;<\/span>Opacity <span style=\"color: #00AA00;\">=<\/span> <span style=\"color: #cc66cc;\">75<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">;<\/span><br \/>\n<span style=\"color: #000000; font-weight: bold;\">filter<\/span><span style=\"color: #00AA00;\">:<\/span> alpha<span style=\"color: #00AA00;\">&#40;<\/span>opacity <span style=\"color: #00AA00;\">=<\/span> <span style=\"color: #cc66cc;\">75<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">;<\/span> <span style=\"color: #00AA00;\">&#125;<\/span><br \/>\n&nbsp;<\/code><\/div><\/div>\r\n\r\n\r\nNote that CSS this affects ALL code tags on the page, including those in the sidebar.\r\n","protected":false},"excerpt":{"rendered":"<p>Here we demonstrate the bw_css shortcode to style the &lt;code&gt; tag.<\/p>\n","protected":false},"featured_media":0,"template":"","letters":[],"class_list":{"0":"post-11146","1":"shortcode_example","2":"type-shortcode_example","3":"status-publish","5":"entry"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>bw_css to add custom gradient background, drop shadow and opacity - [oik] plugins.com<\/title>\n<meta name=\"description\" content=\"Demonstrating the bw_css shortcode to style the tag.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"bw_css to add custom gradient background, drop shadow and opacity - [oik] plugins.com\" \/>\n<meta property=\"og:description\" content=\"Demonstrating the bw_css shortcode to style the tag.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/\" \/>\n<meta property=\"og:site_name\" content=\"[oik] plugins.com\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/\",\"url\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/\",\"name\":\"bw_css to add custom gradient background, drop shadow and opacity - [oik] plugins.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.oik-plugins.com\/#website\"},\"datePublished\":\"2014-04-04T11:54:57+00:00\",\"description\":\"Demonstrating the bw_css shortcode to style the tag.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Shortcode examples\",\"item\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"bw_css to add custom gradient background, drop shadow and opacity\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.oik-plugins.com\/#website\",\"url\":\"https:\/\/www.oik-plugins.com\/\",\"name\":\"[oik] plugins.com\",\"description\":\"WordPress plugins and themes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.oik-plugins.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"bw_css to add custom gradient background, drop shadow and opacity - [oik] plugins.com","description":"Demonstrating the bw_css shortcode to style the tag.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/","og_locale":"en_US","og_type":"article","og_title":"bw_css to add custom gradient background, drop shadow and opacity - [oik] plugins.com","og_description":"Demonstrating the bw_css shortcode to style the tag.","og_url":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/","og_site_name":"[oik] plugins.com","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/","url":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/","name":"bw_css to add custom gradient background, drop shadow and opacity - [oik] plugins.com","isPartOf":{"@id":"https:\/\/www.oik-plugins.com\/#website"},"datePublished":"2014-04-04T11:54:57+00:00","description":"Demonstrating the bw_css shortcode to style the tag.","breadcrumb":{"@id":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_css-add-custom-gradient-background-drop-shadow-opacity\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Shortcode examples","item":"https:\/\/www.oik-plugins.com\/shortcode_example\/"},{"@type":"ListItem","position":2,"name":"bw_css to add custom gradient background, drop shadow and opacity"}]},{"@type":"WebSite","@id":"https:\/\/www.oik-plugins.com\/#website","url":"https:\/\/www.oik-plugins.com\/","name":"[oik] plugins.com","description":"WordPress plugins and themes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oik-plugins.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/shortcode_example\/11146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/shortcode_example"}],"about":[{"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/types\/shortcode_example"}],"version-history":[{"count":0,"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/shortcode_example\/11146\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/media?parent=11146"}],"wp:term":[{"taxonomy":"letters","embeddable":true,"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/letters?post=11146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}