Dwa tricki

Trick numer 1: jak zamienić nudny, płaski tytuł bloga w wersję 3D?

Najpierw kombinowałem z obrazkiem. Czyli: screenshot, wyciąć nagłówek, wkleić go do Paint.NET, obrócić, zapisać, wysłać na serwer, ustawić jako logo w nagłówku. Voila!

Tylko że takie logo zajmuje pi x oko 20-25KB miejsca. Szkoda marnować aż tyle bajtów na ledwie kilka literek.

Siadłem więc, poskrobałem się po siwiejącej łepetynie i wykoncypowałem, że przecież musi się dać, za pomocą CSS, c’nie? CSS „umi” dużo bardziej zaawansowane rzeczy, niż prosty obrót.

No i wykombinowałem:

div.header-content {perspective: 600px;}
div.header-content .logo {transform:rotateY(30deg);}

Najpierw należy włączyć perspektywę (głębię) w kontenerze nadrzędnym (w zależności od motywu może się on nazywać tak lub inaczej, tu: kontener „.header-content”), a następnie obrócić element właściwy (tu: kontener „.logo”) wokół osi pionowej (Y) o ileś-tam stopni (tu: 30, ale jak ktoś woli więcej czy mniej to już jego sprawa).

Drobną wadą powyższego rozwiązania jest to, że przeglądarki nieobsługujące w CSS obrotów 3D będą wyświetlać logo „proste”.

Cóż. Nikt nie jest idealny.

Trick numer 2: tło PNG.

Po niedawnym przejściu na nowy motyw okazało się, że wszystkie obrazki typu PNG zaczęły wyświetlać czarne tło, zamiast białego. Problemem okazało się wymuszone przez motyw pozycjonowanie i zmiana rozmiarów, które w jakiś dziwny sposób wpływają na kolor tła (wiem, że to brzmi kretyńsko, ale tak właśnie jest – StackOverflow nie kłamie). W związku z tym należy wymusić białe tło poprzez usunięcie przezroczystości oraz zastąpienie pikseli przezroczystych – białymi. Co prawda jeżeli w przyszłości będę chciał zamiast tego tło różowe czy amarantowe, to już się tak łatwo nie da, bo operacja jest nieodwracalna, ale nie szkodzi.

Jak zmienić tło we wszystkich plikach PNG z przezroczystego na białe?

Jeżeli mamy dostęp do wiersza poleceń naszego serwera, wystarczy skorzystać z polecenia convert z pakietu imagemagick, wspartego starym, dobrym, linuksowym find. O, tak:

find . -type f -iname '*.png' -exec convert {} -background white -alpha remove {} \;

Czekamy pięć minut (albo mniej, albo więcej, w zależności od tego, ile mamy plików PNG na naszym blogu) i gotowe. Bonusik: usunięcie kanału alfa odrobinkę zmniejsza rozmiar pliku PNG, a więc blog będzie teraz działał niezauważalnie szybciej. Yay!

 

Autor: xpil

Po czterdziestce. Żonaty. Dzieciaty. Komputerowiec. Krwiodawca. Emigrant. Rusofil. Lemofil. Sarkastyczny. Uparty. Mól książkowy. Ateista. Apolityczny. Nie oglądam TV. Uwielbiam matematykę. Walę prosto z mostu. Gram na paru instrumentach. Lubię planszówki. Słucham bluesa, poezji śpiewanej i kapel a’capella. || Kliknij tutaj po więcej szczegółów ||

Dodaj komentarz

6 komentarzy do "Dwa tricki"

Powiadom o
avatar
Sortuj wg:   najnowszy | najstarszy | oceniany
P R
Edytor

No i przy okazji zmniejszyły się literki i ciężko mi się czyta.

wpDiscuz