Posts tagged css

Css text-shadow – czyli web’owy antyaliasing czcionek :)

0

Wpadł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 :)

AA „włączony”:
text-shadow: #939598 0px 0px 1px;
AA „wyłączony”:
text-shadow: #939598 0px 0px 1px;
VN:F [1.9.13_1145]
Oceń ten artykuł:
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.13_1145]
Rating: -3 (from 7 votes)

Przydatny Haczyk CSS na IE 8 i inne :)

0

Jeż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 :)

VN:F [1.9.13_1145]
Oceń ten artykuł:
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.13_1145]
Rating: 0 (from 0 votes)

Internet Explorer a CSS – przypadek list nieuporządkowanych

5

Internet 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.

VN:F [1.9.13_1145]
Oceń ten artykuł:
Rating: 6.0/10 (1 vote cast)
VN:F [1.9.13_1145]
Rating: 0 (from 0 votes)
Go to Top