Posts tagged css
Css text-shadow – czyli web’owy antyaliasing czcionek :)
0Wpadłem dzisiaj na bardzo fajny pomysł „wymuszenia” antyaliasingu czcionek w przeglądarkach internetowych.
Wiem, wiem, można to włączyć sobie w systemie, badzIEwie Microsoftu ma tą funkcję wbudowaną od wersji 7, ale mi chodzi o „uruchomienie” tego w każdej nowszej przeglądarce.
Jak to zrobić? To banalnie proste
W CSS do selektora body należy dodać:
body {
text-shadow: #939598 0px 0px 1px;
}
Wyjaśnienie:
text-shadow - atrybut css odpowiedzialny za rzucanie cienia
#939598 - kolor cienia pod czcionką, który symuluje AA, najlepiej użyć koloru 50% czarny
0px 0px – położenie cienia względem czcionki
1px – rozmiar rozmycia cienia.
Poniżej podaję przykłady w użyciu
Przydatny Haczyk CSS na IE 8 i inne :)
0Jeżeli ktoś ma problem z arkuszami CSS i zgodnością z IE proszę bardzo oto lek na całe zło
Ten zapis spowoduje iż element uaktywni się w IE 8 tylko w trybie zgodności:
.classnameOrElement{color /*\**/: blue\9}
Z kolei ten zapis spowoduje uaktywnienie się we wszystkich przeglądarchach IE:
.classnameOrElement {color: blue\9 }
Na zdrowie
Internet Explorer a CSS – przypadek list nieuporządkowanych
5Internet Explorer w przeciwieństwie do innych przeglądarek nie interpretuje CSS „prawidłowo”. Użyłem słowa prawidłowo, bo jak wszyscy wiedzą Microsoft zaprogramował IE w taki sposób, że interpretuje on CSS na swój własny wypaczony sposób. Przykładem tego może być zachowanie IE w przypadku elementu <ul>, czyli listy nieuporządkowanej. Konkretnie, jeżeli będziemy chcieli zmienić domyślny wygląd elementu listy nieuporządkowanej poprzez dodanie atrybutu list-style-image w CSS w celu zdefiniowania graficznego znaku wypunktowania listy IE pokaże grafikę tylko kiedy elementy <li> nie będą miały dodanego atrybutu float (oblewanie). Wtedy znaki graficzne w IE nie będą wyświetlane. Aby rozwiązać ten problem należy użyć następującej sztuczki. Poniżej kod:
HTML
<ul>
<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li>
<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li>
<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li></ul>
CSS
ul {
list-style-type: none
}
li {
height: 20px;
display: block;
background-image: url(../gfx/link-bullet.jpg);
background-repeat: no-repeat;
padding-left: 20px;
float: right;
text-align: left;
margin-right: 20px;}
Wyjaśnienie, zamiast atrybutu list-style-image który nie jest poprawnie obsługiwany przez IE użyłem background-image i wskazałem plik graficzny. Zadałem CSS aby wyświetlał <li> jako blok i zadałem mu margines z lewej strony o szerokości pliku graficznego co pozwoliło odsunąć napis z nad grafiki.