Szykowne narożniki, czyli Nifty Corners - Szykowne narożniki - Nifty Corners |
![]() |
![]() |
Strona 8 z 15 Przykład czwarty: z zaokrągleniami i bezW przykładzie dobrałem dwa bloki tej samej klasy. W pierwszym nie ma żadnych dodatkowych reguł CSS. Drugi jest niepowtarzalnym elementem wyróżnionym za pomocą selektora identyfikatora. Przykład pokazuje, jak wyglądają Nifty Corners z krawędziami (obwódkami). Zastosowano dwa odwołania do funkcji Rounded, aby otrzymać różne zaokrąglenia u góry i u dołu. Rounded("div#nifty","top","transparent","#FFC5FF","border #C0C0C0"); Rounded("div#nifty","bottom","transparent","#F0F0E7","small border #C0C0C0"); Aby nagłówek miał inne tło niż tekst, umieściłem dwa elementy potomne w bloku z małymi zaokrąglonymi narożnikami. Drobna uwaga dotycząca stosowania obwódki (krawędzi): skrypt akutomatycznie dodaje pionowe linie do elementów potomnych umieszczonych bezpośrednio w elemencie nadrzędnym (z zaokrąglonymi narożnikami), aby uniknąć deklarowania ich w CSS i umożliwić lepszy efekt w przypadku, gdy JavaScript jest wyłączony i realizowane są tylko dyrektywy CSS. Tak więc, jeśli otrzymujesz nienajlepszy efekt zastosowania obwódki, najprostszą drogą jest umieszczenie elementów w dodatkowym bloku ze wszystkimi zaokrąglonymi narożnikami. Sugeruję skorzystanie z tego rozwiązania także wówczas, gdy element z zaokrąglonymi narożnikami zawierać będzie więcej elementów potomnych, ponieważ skrypt zajmuje czas procesora na dodanie pionowych linii obwódki. |
|
Zmieniony ( 26.06.2007. ) |
następny artykuł » |
---|