Do tej pory zawsze wszystkie czcionki ładowałem do jednego pliku CSS i robiłem ich wersje normalną i dla IE, o tak:

@font-face {
    font-family: Czcionka1;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.ttf);
}
@font-face {
    font-family: Czcionka2;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka2.ttf);
}
@font-face {
    font-family: Czcionka1IE;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.eot);
}
@font-face {
    font-family: Czcionka2IE;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka2.eot);
}

A następnie używałem ich przez definiowanie najpierw normalnej, a potem IE czcionki:

elem{
    font-family: Czcionka1,Czcionka1IE, Verdana;
}

Do tej pory nie wiem dlaczego tylko pod Operą powodowało to błędy, ale przyniosło to takie usprawnienia, że przestałem ładować EOTy do każdej przeglądarki, oraz to, że mogłem zacząć definiować czcionki tylko jedną nazwą, gdyż w stylach tylko dla IE, nadpisuje tylko nazwę:

<link rel="stylesheet" href="/fonts/fonts.css" type="text/css" />
<!--[if IE ]>
<link rel="stylesheet" href="/fonts/fontsIE.css" type="text/css" />
<![endif]-->

/*** PLIK fontsIE.css ***/

@font-face {
    font-family: Czcionka1;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.eot);
}

/*** Stosowanie(tylko jedna nazwa czcionki, zadnych dubli IE) ***/

elem{
    font-family: Czcionka1, Verdana;
}

To już jakieś usprawnienie!:-) Jednak doszedłem do wniosku, że lepiej stosować coś innego. Z uwagi, że to co odtwarzają przeglądarki z osadzanych czcionek, nie zawsze jest takie jakbyśmy chcieli, postanowiłem najpierw próbować załączyć oryginalną czcionkę a dopiero potem osadzaną.

/*** PLIK fonts.css ***/

@font-face {
    font-family: CzcionkaWEB;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.ttf);
}

/*** PLIK fontsIE.css ***/

@font-face {
    font-family: CzcionkaWEB;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.eot);
}

/***  Stosowanie - 'Czcionka' to oryginalna nazwa czcionki w systemie ***/
elem{
    font-family: Czcionka, CzcionkaWEB, Verdana;
}

Jak widać nawet błędy Opery się do czegoś przydają:-) Obyście jak najmniej utykali!

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.

Ostatnio robię dość duży projekt składający się z ponad 30 różnych podstron, więc możliwości walki z IE7 mam aż nadto. Oczywiście byłem na to gotowy więc od razu zaopatrzyłem się w wpis z warunkowym komentarzem:

<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

Znając magiczne właściwości zoom: 1; konsekwentnie ją dodawałem (w stylach dla IE) dla elementów, które się sypały i osiągnąłem coś takiego:

.box, box > div, .actionBar,div.singleRes .result,
div.forum .buttons, .action, .result,
.collection, .borders3{
    zoom: 1;
}

Gdy dziś w połowie projektu odkryłem, że na hoverach cała strona tańczy pod IE 7, to troszkę się zirytowałem. Mimo, że konsekwentnie testowałem każdą podstronę, to takie coś wyszło nagle. Miałem już kiedyś ochotę to zrobić, ale trochę się obawiałem. Tym razem jednak nic mnie nie powstrzymało i dodałem:

*{
    zoom: 1;
}

Efekt? Jak ręką odjął :-) Wszystko działa doskonale!

Co robi zoom: 1; ?

zoom: 1; powoduje, że elementy dostają legendarne hasLayout co automatycznie sprawia, że IE zaczyna poprawnie wyliczać wszelkie wartości naszych ostylowanych elementów. Dzięki temu nie ma wszelakich podwójnych paddingów, marginesów, żadnych efektów peek a boo(znikającego contentu, borderów), źle wyliczanych pozycji absolutnych… Ogólnie masa błędów automatycznie znika :-) Zostają jeszcze problemy z błędną implementacją float (flotowanie w prawo w elemencie floatującym w lewo ;-) ), ale to są rzeczy które zawsze można załatwić na kilka sposobów i to dość łatwych.

Dlaczego bałem się stosować zoom: 1 z gwiazdką?

