Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > Jak zrobic ruchome thead?
Pełna wersja: Jak zrobic ruchome thead?
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

Vxen

08.07.2015, 09:43
wersja skryptu MyBB:1.8.x
adres forum: http://gameworld-rpg.pl/index.php
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Jak zrobic ruchome thead? Takie cos jak tu http://serwertruck.eu/index.php

[TUTAJ OPIS PROBLEMU + SCREENY - wykasuj tę linijkę!!!]

Daniel Praźmo

08.07.2015, 09:46
dyrektywa :hover z powiększoną pozycją x tła i dodanie opóźnienia animacji w css.
Ty w pierwszej koleności musiałbyś inaczej wypozycjonować tło swojego thead, bo z wyśrodkowanym będzie raczej problem by przesunąć, chyba że by to zrobić przy użyciu jQuery.

Vxen

08.07.2015, 10:01
A po Polsku? Nie wiem co ty piszesz...xd. Napisz krok po kroku...

Daniel Praźmo

08.07.2015, 10:03
Ech... Podaj zawartość swojej klasy .thead z global.css

Vxen

08.07.2015, 10:04
Kod PHP:
.thead {
    padding: 20px;
    background: #151515 url(images/revolution/thead.png) center;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: rgba(255, 255, 255, 0.82);
      font-family: Source Sans Pro;
    font-size: 14px;
    font-style: normal;
}

.thead a:link {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.thead a:visited {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.thead a:hover,
.thead a:active {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
      -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
} 

Daniel Praźmo

08.07.2015, 10:08
Kod PHP:
.thead {
    padding: 20px;
    background: #151515 url(images/revolution/thead.png);
    background-position: 0px 0px;
    background-clip: padding-box;
    color: rgba(255, 255, 255, 0.82);
    font-family: Source Sans Pro;
    font-size: 14px;
    font-style: normal;
    animation-duration: 0.5s;
}

.thead:hover{
    background-position: 30px 0px;
} 

Spróbuj tego

Vxen

08.07.2015, 10:11
Jest prawie ok, tylko skacze one a ma powoli lecieć.

Daniel Praźmo

08.07.2015, 10:12
Mój błąd, zamiast animation-duration: 0.5s; daj transition: background-position 0.5s; w klasie .thead

Vxen

08.07.2015, 10:15
No oo mam i nawet działa. A jak zrobić to http://grafifor.pl/?

Daniel Praźmo

08.07.2015, 10:19
W pierwszej kolejności musiałbyś mieć półprzezroczysty obrazek png z takimi bąbelkami czy czymśtam.
Potem to już analogicznie zmieniać jego pozycję jak w przypadku wyżej, plus dodać także zmianę koloru tła.

LikeLoveHate

08.07.2015, 11:14
http://www.w3schools.com/css/default.asp
Webboard > Wsparcie MyBB > Style, szablony i grafika > Jak zrobic ruchome thead?