CSS jQuery Wordpress

Ostatnio robiąc testy działania projektu pod Joomla, zostałem zadziwiony tym, że pod Operą formularz z aiContactSafe leży i kwiczy, dokładnie nie ładuje się z powodu błędów JS. Po kilkugodzinnych oględzinach, usuwaniu i minimalizowaniu kodu, natknąłem się na ostrzeżenia o nie rozpoznanych czcionkach ładowanych przez @font-face. Po krótkiej zabawie okazało się, że psują czcionki EOT, czyli te robione dla IE. Prostym więc stało się, że trzeba ładować je tak aby były niewidoczne dla Opery. Read more

Od kiedy pisałem artykuł o CSS CIRCLES troszkę się pozmieniało. Mamy FireFoxa 5, Opere 11, Chrome 12, Internet Explorer 9 ogólnie, lepszy świat:-) Jak się okazało to pójście w przyszłość zdeaktualizowało moją technikę, ale na szczęście update już jest dostępny pod powyższym linkiem. Ogólnie zmiany są takie, że unormował się sposób animacji.

Zmiany to:

• Używamy notacji CSS 3
• Ustawiamy style inline dla każdego rogu, aby przeglądarka nie resetowała naszych ustawień podczas animacji
• Animujemy każdy róg osobno(w jednej animacji, ale rozpisujemy kolejno).
• I śmiga :-)!

Przykład:

$(this).css({
 borderTopLeftRadius: '0',
 borderTopRightRadius: '0',
 borderBottomLeftRadius: '0',
 borderBottomRightRadius: '0'})
.animate({
 borderTopLeftRadius: '50',
 borderTopRightRadius: '50',
 borderBottomLeftRadius: '50',
 borderBottomRightRadius: '50'
},500);

Żywy przykład w oryginalnym artykule.

Czasy robienia stron pod IE 6 są już szczęśliwie za nami, więc większość koderów może rozłożyć skrzydła i zacząć choćby używać pseudo klasy :hover na każdym elemencie. Z odejściem do lamusa każdej kolejnej przeglądarki IE będziemy mogli w standardzie używać coraz większego zestawu ciekawostek CSS. O ile nie pamiętam kiedy ostatnio poprawiałem jakiś błąd pod IE 8, o tyle pod IE 7 zdarza się to przy każdym zleceniu. Szacunkowo jeszcze przez około 1.5 roku będzie potrzeba walki z IE 7, więc warto się dowiedzieć jak się nie męczyć :-) Read more

text shadow – co i po co

text-shadow pozwala realizować prosto te sprawy, które od dawna szykowali graficy, a których implementacja na stronie, wymagała użycia grafik, bądź też rozwiązań javascriptowych, albo dublowania tekstu wraz z użyciem przemyślnego(no dobra, prostego) stylu opartego na pozycjonowaniu absolutnym. Czyli mowa o cieniu pod tekstem. Ponieważ jednak, sam cień w sobie nie ma wartości informacyjnych a estetyczne, był on też po prostu często ignorowany przez koderów. Obecnie jednak rynek przeglądarek wygląda tak, że większość userów może zobaczyć już cienie dodawane z poziomu CSS, a reszta będzie mogła je podziwiać niedługo wraz z premierą IE 9( choć patrząc na tabelę obsługiwanych właściwości, zapis przy text-shadow nie nastraja optymistycznie). Wydaje mi się, że można więc porzucić wszelkie zastępcze techniki i zacząć stosować najzwyklejsze w świecie text-shadow. Read more

O Css Circles

Css Cirlces(inaczej zwane przeze mnie techniką planet) to po prostu stosowanie okręgów/kół zamiast standardowych czworokątów( z mniej lub bardziej zaokrąglonymi rogami) w roli pojemników na treść.

Technika Css Circles opiera się głównie o właściwość CSS 3 jaką jest border-radius. Tak naprawdę pojemnikami są nadal zwykłe kwadratowe divy, paragrafy czy inne HTMLowe obiekty, tyle że ich rogi zaokrąglone są do maksimum. Dokładniej do połowy długości boku i należy uwzględnić border-width. Zaokrąglając każdy róg w ten sposób otrzymujemy okrąg :). Read more

Zgrzeszyłem, że ten artykuł nie ukazał się jako pierwszy na tym blogu. W końcu domena do czegoś zobowiązuje, nieprawdaż? Tym artykułem zamierzam się poprawić, więc zaczynajmy czym prędzej!

Read more