Obawiałem się może naprawić za dużo :-) Póki co nie stwierdziłem efektów ubocznych tej magicznej pigułki, ale używajcie tego na własną odpowiedzialność, bo nie było jeszcze testowane na ludziach:-) W razie problemów można zastosować wyjątki od reguły w następujący sposób

*{
    zoom: 1;
}
dl dd{
    zoom: 0;
}

Miłego kodowania!

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.

Jak to działa ?

Kod CSS:

span{
 text-shadow: 1px 2px 3px #fff;
}

Pierwszy parametr(1px) to przesunięcie cienia względem tekstu po osi X, drugi(2px) po osi Y, trzeci(3px) to rozmycie(blur), a czwarty(#fff) to kolor cienia. O ile inne są dość zrozumiałe, to z blurem trzeba poeksperymentować, żeby zobaczyć jakie efekty można uzyskać.

Kolejną możliwością są tak zwane multi cienie(Multiple shadows), czyli definiowanie kilku cieni dla jednego elementu. Tu posłużę się przykładem z css3.info :

Kod CSS:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

Prawda, że piękne i genialne ? I jakie proste. Jedna sprawa odnośnie multi cieni: najbardziej na wierzchu jest cień zdefiniowany jako pierwszy, każdy kolejny ma niższy priorytet, czy jak kto woli z-index.
Teraz mały przykład odnośnie pseudoklasy :hover i cienia:

Chyba nie o to nam chodziło, ale i tak kod CSS:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33;
}
span:hover{
 text-shadow: -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

Żadne dopisywanie cieni na :hover nie ma miejsca. Normalnie trzeba zapisać całą linię dla text-shadow od nowa, czyli tak:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33;
}
span:hover{
 text-shadow:  0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

aby uzyskać:

Animowanie i jQuery a text-shadow

Mówiąc krótko nie ma obsługi dla animowania text-shadow w jQuery. Możliwe, że jest to spowodowane tym, że właściwość text-shadow dopuszcza definiowanie wielu cieni, albo nie jest to coś co powinno być obsługiwane domyślnie. Problemem jest też niemożność rozczłonkowania text-shadow na poszczególne składowe(text-shadow-blur, text-shadow-x, text-shadow-y, text-shadow-color), ale to ponownie wiąże się z multi cieniami, bo jakby to wtedy miałoby być zapisane? Jakkolwiek framework UIZE poradził sobie z tym zadaniem całkiem ładnie, co można sprawdzić tu.

Co jednak w tym temacie ma do powiedzenia jQuery?

Wraz z jQuery 1.4.3 pojawiły się cssHooks. Co to i jak to działa to sprawa na osobny artykuł, ważne że umożliwia rozbudowywanie funkcjonalności dostępnych przez .css() i.animate() poprzez napisanie odpowiednich pluginów. Tak się szczęśliwie składa, że znalazła się ekipa, która takie pluginy już szykuje. Na tej stronie dostępne są ich najnowsze pluginy umożliwiające animacje wielu właściwości css, w tym właśnie text-shadow. Przykład poniżej:

aby ten przykład zadziałał tak jak działa, potrzebne są pluginy color.js i textshadow.js (muszą być załączane w tej kolejności) z ww. strony oraz poniższy kod:

$("#ex5 span").click(function(){
  $(this)
  .animate({ textShadowX: 88 }, 1000)
  .animate({ textShadowY: 18 }, 1000)
  .animate({ textShadowColor: 'rgb(255, 0, 0)' }, 1000)
  .animate({ textShadowBlur: 13 }, 300);
 });

Niestety, nie działa to multi cienie, ale może coś jeszcze zmieni się w tej kwestii. Co do animacji pojedynczego cienia, to oczywiście można wykonywać wszystkie ruchy naraz, o tak:

Kod do tego:

$("#ex6 span").click(function(){
 $(this)
  .animate({ 	textShadowX: 88,
   textShadowY: 18,
   textShadowColor: 'rgb(255, 0, 0)',
   textShadowBlur: 13  }
  , 1000);
});

Hura! Czyli udało nam się animować text-shadow w jQuery. Wielkie propsy dla pulgino twórców ;-)

PS. To, że cały wpis nie wywiera wrażenia na IE to zrozumiałe, ale nie bardzo rozumiem dlaczego Opera 10.63 ma problemy i z multi cieniami i z animacją. Tajemnicza sprawa.

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 :).

