Janusz Barbacki

Janusz Barbacki Jack of all IT
trades, currently
procurement
specialist a...

Temat: Skokowa zmiana wielkośći div'a

Problem jest taki:
chciałem zrobić tło które przy granicy diva płynnie przechodzi w przezroczyste.
Pomysł to dwa w obrazki png. Jeden centralny z powtarzalnym wzorem, lewą i górną krawędzią przechodzącą w przezroczyste. Drugi z "ramką" prawa i dolna krawędź od środka zaczynająca się tym samym wzorem i przechodzącą na zewnątrz w przezroczyste. Po zgraniu połażenia tych dwóch obrazków powinno to dać tło zmiennych rozmiarów przechodzące w przezroczyste przy krawędzi.(wiem wiem będzie z tym trochę dłubania).
GŁÓWNY PROBLEM:
Żeby wzór nie "łamał" się na granicy obrazków szerokość i wysokość div'a musi być zawsze wielokrotnością wymiarów wzoru. z tond pytanie czy da się zmusić przeglądarkę by zmiana rozmiaru elementu(np.przy zmianie wymiarów okna) następowała skokowo np. co 20px.
Najchętniej bez użycia JS ale zdaje sobie sprawę że samym CSS może się nie dać

konto usunięte

Temat: Skokowa zmiana wielkośći div'a

a nie można jakoś jaśniej ... próbowałem :/

może jakiś przykład, obrazek (projekt) albo już strona w html?

konto usunięte

Temat: Skokowa zmiana wielkośći div'a

Bez js nie ma opcji.
Janusz Barbacki:
z tond
come on, rly?
Michał Stachura

Michał Stachura Dedykowane serwisy i
strony www -
http://santri.eu

Temat: Skokowa zmiana wielkośći div'a

Jeśli dobrze rozumiem intencję to wystarczy jesli 'przytulisz' diva z płynnym przejściem do krawędzi diva z tłem.


<div id="tlo" style="position: relative">
<div id="przejscie_po_prawej" style="position: absolute; right: 0px">
</div>
</div>


Jak dasz pozycjonowanie relatywne to w środku możesz pozycjonować absolutnie względem tego diva a nie początku strony.
Style oczywiście wywal do css'a, tutaj dałem tylko dla przykładu.
Dominik Marczuk

Dominik Marczuk Remote Team Lead w
Sonalake

Temat: Skokowa zmiana wielkośći div'a

Skokowych zmian się nie da osiągnąć bez JS, ale jeśli chcesz podłubać, to możesz przynajmniej początkowe wartości uzależnić od rozdzielczości:

<!-- komputery dla ludzi -->
<link rel="stylesheet" media="screen and (min-width: 1024px)" href="styleBig.css" />
<!-- komórki -->
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="stylePhone.css" />

Jedyny problem będzie z IE, bo w ogóle tego nie wspiera (ponoć jest w IE9, ale nie testowałem - i się nie spieszę).



Wyślij zaproszenie do