Noteiktu paskaidrojumu izskats (hint)

Lappuse 1 no 1
1

uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » LIETOTĀJU WEB MATERIĀLI » Noteiktu paskaidrojumu izskats (hint) (dažādās krāsās)

wuxmachine

Sestdiena, 23.04.2016, 2:27:57 | Ieraksts #1

VECĀ MIESA

Foruma ieraksti: 930

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:

@wuxmachine raksta .. :

Kur vēlamies redzēt, tur ievietojam šo kodu:

Code

<div class="wTitle">TAVS PASKAIDROJUMS <div class="wTip"><div class="wText wColor">BUZZ.UCOZ.LV</div><div class="wTreug wColor2"></div></div>
</div>

@CSS ievietojam šo kodu:

Code

.wTitle {position:relative; cursor:help;}
  .wTitle .wTip {position:absolute; bottom:10px; left:0px; display:none;}
  .wTitle:hover .wTip {display:block;}
  .wText {border-radius:3px; max-width:220px; height:auto; padding:8px 10px; color:#fff; text-align:justify;}
  .wTreug {border-bottom:8px solid transparent; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid rgba(0, 0, 0, 0.8); width:0; height:0; margin-left:8px;}

  .wColor {background:rgba(0, 0, 0, 0.8);}
  .wColor2 {border-top:8px solid rgba(0, 0, 0, 0.8);}

Ja vēlamies zaļu, tad pēdējās 2 rindas (.wColor & .wColor2) mainām šīm:

Code

.wColor {background:rgba(180, 210, 60, 0.8);}
.wColor2 {border-top:8px solid rgba(180, 210, 60, 0.8);}