Zacznijmy od przykładu, po lewej gotowe kółko, po prawej dowód, że wcześniej był to kwadratowy div:

Tak to wygląda w Firefoxie:

Kod CSS:

.circle{
 border: 5px solid #fff;
 width: 200px;
 height: 200px;
 -moz-border-radius: 105px;
 -webkit-border-radius: 105px;
 border-radius: 105px;
}

Jak jest z dostępnością techniki?

Jak działa w Internet Explorer?

Mówiąc krótko: NIE działa. Od wciąż obecnej wersji 6 przeglądarki Internet Explorer po obecną w wersji 8, nie ma żadnych oznak jakiejkolwiek obsługi zaokrąglania rogów. Wypadałoby wierzyć ,że Internet Explorer 9 będzie posiadał jakieś powiązanie z border-radius… ale to dopiero przyszłość. Internet Explorer 9 będzie miał obsługę border-radius, w dodatku w czystym CSS 3. Nareszcie!

Jak działa w Operze?

Tu wielki zawód, ponieważ nie działa. Wcześniejsze wersje opery obsługiwały rozszerzenie -o-border-radius, jednak wersja 9 wycofała obsługę tego rozszerzenia. Obsługa wróci około wersji 10.5(moje spekulacje z października, które okazały się prawdziwe) wraz z Presto 2.4. Co najlepsze, obsługa wróci już w wersji CSS 3 border-radius czyli bez własnych rozszerzeń w stylu o-border-radius.

Jak działa w Google Chrome?

Chrome(wersja 3) obsługuje border-radius w swoim rozszerzeniu -webkit-border-radius, ma jednak dwa zasadnicze problemy. Brak antialiasingu, przez co zaokrąglone rogi są postrzępione, co wygląda dość niezachęcająco. Drugim problemem jest łatwość zepsucia zaokrągleń poprzez przekroczenie maksymalnego możliwego promienia zaokrąglenia, czyli połowy wysokości pojemnika. Z tego co zauważyłem nie występuje to zawsze, albo po prostu zostało naprawione w jakimś cichym update chrome 3.x. Jakkolwiek należy zachować ostrożność. Na szczęście wersja 4 będzie obsługiwać border-radius bez rozszerzenia oraz pojawi się antialiasing!

Jak działa w Safari?

Ponieważ Safari (wersja 4) korzysta z tego samego silnika co chrome(WebKit), więc dostępne jest to samo rozszerzenie -webkit-border-radius. Safari jednak, w odróżnieniu od chrome obsługuje antialiasing i wszystko wygląda estetycznie. Z drugiej strony jednak otrzymuje w spadku łatwość zepsucia efektu okręgu. Również należy zachować ostrożność.

Jak działa w Firefoxie?

Firefox od wersji 3(wersja 2 ma problem z zaokrąglaniem teł) to wzór jeśli chodzi o poprawną obsługę właściwości border-radius, choć wciąż jako własne rozszerzenie -moz-border-radius. Obsługa antialiasingu, oraz brak problemu przekroczenia maksymalnego promienia sprawia, że technika ta jest najbardziej zalecana do stosowania w firefoxie.

Gdzie jeszcze jest dostępne border-radius?

Jest jeszcze obsługa w Konqueror  poprzez użycie -khtml-border-radius. Z tego co mi wiadomo, działa to bez problemu w wersji Linuxowej.

Jak animować border-radius?

Kwestia animacji jest dość istotna. Animujemy kolejno każdy róg, ale najpierw musimy przypisać style inline dla każdego rogu

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

Teraz animujemy każdy róg osobno:

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

Dopiero teraz wszystko działa jak należy :).

(Tabela tyczy się czasów zamierzchłych, obecnie wszystkie nowe browsery używaj notacji CSS 3)
Jest jeszcze jedna istotna sprawa w konwencji zapisu, jeśli chodzi o rogi. Konwencja mozilli jest odmienna od tej przyjętej w CSS 3 i trzeba zwrócić na to uwagę. Poniżej tabelka z właściwościami.

Stronę najlepiej oglądać w rozdzielczości 1024 x 768 w przeglądarce…

