[code] Image Opacity Table
#1
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 - <!-- l --><a class="postlink-local" href="http://www.soulsrpg.com/forum/viewtopic.php?f=37&t=3283">viewtopic.php?f=37&t=3283</a><!-- l -->

<!-- m --><a class="postlink" href="http://www.ghostecho.net/st/b.png">http://www.ghostecho.net/st/b.png</a><!-- m --> - Mid Black
<!-- m --><a class="postlink" href="http://www.ghostecho.net/st/b2.png">http://www.ghostecho.net/st/b2.png</a><!-- m --> - Highest black transparency
<!-- m --><a class="postlink" href="http://www.ghostecho.net/st/b3.png">http://www.ghostecho.net/st/b3.png</a><!-- m --> - Lowest black transparency

<!-- m --><a class="postlink" href="http://www.ghostecho.net/st/w.png">http://www.ghostecho.net/st/w.png</a><!-- m --> - Least white transparency
<!-- m --><a class="postlink" href="http://www.ghostecho.net/st/w2.png">http://www.ghostecho.net/st/w2.png</a><!-- m --> - Most white transparency


[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>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. <b>"Nulla vehicula interdum sodales. Praesent commodo, augue eu pretium scelerisque,"</b> turpis justo faucibus elit, <b>"et interdum odio dolor sed nisl."</b> 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. <b>"Conubia nostra, per inceptos himanaeos"</b></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]


Code:
[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]
[html]<link href='http://fonts.googleapis.com/css?family=Mate+SC' rel='stylesheet' type='text/css'><div style="text-align:center; font-family: 'Mate SC'; margin:0px auto; font-size:20px; text-shadow:#FFF 0 0 2px;">in these bodies we will live, in these bodies we will die<BR>
and where you invest your love, you invest your life</div>[/html]

avatar by raze
  Reply
#2
>.< Sorry for being a douche and using before you posted this. <33

avatar lineart © kiri 2013
  Reply
#3
Giving this a bump because it seems the "ghostecho" transparencies are no longer working. :) Replace the repeating background with these instead: <!-- l --><a class="postlink-local" href="http://www.soulsrpg.com/forum/viewtopic.php?f=37&t=3283">viewtopic.php?f=37&t=3283</a><!-- l -->

-- 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. @_@
[html]
<div class="ColiSig">
<img src="http://i131.photobucket.com/albums/p292/Whistlejacket/colinier-req-sig.png" style="height:250px; z-index:-1; margin:0px 0px -70px;" />

<div class="buttonblock">
<a href="http://wiki.soulsrpg.com/index.php?n=Packs.Vin%e1tta"><img src="http://i.imgur.com/aD7Y5.png" title="Like Norse mythology? You can be a Viking too! Join us!"></a>

<a href="http://vn.soulsrpg.com/members/adoptables"><img src="http://pile.randimg.net/0/51/12793/Buttons.png" title="Wanna join us? Adopt a Vináttan today!"></a>

<a href="http://www.soulsrpg.com/forum/viewtopic.php?f=32&t=239"><img src="http://soulsrpg.com/images/pride/promo/votesouls_88x31_4.png" title="Vote 'Souls! And remind others to vote daily by bumping our voting topic!"></a>
</div>

<div id="signature-icons" class="iconblock">
<a href="http://wiki.soulsrpg.com/index.php?n=Players.Miyu" target="_blank" title="MIYU'S WIKI" class="player-wiki"></a><a href="#" class="reply-slow" title="REPLY SPEED: SLOW"></a><a href="http://www.soulsrpg.com/forum/ucp.php?i=pm&mode=compose&u=223" class="player-contact" title="CONTACT: PM Florina"></a><a href="http://wiki.soulsrpg.com/index.php?n=Characters.ColibriHaki#toc5" target="_blank" title="CHARACTER GALLERY &amp; CREDITS" class="ic-gallery"></a><a href="#" class="optime-preference" title="OPTIME unless otherwise stated. Visibly scarred and bobtailed."></a><a href="#" class="apparel-accessories" title="Wears her Frithr necklace with many rune beads."></a><a href="#" class="character-typical-location" title="Colibri is typically found in Jordheim or at the communal gardens; she rarely leaves VN."></a><a href="#" class="skill-medic" title="Colibri is an apothecary and can administer herbal cures and treat illness."></a><a href="http://wiki.soulsrpg.com/index.php?n=Characters.ColibriHaki" target="_blank" title="COLI'S WIKI" class="character-wiki"></a>
</div>

<a href="http://my.gpxpl.us/Whistle+Winstrate" target="_blank"><img src="http://p.gpxpl.us/zJRY.png" border="0" title="Praise the Helix!"></a>
</div>

