[code] Image Opacity Table

POSTED: Sun Feb 03, 2013 7:01 pm

This table uses transparent .png's to make the background see through without compromising the clarity of the text.
Tammi's resource here has some bg's you can use, along with the ones I've provided - viewtopic.php?f=37&t=3283

http://www.ghostecho.net/st/b.png - Mid Black
http://www.ghostecho.net/st/b2.png - Highest black transparency
http://www.ghostecho.net/st/b3.png - Lowest black transparency

http://www.ghostecho.net/st/w.png - Least white transparency
http://www.ghostecho.net/st/w2.png - Most white transparency


ooc chat goes here [000]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare, lectus quis adipiscing fermentum, libero nibh auctor neque, vel iaculis metus nisl id enim. Praesent sollicitudin ligula vel ligula viverra quis gravida est dapibus. Pellentesque scelerisque, nibh sit amet facilisis tristique, purus nibh scelerisque purus, vitae fringilla quam mi non tortor. "Phasellus tincidunt facilisis felis. Nam facilisis leo non urna sollicitudin adipiscing." Donec pretium suscipit auctor. Nam cursus, sapien eu dictum scelerisque, tellus orci consectetur libero, vitae ultricies nisi urna lacinia mauris. Suspendisse porta aliquam neque a fringilla. Phasellus lacinia semper neque. Cras at nibh nisi, id euismod nisi.

Sed sit amet orci in ante semper accumsan. Aliquam eu feugiat leo. Morbi vitae velit non enim vehicula cursus quis eget purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. "Nulla vehicula interdum sodales. Praesent commodo, augue eu pretium scelerisque," turpis justo faucibus elit, "et interdum odio dolor sed nisl." Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris bibendum varius orci, nec scelerisque ante commodo nec. Nam ante massa, tincidunt non sagittis in, aliquet ac tortor. Suspendisse sagittis pulvinar metus, ac vehicula purus eleifend a. Etiam nisi eros, fermentum sit amet ultricies in, dapibus luctus libero. "Conubia nostra, per inceptos himanaeos"




Code: Select all
[html]<div class="doublebox"><div class="doublebox-in"><div class="doublebox-ooc">ooc chat goes here <b>[000]</b></div><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare, lectus quis adipiscing fermentum, libero nibh auctor neque, vel iaculis metus nisl id enim. Praesent sollicitudin ligula vel ligula viverra quis gravida est dapibus. Pellentesque scelerisque, nibh sit amet facilisis tristique, purus nibh scelerisque purus, vitae fringilla quam mi non tortor. <b>"Phasellus tincidunt facilisis felis. Nam facilisis leo non urna sollicitudin adipiscing."</b> Donec pretium suscipit auctor. Nam cursus, sapien eu dictum scelerisque, tellus orci consectetur libero, vitae ultricies nisi urna lacinia mauris. Suspendisse porta aliquam neque a fringilla. Phasellus lacinia semper neque. Cras at nibh nisi, id euismod nisi.</p>
</p></div></div><style type="text/css">.doublebox {width:630px; background-image:url('http://ghostecho.net/st/bs/two.png'); background-position:bottom center; background-color:#152532; background-repeat:no-repeat; border:1px solid #000; padding:10px 10px 100px 10px; margin:0px auto; text-align:justify;} .doublebox b {color:#FFEBD0;} .doublebox p {text-indent:50px; color:#9FA297; font:12px/1.75 Georgia; margin:0px;} .doublebox-in {padding:20px; margin:0px auto; background-image:url('http://www.ghostecho.net/st/b.png');  background-repeat:repeat;} .doublebox-ooc {font-style:italic; border-bottom:1px dotted #FFEBD0; color:#FFEBD0;}</style>
[/html]
in these bodies we will live, in these bodies we will die
and where you invest your love, you invest your life


avatar by raze

POSTED: Wed Feb 06, 2013 12:35 am

>.< Sorry for being a douche and using before you posted this. <33

avatar lineart © kiri 2013

User avatar
Lily
Luperci

POSTED: Tue Jul 16, 2013 11:03 pm

Giving this a bump because it seems the "ghostecho" transparencies are no longer working. :) Replace the repeating background with these instead: viewtopic.php?f=37&t=3283

-- And when you're replacing them, don't forget to put ('apostrophes') around them! Or else the image won't load and you'll spend a stupidly long time trying to figure out why. @_@

User avatar
Miyu
Luperci Gardener + Apothecary Mate to Niernan
Colibri perennial gardener memories of dahlias
caught in a sunbeam
eyes in the clouds

POSTED: Wed Aug 13, 2014 7:02 pm

I probably should read the whole thread before I put in a reply, right? >.>
Callum Knight

Casa di Cavalieri
First Cadet
User avatar
Katie
Luperci Mate to Veyra Pupsitter White Knight Rage, rage against the dying of the light

POSTED: Fri Aug 15, 2014 3:59 am

Transparent .pngs not working? O: Try RGBa color code instead by using it as a background color! (works in newer browsers, although translates to a solid color when it doesn't work! exception is IE 5.5 and down + Safari 2.x and down)

BLACK: rgba(0, 0, 0, .75) (adjust .75 to change transparency -- translates to percentages basically)
WHITE: rgba(225, 225, 225, .75)

And I also have a link to this color converter that converts regular hex color codes to RGBa ones. woohoo fancy.

also if you don't know the CSS for background color, it is background-color:rgba(0, 0, 0, .75) [change out the rgba(0, 0, 0, .75) part with adjustments and stuff], and it goes in the .doublebox-in div

You can also use it to lower the opacity on text-shadows and stuff like that, basically any colors can be made transparent.

Tirones (NPC)
User avatar
Kite
Luperci Falconer

POSTED: Wed Aug 20, 2014 6:35 pm

Also, this site is a great converter :)

User avatar
Sammiie
Luperci A kiss with a fist is better than none
I WANT YOU
I WANT YOUR EYES
I WANT YOUR WORDS

POSTED: Fri Aug 22, 2014 3:16 am

Ghostecho is apparently back up?
Lila Jordans



User avatar
Katie

Templates