QT Tool

QuellText Tool & HTML Testbox

 
*
*
 

[bbCodes] SchildSmiley :: SprechBlase :: DenkBlase

__ " " Spielereien mit Custom bbCodes
Hausordnung
Auch Gäste können hier gerne Beiträge verfassen.
Unpassende Beiträge werden kommentarlos entfernt.

[bbCodes] SchildSmiley :: SprechBlase :: DenkBlase

Beitragvon Gürteltier » Di 4. Nov 2014, 00:32

Hi,

heute mal ein paar nette bbCodes mit kleinen CSS-Gimmicks:

1) SprechBlase
2) DenkBlase
3) SchildSmiley


:!: Diese bbCodes können einfach im ACP ohne Datei-Änderungen eingefügt werden :!:


1) SprechBlase

Nutzung: [sprechblase]{TEXT1}##{TEXT2}[/sprechblase]

HTML-Ersetzung:
Code: Alles auswählen
<div class="bubble_container">

    <script type="text/javascript">
    //<![CDATA[
    css=".this_speech_bubble{background-color:beige;border:1px solid green;border-radius:12px;text-align:center;padding:12px;position:relative;margin-bottom:12px;}.this_speech_bubble .bubble_arrow{border-style:solid;position:absolute;}.manage_position_bottom{border-color:green transparent transparent transparent;border-width: 8px 8px 0px 8px;bottom:-8px;} .manage_position_bottom:after{border-color:beige transparent transparent transparent;border-style:solid;border-width:7px 7px 0px 7px;bottom:1px;content:'';position:absolute;left:-7px;}.bubble_smiley{position:relative;left:16px;}.bubble_container{position:relative;display:inline-block;padding:22px;}"; 
    head
=document.head||document.getElementsByTagName("head")[0];style=document.createElement("style");style.type="text/css";style.id="smiley_bubble";style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css));document.getElementById("smiley_bubble")||head.appendChild(style); 
    
//]]>
    </script>

    <div class="this_speech_bubble">
        <div class="bubble_arrow manage_position_bottom"></div>
        {TEXT1}
    </div>

    <div class="bubble_smiley">
        {TEXT2}
    </div>
</div>
<br />

Tipp: Nutzung: [sprechblase]Beitragsteil##smiley[/sprechblase] WICHTIG: Die beiden ## zwischen Text und Smiley


2) DenkBlase

Nutzung: [denkblase]{TEXT1}##{TEXT2}[/denkblase]

HTML-Ersetzung:
Code: Alles auswählen
<div class="think_bubble_container">
    <script type="text/javascript">
    //<![CDATA[
    css=".think_bubble_container{position:relative;display:inline-block;padding:22px;}.bubble_style{background-color:white;border:1px solid black;position:relative;}.this_think_bubble{background-color:white;border:2px solid black;border-radius:12px;text-align:center;padding:8px;margin-bottom:-4px;}.bubble_top{background-color:white;border-radius:8px;height:16px;width:16px;position:relative;margin-bottom:-10px;margin-left:22px;}.bubble_middle{background-color:white;border-radius:6px;height:12px;width:12px;margin-bottom:-8px;margin-left:43px;}.bubble_bottom{background-color:white;border-radius:4px;height:8px;width:8px;margin-bottom:-5px;margin-left:60px;}.bubble_micro{background-color:white;border-radius:2px;height:4px;width:4px;margin-bottom:-8px;margin-left:73px;}.think_image{margin-left:86px;}"; 
    head
=document.head||document.getElementsByTagName("head")[0];style=document.createElement("style");style.type="text/css";style.id="style_think_bubble";style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css));document.getElementById('style_think_bubble')||head.appendChild(style); 
    
//]]>
    </script>
    <div class="this_think_bubble">{TEXT1}</div>
    <div class="bubble_style bubble_top">&nbsp;</div>
    <div class="bubble_style bubble_middle">&nbsp;</div>
    <div class="bubble_style bubble_bottom">&nbsp;</div>
    <div class="bubble_style bubble_micro">&nbsp;</div>
    <div class="think_image">{TEXT2}</div>
</div>
<br />

Tipp: Nutzung: [denkblase] Beitragsteil ## smiley [/denkblase] WICHTIG: Die beiden ## zwischen Text und Smiley


3) SchildSmiley

Nutzung: [schild]{TEXT1}##{TEXT2}[/schild]

HTML-Ersetzung:
Code: Alles auswählen
<div class="sign_container">
    <script type="text/javascript">
    //<![CDATA[
    css=".sign_container{color:black;position:relative;display:inline-block;padding:22px;}.this_sign{padding:8px;border-radius:5px;border:3px solid peru;background:khaki;text-align:center;}.sign_handle{border-left:4px solid peru;margin-left:46%;padding-top:8px;}.sign_smiley{position:relative;margin-left:-1px;}"; 
    head
=document.head||document.getElementsByTagName("head")[0];style=document.createElement("style");style.type="text/css";style.id="style_sign_smile";style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css));document.getElementById('style_sign_smile')||head.appendChild(style); 
    
//]]>
    </script>
    <div class="this_sign">{TEXT1}</div>
    <div class="sign_handle">
        <div class="sign_smiley">{TEXT2}</div>
    </div>
</div>
<br />

Tipp: Nutzung: [schild] Beitragsteil ## smiley [/schild] WICHTIG: Die beiden ## zwischen Text und Smiley


Demos:

Mami hat mir zum Geburtstag einen ...



... einen Rasierapparat geschenkt :mrgreen:
Bild



E = mc²
 
 
 
 
Bild



Wenn das klappt, fress ich nen Besen :lol:
Bild



Viel Spaß damit und LG...
<"}))}~
__"_"___________________________________________do not feed___________________________________________/*
  • BenutzeravatarBenutzeravatar

Gürteltier

Administrator
 
Beiträge: 149
Registriert: Fr 3. Mai 2013, 19:29
Wohnort: An der Ostsee

> [bbCodes] SchildSmiley :: SprechBlase :: DenkBlase

Beitragvon micky36 » Di 14. Jun 2016, 13:53

sehr interessant
micky36
Pango-Noob
 
Beiträge: 3
Registriert: Di 14. Jun 2016, 13:37


Zurück zu <"}))}~ Custom bbCodes

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste

cron