<style>
@import url('http://sleepyglow.net/rp/icons/signature-icons.css');
.ColiSig {margin:0 auto; text-align:center; margin:0 auto; }
.ColiSig .buttonblock { margin:0 auto; }
.ColiSig .buttonblock a { opacity:.7; filter:alpha(opacity=70%); transition:200ms linear all; -moz-transition:200ms linear all; }
.ColiSig .buttonblock a:hover, .ColiSig .buttonblock a:active, .ColiSig .buttonblock a:focus { opacity:1; filter:alpha(opacity=100%); }
.ColiSig .iconblock { font-size:0; margin:0 auto; }
.ColiSig .iconblock { font-size:0; margin:0 auto; }
.ColiSig .iconblock a { opacity:.7; filter:alpha(opacity=70%); transition:200ms linear all; -moz-transition:200ms linear all; }
.ColiSig .iconblock a:hover, .ColiSig .iconblock a:active, .ColiSig .iconblock a:focus { opacity: 1; filter:alpha(opacity=100%); box-shadow: 0px 0px 2px #000; }
</style>

[/html]
  Reply
#4
I probably should read the whole thread before I put in a reply, right? >.>
[Image: f1qubc6.png]
  Reply
#5
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.
[html]
<div class="vendettaSig">
<img src="http://i.imgur.com/8Fg7DDn.png" style="height:200px; z-index:-1; margin:0px 0px -70px;" />
<div class="buttonblock">
<a href="http://wiki.soulsrpg.com/index.php?n=Packs.InferniAdoptable#adoptables"><img src="http://pile.randimg.net/0/87/21920/inferni-adoptables.png"></a>
<a href="http://inferni.soulsrpg.com/"><img src="http://inferni.soulsrpg.com/public/images/pride/if2.gif"></a>
</div>
<div id="signature-icons" class="iconblock">
<a href="#" class="optime-preference" title="OPTIME unless otherwise stated."></a>
<a href="#!" class="accompaniment" title="Vendetta is typically accompanied by a raven named Dart."></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.VendettaMassacre" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>
<a href="viewtopic.php?t=18720" title="OPEN FOR THREADS!" class="open-for-threads"></a>
<a href="#" class="reply-medium" title="REPLY SPEED: MEDIUM"></a>
<a href="ucp.php?i=pm&mode=compose&u=1886" class="player-contact" title="CONTACT: PM Vendetta"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Players.KiteAdoptions" class="adoptables-available" title="ADOPTABLES available!"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Players.Kite" target="_blank" title="PLAYER WIKI" class="player-wiki"></a>
</div>

</div>

<style>
@import url('http://sleepyglow.net/rp/icons/signature-icons.css');
.vendettaSig {margin:0 auto; text-align:center; margin:0 auto; }
.vendettaSig .buttonblock { margin:0 auto; }
.vendettaSig .buttonblock a { opacity:.7; filter:alpha(opacity=70%); transition:200ms linear all; -moz-transition:200ms linear all; }
.vendettaSig .buttonblock a:hover, .vendettaSig .buttonblock a:active, .vendettaSig .buttonblock a:focus { opacity:1; filter:alpha(opacity=100%); }
.vendettaSig .iconblock { font-size:0; margin:0 auto; }
.vendettaSig .iconblock { font-size:0; margin:0 auto; }
.vendettaSig .iconblock a { opacity:.7; filter:alpha(opacity=70%); transition:200ms linear all; -moz-transition:200ms linear all; }
.vendettaSig .iconblock a:hover, .vendettaSig .iconblock a:active, .vendettaSig .iconblock a:focus { opacity: 1; filter:alpha(opacity=100%); box-shadow: 0px 0px 2px #000; }
</style>

[/html]
  Reply
#6
Also, this site is a great converter :)
[html]
<div class="AxelleSigRaze">
<img src="http://i.imgur.com/K048GGB.png" style="height:300px; z-index:-1; margin:0px 0px -50px;" />
<div id="signature-icons" class="iconblock">
<a class="optime-preference" title="OPTIME unless otherwise stated"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.Itzal" class="accompaniment" title="Only accompanied by a hallucination of Itzal when specified"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.AxelleNapier" target="_blank" title="Character Wiki" class="character-wiki"></a>

<a class="reply-medium" title="Reply Speeds Vary"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=PlayersSammiieAdopts" class="adoptables-available" title="Adoptables available!"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Players.Sammiie" target="_blank" title="Player Wiki" class="player-wiki"></a>
</div>

<div class="button-block">
<a href="http://wiki.soulsrpg.com/index.php?n=Players.SammiieAdopts" target="_blank" title="Check out my adoptables!">
<img src="http://pile.randimg.net/0/91/22980/Adoptable%20Buttons.png">
</a>
<a href="http://anathema.soulsrpg.com/pack-procedures/joining" target="_blank" title="Join Anathema!">
<img src="http://i.imgur.com/TA8cEni.png">
</a>
<a href="http://wiki.soulsrpg.com/index.php?n=Packs.Anathema#adoptables" target="_blank" title="Anathema's Open Characters">
<img src="http://pile.randimg.net/0/101/25444/AT%20Adoptable%20Buttons.png">
</a>
</div>
</div>

<style>
@import url('http://sleepyglow.net/rp/icons/signature-icons.css');
.AxelleSigRaze {
margin:0 auto;
text-align:center;
margin:0 auto;
}
.AxelleSigRaze .button-block {
margin:3px auto;
}
.AxelleSigRaze .button-block a {
background-repeat: no-repeat;
display:inline-block;
position:relative;
margin:0;
opacity:.55;
filter:alpha(opacity=35%);
transition:200ms linear all;
-moz-transition:200ms linear all;
border-bottom: 3px solid transparent;
}
.AxelleSigRaze .button-block a:hover, .AxelleSigRaze .button-block a:active, .AxelleSigRaze .button-block a:focus {
opacity:1;
filter:alpha(opacity=100%);
}
.AxelleSigRaze .iconblock {
font-size:0;
margin:0 auto;
}
.AxelleSigRaze .iconblock {
font-size:0;
margin:0 auto;
}
.AxelleSigRaze .iconblock a {
display:inline-block;
position:relative;
margin:0;
opacity:.35;
filter:alpha(opacity=35%);
transition:200ms linear all;
-moz-transition:200ms linear all;
border-bottom: 3px solid transparent;
}
.AxelleSigRaze .iconblock a:hover, .AxelleSigRaze .iconblock a:active, .AxelleSigRaze .iconblock a:focus {
opacity: 1;
filter:alpha(opacity=100%);
}
</style>[/html]
  Reply
#7
Ghostecho is apparently back up?
[html]<style>
@import url('//fonts.googleapis.com/css?family=Tangerine');
@import url('/images/icons/postsig/signature-icons.css');
.LILASigOuter {width: 350px; margin: 0 auto; text-align: center; background-image:url('http://i.imgur.com/EOtPl86.png'); background-repeat: no-repeat; background-position: top center; padding-top: 85px;}
.LILASigName {font-family: 'Tangerine', cursive; font-size: 42px; text-shadow: 0 0 10px #fff; margin-bottom: -35px;}
.LILASigSplit {border-bottom: 1px solid black; margin-bottom: 5px; margin-top: -5px;}
#signature-icons a {
background-repeat: no-repeat;
display:inline-block;
position:relative;
margin:0;
opacity:.35;
filter:alpha(opacity=35%);
transition:200ms linear all;
-moz-transition:200ms linear all;
border-bottom: 3px solid transparent;

}
.LILASigOuter #signature-icons a:hover,
.LILASigOuter #signature-icons a:focus,
.LILASigOuter #signature-icons a:active
{
opacity:1;
filter:alpha(opacity=100%);
border-bottom: 3px solid #4f2f0f; /* change the color under the icons when you hover over them on this line */
}
</style>

<div class="LILASigOuter">
<span class="LILASigName">Lila Jordans</span>
<div class="LILASigSplit"></div>
<div class="buttonblock">
<a href="http://vn.soulsrpg.com/members/adoptables"><img src="http://pile.randimg.net/1/141/97765/VNadopts.png" title="Adopt a Viking today!"></a><a href="http://wiki.soulsrpg.com" target="_blank"><img src="http://soulsrpg.com/images/pride/promo/soulswiki_88x31.png" title="Edit the Wiki!"/></a><br/>

</div>
<div id="signature-icons">

<a href="http://wiki.soulsrpg.com/index.php?n=Players.Katie2" target="_blank" title="Player Wiki" class="player-wiki"></a><a href="#" class="reply-slow" title="Reply speed: slow"></a><a href="http://www.soulsrpg.com/forum/ucp.php?i=pm&mode=compose&u=571" class="player-contact" title="CONTACT: PM or AIM @ thirringingerfur"></a><a href="viewtopic.php?f=13&t=13892" target="_blank" title="Post Log" class="post-log"></a><a href="viewtopic.php?p=111840" title="Check my Thread Hub!" class="open-for-threads"></a><a href="#" title="I will roleplay mature material." class="will-mature"></a><br/>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.LilaJordans" target="_blank" title="Character Wiki" class="character-wiki"></a><a href="http://imgur.com/a/py2z0#0" target="_blank" title="CHARACTER GALLERY &amp; CREDITS" class="ic-gallery"></a><a href="#" class="character-typical-location" title="Character is usually found chasing the sheep or in Chloé and Taro's house."></a><a href="#" class="optime-preference" title="OPTIME unless otherwise stated."></a><a href="#" class="skill-animals" title="Character is skilled with animals."></a><a href="#" class="character-note" title="Lila was unable to shift prior to July DD, should a thread be backdated."></a>

<!-- Add any other icons you want here, and remove whichever ones you want -->
</div>
</div>[/html]
  Reply


Forum Jump: