Dwa tricki

https://xpil.eu/Q2l 📋

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!

 

https://xpil.eu/Q2l 📋