{"id":16998,"date":"2011-02-18T01:46:56","date_gmt":"2011-02-18T06:46:56","guid":{"rendered":"https:\/\/friendburst.com\/blog-new\/16998\/sfbpc-resources\/"},"modified":"2011-02-18T01:46:56","modified_gmt":"2011-02-18T06:46:56","slug":"sfbpc-resources","status":"publish","type":"post","link":"https:\/\/friendburst.com\/blog-new\/16998\/sfbpc-resources\/","title":{"rendered":"SFBPC – Resources"},"content":{"rendered":"\n\n\n
\n
\n

  « Index<\/a><\/span><\/p>\n

CSS<\/span><\/p>\n<\/div>\n<\/td>\n

\n
\n

Resources<\/span><\/p>\n

.<\/span><\/p>\n

Semi-Transparent Code<\/strong><\/p>\n

\n

Now it is possible to use a “Dynamic URL” as a semi-transparent background!<\/span><\/p>\n

This is the URL: http:\/\/www.friendburst.com\/images\/tpng.php?size=10&color=000000&percentage=50<\/a><\/span><\/p>\n

It is known as a “tpng” URL (Dynamic URL that creates a transparent png). It eliminates the use of external png files for semi-transparency.<\/span><\/p>\n

Instructions: The URL has two parts to change, if you want to change the color and opacity. Note: It is not necessary to change the “size” part, as the dynamically created image will be repeated (tiled) in the background code in which you would use the URL. <\/span><\/p>\n

color=000000 …This part is for the background color. Change the hex code to the desired color. Color chart here<\/a><\/span><\/p>\n

percentage=50 …This part is for the opacity. Lower the number for more transparency, or raise the number for less transparency.<\/span><\/p>\n

To see the URL in action, click the URL above (you will see the dynamically created 10 pixel image). Go to the address bar in your browser. Change the color and percentage, then hit “Enter” on your keyboard to see the changes.<\/span><\/p>\n

Opacity example:<\/span>
\n<\/p>\n

Example of background color set to FriendBurst Red “bb0000” at 50 percent opacity:<\/span>
\n<\/p>\n

So, the URL would look like this:<\/span><\/p>\n

http:\/\/www.friendburst.com\/images\/tpng.php?size=10&color=bb0000&percentage=50<\/span><\/p>\n

*Note: Normally, you would use a number symbol (#) with hex color, as in layout CSS code. This dynamic URL does not use the number symbol, so you only need the color numbers to change the color.<\/span><\/p>\n

Basic background code to apply semi-transparency, using the tpng URL, to whichever element(s) you want to style:<\/span><\/p>\n

\n

css selector here {
\nbackground-image: url(http:\/\/www.friendburst.com\/images\/tpng.php?size=10&color=000000&percentage=50);
\nbackground-position: top left;
\nbackground-repeat: repeat;
\nbackground-attachment: fixed;
\n}<\/p>\n<\/div>\n

This “tpng URL” will be used in the “Semi-Transparent Profile code, coming soon.<\/span><\/p>\n<\/div>\n

___________________________________<\/strong><\/p>\n

Semi-Transparent PNG (Old Semi-Transparent Method)<\/strong><\/p>\n

\n

Example:<\/span>
\n<\/p>\n

*Right click and save.<\/span><\/p>\n

30% Black:<\/span><\/p>\n

<\/div>\n

30% Red:<\/span><\/p>\n

<\/div>\n

30% Orange:<\/span><\/p>\n

<\/div>\n

30% Yellow:<\/span><\/p>\n

<\/div>\n

30% Green:<\/span><\/p>\n

<\/div>\n

30% Blue:<\/span><\/p>\n

<\/div>\n

30% Indigo:<\/span><\/p>\n

<\/div>\n

30% Violet:<\/span><\/p>\n

<\/div>\n<\/div>\n

Profile Class And ID Reference:<\/strong><\/p>\n

\n

\"CSS\"<\/a><\/p>\n<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

  « Index CSS Resources . Semi-Transparent Code Now it is possible to use a “Dynamic URL” as a semi-transparent background! This is the URL: http:\/\/www.friendburst.com\/images\/tpng.php?size=10&color=000000&percentage=50 It is known as a “tpng” URL (Dynamic URL that creates a transparent png). It eliminates the use of external png files for semi-transparency. Instructions: The URL has two parts […]<\/p>\n","protected":false},"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-16998","post","type-post","status-publish","format-standard","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/16998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/comments?post=16998"}],"version-history":[{"count":0,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/16998\/revisions"}],"wp:attachment":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/media?parent=16998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/categories?post=16998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/tags?post=16998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}