Rozpakowując ostatnie pudła, natrafiłem na trzy książki, które przez długi czas służyły mi pomocą. Aż się łezka w oku zakręciła, gdy je ponownie zobaczyłem. Z racji tematyki, były dosyć mocno eksploatowane, więc nie są pierwszej świeżości. Niemniej będą stanowić łakomy kąsek dla wszystkich zainteresowanych CSS. Książki, które dzisiaj mam zamiar wam oddać to:

Jeśli chcecie otrzymać te książki, wystarczy, że napiszecie wiadomość korzystając z formularza, do którego link znajdziecie w prawej kolumnie, z odpowiedzią na pytanie ile MB zajmuje moja poczta na koncie Gmail. Utrudnieniem będzie tutaj fakt, iż ilość zajmowanego miejsca przez pocztę sprawdzę dopiero po zakończeniu konkursu. Na poprawne odpowiedzi czekam do końca poniedziałku (23.08.2010). Powodzenia.

Od czasu do czasu trafia się do pocięcia layout, którego autor wpadł na pomysł, że stopka będzie miała dynamiczną wysokość, zależną od ilości treści na stronie. Zmienną wysokość uzyskiwałem zazwyczaj przy pomocy prostego skryptu Javascript, jednak zawsze wiedziałem, iż nie tędy droga. Niestety terminy są nieubłagane i nigdy nie było czasu poszukać rozwiązania tego problemu. W końcu zabrałem się za zbadanie problemu i okazało się, że jego rozwiązanie jest o wiele bardziej banalne niż na początku sądziłem. Wszystko sprowadza się do ustawienia koloru tła nie dla stopki, a dla znacznika body. Oczywiście należy ustawić pierwotny kolor tła dla diva, będącego kontenerem strony. Przykładowy dokument

<div id="page-content">
 <div class="page">
  lorem ipsum
 </div>
</div>
<div id="footer">
 <div class="page">
  text 1 | text 2 | text 3
 </div>
</div>

oraz styl

body {
    background-color: #dbdbdb;
    /* margin oraz padding powinny zostać zresetowane w pliku reset */
    margin: 0;
    padding: 0;
}

#page-content {
    background-color: #ffffff;
    /* height jest tylko na potrzeby przykładu */
    height: 400px;
}

/* przykładowe ustawienie szerokości treści */
.page {
    width: 800px;
    margin: 0 auto;
}

Jakiś czas temu w serwisie develway.pl pojawił się link do bloga Six Revisions, na którym przedstawiono opis nowego API Google. Tym razem firma ta wzięła się za typografię w sieci i wypuściła Font API.

Google Font API jest sposobem na uzyskanie na stronie “ładnych” czcionek bez konieczności uciekania do tanich sztuczek w postaci obrazków lub plików swf. Firma Google dostarcza galerię czcionek, z których możemy skorzystać oraz kod, który musimy dodać do naszej strony.

Jak to działa?

Zasada działania Google Font API jest bardzo prosta. Wystarczy, że do naszej strony dodamy kod

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Gdzie Font+Name jest nazwą czcionki z galerii. Od razu zaznaczę ważną rzecz. Wszystkie spacje muszą zostać zamienione na znak plusa (+). Jeśli chcemy wykorzystać więcej czcionek na naszej stronie, wystarczy, że oddzielimy je pionową kreską – |

Następnie stosujemy standardowy kod CSS, który wykorzystuje nową czcionkę. Należy pamiętać o dodaniu czcionki “zapasowej”, która zostanie użyta w przypadku problemów z wykorzystaniem niestandardowej czcionki.

<style>
  p {
	font-family: 'Font Name', serif;
	font-size: 48px;
  }
</style>

A tak to działa (i wygląda) w praktyce (tekst można zaznaczyć i skopiować):

Hello World!

Jeśli z jakiegoś powodu napis nie wygląda “ładnie”, oto zrzut ekranu

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Dzisiaj spotkałem się z problemem podczas wstawiania do aplikacji własnej embeed’owanej czcionki. Robi się to w CSSie w ten sposób:

@font-face {
src: url("../fonts/moja-czcionka.ttf");
fontFamily: MyFont;
}

Następnie w prosty sposób można ustawić czcionke dla np. Aplikacji:

Application {
fontFamily: MyFont;
}

Do tej pory wszystko działa bez zarzutu. Jednak, gdy ustawiałem czcionke dla przycisku:

Button {
fontFamily: MyFont;
}

no to coś nie grało, bo czcionka nie pojawiała się. Była to zwykła polska czcionka:

• styl – normalny
• grubość – normalna

Okazało się, że problemem był fakt, że Flex jako domyślną grubość czcionki dla przycisków ustawia bold, a moja czcionka była normalnej grubości. Stąd, po dodaniu jednej linijki do stylu przycisku:

Button {
fontFamily: MyFont;
fontWeight: normal;
}