Czy zatem jeśli chcemy użyć tej techniki to wracamy do kierowania stron tylko pod konkretne przeglądarki?

Absolutnie nie. Podobnie jak zaokrąglone rogi, tak i same kółka to tylko „fajny bajer”, który zobaczą użytkownicy przeglądarek obsługujących ciut(przyszłości) ponad obecne standardy tworzenia stron WWW.

Czy to dyskryminacja? Raczej przedsmak przyszłych standardów…

Dla tych, którzy nie mają żadnego pojęcia o CSSie, polecam artykuł o tym jak go powiązać z plikiem HTML.

Jak to się zaczęło?

Pamiętam jak sam pierwszy raz dowiedziałem się o CSSie. Był to jakiś artykuł w Strefie WWW, która była kącikiem zamieszczanym na płytce CD-ACTION. To co mnie przyciągnęło do artykułu to kolorowe suwaczki w IE 5.5(ehh wtedy to tylko czekałem kiedy pojawi się IE 6 :D ), oraz linki, które podkreślały się dopiero gdy na pojawił się na nich kursor myszki! W tamtych czasach ledwo znałem HTML, więc JS był dla mnie tajemniczy i nieprzystępny (zwłaszcza gdy przeglądałem kilkudziesięcio kilo bajtowe kody JSowych zegarków) , dlatego możliwość dynamicznego podkreślania linków była dla mnie czymś cudownym.

Tak wyglądał kod CSS

a{
   text-decoration: none;
}
a:hover{
   text-decoration: underline;
}

Co w efekcie daje nam podkreślanie linków po najeździe:

Zamiast podkreślenia, można też przekreślić, ‘nadkreślić’, bądź zmienić kolor. Nabrudźmy trochę i zróbmy wszystko naraz:)

Kod CSS(zmieniamy tylko definicje a:hover)

a:hover{
   text-decoration: underline overline line-through;
   color: #ff0000;
}

Oczywiście magia pseudo-klasy hover nie ogranicza się do linków. Te same rzeczy można wykonywać ze zwykłym tekstem, czy to w span, p, div, czy zawartym w dowolnym innym znaczniku(body!). Jednak wykonywanie podkreślenia zwykłego tekstu przy najeździe było by mylące dla użytkowników(no k%$@, klikam ten link i NIC!!), dlatego też nie zalecam takich zabaw.

Zabawy z innymi znacznikami + :hover

Manipulacja stylami tekstu to dziecinne sztuczki. Prawdziwa zabawa z :hover zaczyna się dopiero przy manipulacji takimi właściwościami jak background-position, display, position czy z-index.

Np. Prosty przykład z rollover’em – kod CSS

div{
   height: 100px; /*Wysokość obrazka*/
   width: 150px; /* połowa szerokości obrazka*/
   background: transparent url(rollover.jpg) 0 0 no-repeat;
}
div:hover{
   background-position: -150px 0;
}

Jedyne co robimy w tym przykładzie to przesuwamy tło diva, ale nadal używamy jednego obrazka(jak widać poniżej). Ten efekt, rollover często stosowany jest na rozmaitych przyciskach dla uzyskania efektu wciśnięcia klawisza. Dobry przykład hoverowanych ikon do portali społecznościowych(wraz z kodem CSS) znajduje się pod adresem http://benjaminsterling.com/accessible-and-search-engine-friendly-image-rollover-with-css-and-sprites/ .

Hover’owane menu

Menu oparte o hovery to kolejna ciekawa rzecz. Inaczej zwie się je rozwijanym menu CSS. Co prawda menu poniżej nie wymaga działającego JS, ale IE 6 i niżej bez pomocy JS nie obsłuży takiego menu prawidłowo. Zacznijmy od kodu HTML:

<ul>
 <li>Pozycja 1
 <ul>
 <li>Pozycja 1.1</li>
 <li>Pozycja 1.2</li>
 <li>Pozycja 1.3</li>
 </ul>
 </li>
 <li>Pozycja 2
 <ul>
 <li>Pozycja 2.1</li>
 <li>Pozycja 2.2</li>
 <li>Pozycja 2.3</li>
 </ul>
 </li>
</ul>

Do tego kod CSS:

li > ul{
 display: none;
}
li:hover > ul{
 display: block;
}

Efekt:

