Zakodowanie obrazka

[shaun_black]

Pociąłem taki obrazek na trzy części. Udało mi się go nawet jako tako zakodować, tylko mam problem z wyświetleniem na nim tekstu. Macie jakieś pomysły?

[bold]

A jaki jest problem? Dajesz to jako tło kontenera div, a w środku dajesz tekst

[shaun_black]

Dzięki wielkie, działa. Dopiero się uczę

[panek]

Witam, nie chce zaśmiecać foum nowymi tematami więc pisze tu bo mam podobny problem.

Jak pociąć taki background :

żeby się rozciągał gdy tekst długi itp (wiadomo że to potem) ale chodzi mi o sam CSS jak to zdefiniować?

Kolejne pytanie brzmi: da się w css wygładzić czcionkę? mam z tym problem, szukałem po necie i wszystko co znalazłem nie działało :/

liczę na pomoc i pozdrawiam

[k0l3c]

Z czcionkami ironicznie wymuszenie font-weight: normal daje często poprawę.

Dodatkowo do poczytania o innych metodach masz tutaj

Z tym gradientem znowu tutaj, przy czym musisz pamiętać o tym, aby strona była relative.

Gradient powinien iść zgodnie, ale szczerze nigdy z tego nie korzystałem.

[panek]

dzięki za odpowiedz ale dalej nie wiem jak pociąc, chodzi mi o to że widać tam końcówki zaokrąglone i mam podobny bg tylko ze z ramką jeszcze

[Presta]

Tniesz zakończenia grafiki na 4 części -> lewa, prawa, top, bottom

A środek możesz powielić: repeat-x

Ogólnie gdyby nie ten cień (nienaturalny) to miałbyś mniej problemów.

Wystarczyłoby wtedy samo: repeat-x + zaokrąglenie rogów (border-radius).

Chyba, że zrobisz cień za pomocą skryptu.

[k0l3c]

Albo w CSS3

[d4b]

Polecam:

https://www.colorzilla.com/gradient-editor/

https://css3generator.com/

[panek]

Tniesz zakończenia grafiki na 4 części -> lewa, prawa, top, bottom

A środek możesz powielić: repeat-x

witam, mógłbyś bardziej rozwinąć jak to zrobić? męczę się już chyba z 5h i szukam po necie czegoś co by podpowiedziało i nic :/ ciągle mi to nie wychodzi...

pociąłem to tak:

Nie mam zielonego pojęcia jak to podpisać żeby było tak jak w projekcjie PS.

Prosiłbym o jakiś przykład kodu css co mniej więcej tam zrobić.

[panek]

zna ktoś odpowiedź?

[kayman]

dla przykladu css z artisteer

.art-post-tr, .art-post-tl, .art-post-br, .art-post-bl

{

width: 36px;

height: 36px;

background-image: url('images/post_s.png');

}

.art-post-tc, .art-post-bc

{

left: 18px;

right: 18px;

height: 36px;

background-image: url('images/post_h.png');

}

.art-post-cr, .art-post-cl

{

top: 18px;

bottom: 18px;

width: 36px;

background-image: url('images/post_v.png');

}

->post_h

-> post_v

-> post_s

kawalek html (niepozamykkane znaczniki sa!)

<div class="art-layout-cell art-content">

<div class="art-post">

<div class="art-post-tl"></div>

<div class="art-post-tr"></div>

<div class="art-post-bl"></div>

<div class="art-post-br"></div>

<div class="art-post-tc"></div>

<div class="art-post-bc"></div>

<div class="art-post-cl"></div>

<div class="art-post-cr"></div>

<div class="art-post-cc"></div>

<div class="art-post-body">

<div class="art-post-inner art-article">

<h2 class="art-postheader">Welcome</h2>

<div class="art-postcontent"> //tu text artykulu

[Ecnelis]

Gradient raczej eliminuje pocięcie jego obrazka jako grafiki, chyba że zostawisz w środku jednorodny kolor, to znaczy:

1. Podzielisz obrazek na górę i dół.

2. Utworzysz dwa divy, jeden w drugim, środkowy z tekstem (zakładam, że minimalna wysokość całości jest taka, jak w pierwszym poście)

3. Tłem pierwszego diva będzie górny obrazek, najlepiej rozciągnięty w dół w kolorze, którym będzie się łączył dolnym, lub jeszcze prościej resztę wypełnić tym właśnie kolorem.

4. Tłem dolnego diva będzie obrazek dolny, wyrównany do dołu.

W innym przypadku pozostaje CSS3.

[bocian83]

hmmm a po co w ogóle używać tu obrazka ?! wszystko możesz CSS-em załatwić ... gradient, cień, zaokrąglone narożniki ...

dobrze że "specjaliści" nie kazali Ci tego jeszcze w tabele osadzić ... ludzie, żyjemy w XXI wieku ...

[panek]

problem już rozwiązany

dziękuje za pomoc :]