21 lutego 2013

Półprzezroczyste tło w postach - sposób drugi


Witam. Dużo osób zwraca uwagę na to, że pierwszy sposób na półprzezroczyste tło w ogóle nie działa. Postanowiłam więc umieścić tu swoją metodę "prób i błędów".
Może wydawać się to niechlujne (dużo z tym paprania), ale dla mnie okazało się skuteczne.
  
Potrzebujemy małego, półprzezroczystego kwadracika. Niektóre osoby mogą posłużyć się Photoshopem - jednak jeżeli nie mamy tego programu, użyjemy Pixlr (aplikacja online, która nie wymaga rejestracji).

1. Wchodzimy na stronkę Pixlr <tutaj>.
2. Pokazuje nam się takie coś. Klikamy opcję, którą zaznaczyłam czerwoną ramką :)
3. Kolejne okienko przedstawia szerokość dokumentu, jaki chcemy utworzyć. Wpisujemy ręcznie 2 piksele w szerokości i 2 w wysokości. Zaznaczamy "przezroczysty".

4. Kwadracik jest bardzo malutki. Żeby lepiej go widzieć, musimy podciągnąć suwak przybliżenia na maksa (800%). Na drugi prostokąt nie patrzcie :D
5. Obrazek <tutaj>.
  1. Klikamy wiaderko.
  2. Klikamy w ten prostokąt, żeby wybrać sobie kolor, który chcemy nabrać.
  3. Ustalamy krycie. Ja dałam 43, możecie dać mniej (lub więcej) w zależności jak bardzo chcecie mieć przezroczyste to tło.
  4. Klikamy na nasz kwadrat raz (widzimy, że jest półprzezroczysty).
6. Zapisujemy! :D
7. Wybieramy format PNG, bo on dopuszcza półprzezroczystość. Dajemy OK.

 8. Wyskoczy nam standardowe okienko Windowsa, gdzie wybieramy lokalizację zapisu naszego pliku. Ja zawsze daję pulpit.

9. Wgrywamy nasz obrazek, żeby mieć do niego url. Ja zawsze wybieram imageshack.us, niektórzy wolą tinypic.com.

10. Wchodzimy w Szablon > Dostosuj > Zaawansowane > Arkusz CSS.

11. Wpisujemy komendę:

.post-outer {background: url(url_obrazka) repeat}
LUB
.post {background: url(url_obrazka) repeat}

Oczywiście "url_obrazka" zamieniamy na link do naszego kwadracika.

12. Patrzymy czy działa! >_<

13. Jeśli działa i nam się podoba, to dajemy "Zapisz zmiany".