wszystko działało. Trochę mnie zdenerwowała taka błahostka, bo spędziłem nad nią trochę czasu, dlatego mam nadzieje, że ten wpis go komuś zaoszczędzi.

Nie można kwestionować faktu, że jQuery.animate() jest jednym z najbardziej potężnych narzędzi jQuery. Służy on do animowania atrybutów CSS (czyli zmiany ich wartości w czasie od obecnego stanu A do definiowanego stanu B). Najprostszą implementacją jQuery Animate jest podanie zbioru atrybutów CSS, które mają ulec zmianie oraz czasu, w jakim ta zmiana ma nastąpić. Nie będę się zagłębiał w najprostsze przykłady użycia, są one dostępne w oficjalnej dokumentacji jQuery.

Należy pamiętać, że dzięki jQuery jesteśmy w stanie nie tylko płynnie zmieniać kolory, wielkość czcionki, obramowanie, ale także pozycje elementów, nadając stronie dynamicznego kształtu. Domyślnym sposobem animowania (easing) jest płynne przechodzenie. Istnieje natomiast sposób na zmianę adaptera animowania. Robert Penner – autor pluginu jQuery Easing dostarczył nam niewiarygodnie efektowne i proste w implementacji narzędzie. Na oficjalnej stronie pluginu można znaleźć wiele przykładów animacji, które dostarcza nam dodatek. Efekty widoczne są zwłaszcza przy animowaniu pozycji i wymiarów obiektu, ale następują także w przypadku zmiany koloru – czyli są aplikowane do zmiany stanu każdego z atrybutów CSS.

Dziś postaram się pokazać efekty, jakie można uzyskać za pomocą jQuery Animate rozszerzonego o jQuery Interface oraz Easing.

• Przykład różnego rodzaju easingu.

Pierwszym krokiem jest wygenerowanie własnej biblioteki jQuery Interface. Dzięki generatorowi, jesteśmy w stanie ściągnąć tylko te części Interface, które są nam de facto potrzebne, zmniejszając jednocześnie ilość kodu. Klikamy ‘deselect all components’, a w sekcji Effects wybieramy efekty, których będziemy używać. Mnie w tej chwili interesuje Bounce i Slide. W paczce otrzymamy wersję deweloperską (z wcięciami) oraz minified, gotową do publikacji na serwerze.

Do wykorzystania efektu slideowania a’la iPhone (elastyczne odbicie od krawędzi ściany ekranu) sprowadza się drobny kawałek kodu, w którym istotnym jest parametr easing:

$('#example').animate({ left: 500 }, { duration: 1000, easing: 'easeOutElastic' })

Na pewno komuś się przyda.

Część z was pewnie zapyta: „Ale po co?”. Ano dlatego, że istnieje wiele przypadków, w których programiści wyrywali sobie włosy z głowy, ponieważ nie mogli znaleźć przyczyny, z powodu której ich formularze nie chciały działać. Zapraszam do przeczytania całego wpisu

Problemy te mają miejsce, jak się można spodziewać, w starszych wersjach Internet Explorer’a, istnieją też pogłoski, jakoby kiedyś również Opera miała z tym kłopoty. Usterka wbrew pozorom trudna do wykrycia, formularz normalnie się przeładowuje, ale zamiast wpisanych danych albo nie dostajemy nic, albo jakieś krzaki. Co jednak zrobić jeśli nam koniecznie jest potrzebny obrazkowy przycisk wysyłania? Już tłumaczę. Załóżmy, że to będzie nasz przykładowy formularz:

<form method="post" action="">
<input type="text" name="dane" />
<input type="image" src="sciezka_do_obrazka.png" />
</form>

Jest to bardzo uproszczona wersja, jednak nic bardziej finezyjnego nie będzie nam teraz potrzebne. Mamy pole, w którym wpisujemy przykładowe dane i przycisk image. Jak się go pozbyć? Tu na pomoc przychodzi nam oczywiście CSS. Wystarczy, że zamiast interesującego nas inputa wstawimy:

<input type="submit" id="submit" />

A w arkuszu:

#submit{

width: 50px;

height: 20px;

display: block;

background: url(scieżka_do_obrazka.png) no-repeat;

}

I gotowe! Wymiary są oczywiście przykładowe i powinny być takie jak wymiary obrazka z przyciskiem. Jeśli macie jakieś uwagi i propozycje, piszcie

Blame

Tagged: CSS, image, input

Kaskadowe arkusze stylów oferują bardzo przydatną funkcjonalność – dziedziczenie właściwości. Polega ono na tym, że można w danym selektorze ustawić wartość właściwości na inherit. Właściwość taka będzie wówczas dziedziczyć konkretną właściwość z elementu rodzica. Najlepszym przykładem będzie tutaj kolor czcionki. Załóżmy sytuację, w której znacznik a znajduje się wewnątrz znacznika div, dla