Jak widać coś się dzieje, ale nie bardzo ma to ręce i nogi. Zasadniczo chciałem pokazać jak mała porcja CSS wystarczy do osiągnięcia efektu. Teraz szybciutko dołożymy kilka linijek stylu aby to wszystko jakoś wyglądało:

li{
 float: left;
 min-height: 20px;
 padding: 5px 0 0;
 text-align: center;
 background-image: none;
 background-color: #444;
 border: 1px solid #ff0000;
 margin-right: 10px;
 min-width: 120px;
}
li:hover{
 background-color: #111;
}
li > ul li{
 float: none;
 margin-right: 0;
 border: none;
}
li > ul li:hover{
 background-color: #1a1a1a;
}
li > ul{
 display: none;
 margin: 0;
}
li:hover > ul{
 display: block;
}

Ciekawa galeria zdjęć oparta o sam CSS

Ostatnią rzeczą dotyczącą :hover, jaką chciałem pokazać jest galeria. Najpierw zobaczmy jak to wygląda, potem kodzik i omówionko ;)

Na początek powiem, że w tym kodzie jest za dużo klas i osobiście unikam wszelkiej nadmiarowości, jednak aby kod był bardziej zrozumiały owe nadmiarowe klasy musiałem dodać. A teraz do meritum.

<div class="galeria">
 <div class="miniatury">
 <span class="male-foto"><img src="/custom-images/nuns-s.jpg" alt="" /><span class="duze-foto nuns"></span></span>
 <span class="male-foto"><img src="/custom-images/pm-s.jpg" alt="" /><span class="duze-foto pm"></span></span>
 <span class="male-foto"><img src="/custom-images/shut-s.jpg" alt="" /><span class="duze-foto shut"></span></span>
 </div>
</div>

Do tego kod CSS

.galeria{
 padding-top: 470px; /* tu ustawiamy miejsce na duże zdjęcie. Po najeździe tu pojawi się span */
 position: relative; /* nasz span będzie się pozycjonował względem tego elementu bo jako ostatni ma position inne od static
}
.miniatury{
 padding-left: 35px; /* Tylko wygląd */
}
.miniatury > span{
 float: left; /* Tylko wygląd */
 margin-right: 35px; /* Tylko wygląd */
}
.miniatury > span > span{
 position: absolute; /* pozycjonujemy */
 left: 0; /* w lewy */
 top: 0; /* górny róg diva .galeria */
 display: none; /* normlanie span jest ukryty */
 width: 505px; /* jakas szerokosc */
 height: 450px; /* jakas wyskosc */
 border: 1px solid #fff; /* Tylko wygląd */
}
.miniatury > span:hover img{
 background-color: #999; /* Tylko wygląd */
}
.miniatury > span:hover > span{
 display: block; /* kiedy nadrzędny span jest hoverowany, pokazujemy naszego spana z duzym zdjeciem */
}
span.pm{
 background: transparent url(../custom-images/pm.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}
span.nuns{
 background: transparent url(../custom-images/nuns.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}
span.shut{
 background: transparent url(../custom-images/shut.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}

Większość kodu omówiona jest w komentarzach. Cała sprawa opiera się na tym, że mamy znaczniki span, które zawierają w sobie img,czyli zdjęcie miniaturkę, oraz kolejny span, który jako tło ma ustawione duże zdjęcie. W tym przykładzie do pokazania jakie duże zdjęcie ma być tłem danego spana użył klas(pm, nuns, shut), ale zamiast tego można by użyć np. atrybutu id lub atrybutu style(inline-style).

Jedna uwaga na koniec. Obecnie przykłady 2,3 i 4 nie działają w IE 6. Możliwe jest jednak sprawienie aby działały. Krótko mówiąc wszystkie elementy, które mają zdefiniowaną pseudo-klasę :hover, trzeba zamienić na puste linki, czyli takie bez atrybutu href(np. w drugim przykładzie div zamieniamy na a – zmiana W HTML i CSS). W wypadku rozwijanego menu, wymaga to większej ilości zmian. Jeśli będzie potrzeba napiszę o tym osobny artykuł.

Na tym kończę te klika przykładów użycia pseudo-klasy :hover. Życzę Wam sukcesów w zabawach z hoverowaniem :)