24 komentarze:

  1. Prawda, że lekko zakręcone i popaprane. ^-^ :D

    OdpowiedzUsuń
  2. Piękna jesteś, wiesz? Śliczna taka, słodka i powabna. Nawet masz śliczne imię.
    Instrukcje też robisz śliczne, słodkie i powabne.

    Ciekawość mnie zżera czy pamięć o napisaniu opowiadania na konkurs masz tak samo śliczną, słodką i powabną :D

    OdpowiedzUsuń
  3. Uch, już nie wiem co robię źle >.<
    Powtórzyłem wszystkie punkty parę razy, krok po kroku, obrazki próbowałem wrzucać z pomocą różnych stron, położenie kodu też nic nie zmienia...
    Możliwe żeby jakieś inne ustawienie uniemożliwiały działalność tej komendy? Bo nie wiem serio o co chodzi ;-;

    OdpowiedzUsuń
  4. EDIT: Zadziałało mi, kiedy usunąłem z komendy słowo "-outer" Nie wiem czemu tak się dzieje, ale ważne, że działa. Wielkie dzięki za instrukcje, trudno ująć w słowa jak bardzo pomagacie :) Cóż, czekać tylko na więcej.
    W ogóle to ten nowy szablon na stronie głównej bardzo ładny, jak dla mnie lepszy niż poprzedni :)

    OdpowiedzUsuń
    Odpowiedzi
    1. No! Mogłam coś pokićkać, ewentualnie to zależy od bloga (tak jak pierwszy sposób nie działa dla wszystkich). Dopiszę jeszcze Twoją opcję, żeby ktoś skorzystał, jeżeli mu nie zadziała.
      Kończą mi się pomysły, dlatego instrukcje są dodawane nieczęsto ;d
      Jeśli chcesz pochwalić dziewczyny za szablon, to napisz komentarza tam - bo tu najprawdopodobniej nie odczytają ^^

      Usuń
  5. Ok ;)
    Hm, może instrukcje i komendy dotyczące gadżetów/stopki?
    Tego chyba jeszcze nie było :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie dodało mi mojego komenta...? :/
      Mam już pomysł na kolejną instrę - ostatnio na swoim blogu pobawiłam się kodami i zmieniłam avatara anonimowego oraz avatara osób z niezarejestrowaną nazwą. Podzielę się tym ^^

      Usuń
  6. Uwielbiam twoje instrukcje. Jak założę bloga chętnie z nich skorzystam. Nie raz przeglądając blogi zauważam, że tu gdzie jest post jest ramka, ale nie taka ramka zrobiona z linii ciągłych, czy kreskowanych. Ale taka jak w obrazie. Zwykła rama nie raz ozdobna. Na przykład coś takiego tylko pionowo: http://www.ramkicyfrowe.republika.pl/ramki-darmowe.png

    Anka

    OdpowiedzUsuń
    Odpowiedzi
    1. *o* dzięki!
      Da się tak ^^ Tylko powiedz mi - czy tam wewnątrz tej ramki jest dodatkowy suwaczek?

      Usuń
    2. A dasz instrukcję do zrobienia takiej ramki? To jakiś pomysł na notkę =D
      Instrukcje brzmią nieźle ale jak je wykonam to się przekonamy.
      Pozdrawiam!

      Usuń
    3. Dam. Miałam takie coś na blogu, tylko mnie strasznie irytował fakt, że nie mogłam normalnie dodawać komentarzy. Tylko najpierw zrobię instrukcję na suwaczek - bo żeby przesuwać notkę w tej ramce, trzeba mieć suwak :)
      Czyli rozpiska na najbliższe notki:
      1. Zmiana obrazków przy komentarzach anonimowych.
      2. Suwak, suwak wszędzie - w każdym gadżecie.
      3. Ramka-tło.

      Usuń
    4. Tak suwak w tej ramce był. I szczególnie mnie to zaciekawiło, ponieważ jeszcze się z ramką-tła nie spotkałam, i to wyglądało naprawdę ciekawie. :)

      Anka

      Usuń
  7. Dzięki Ci, o pani! Składam głębokie hołdy za pomoc ;**
    Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Szczęście Twe, pani, cieszy me serce.
      XD

      Usuń
  8. Przyznam, że używałam tego sposobu już wcześniej. Z reguły używam jednak innego selektora :) Niemniej instrukcja jest bardzo dobra i naprawdę przydatna. Pozdrawiam!

    OdpowiedzUsuń
    Odpowiedzi
    1. To taki sposób na obejście, jeśli nie działa komuś ten selektor (jest w innej nocie ten pomysł). Przyznam szczerze, że mi raz właśnie ten selektor działał, a raz nie - to chyba zależy od szablonu, jaki wybierze się na początku.

      Usuń
    2. Ja używam #Blog1 :)

      Usuń
  9. #Blog1 działa - to fakt, ale zaznacza troszkę inny obszar ^^

    OdpowiedzUsuń
  10. Bardzo przydała mi się ta wskazówka. Jeśli chodzi o ten ostateczny kod, to mi zadziałał ten drugi. Chętnie zobaczę inne Twoje instrukcje. ^^ Bardzo mi się przydadzą.

    OdpowiedzUsuń
  11. O mój boże! Jesteś cudowna! Pół dnia szukałam jak to zrobić, bo żadne kody mi nie chciały działać. Nawet nie masz pojęcia jak się cieszę. Normalnie bym Ci dała nobla za tę instrukcję! :D

    OdpowiedzUsuń
  12. Teraz ja - czyli blondynka :D Zastosowałam już Twoją instrukcję css do wstawienia obrazka jak nieruchomego tła. I wszystko pięknie zadziałało. Ale teraz chce więcej (tak pazerna jestem) i chciałabym uzyskać taki efekt : http://blog.piotrnalepa.pl/demo/transparency/przezroczystosc-demo.htm#1 (środkowy przykład) i moje pytanie - gdzie mam wstawić ten kod css co podajesz w przypadku zastosowania już poprzedniego? Mam nadzieję,ze nie zagmatwałam za bardzo :)

    OdpowiedzUsuń

szukaj