Mozilla Hacks: Eliptyczne obramowania w Firefoksie 3.5

W ramach serii tłumaczeń artykułów z bloga Mozilla Hacks, przedstawiam dzisiaj tłumaczenie artykułu Elliptical Borders in Firefox 3.5, którego autorem jest Lim Chee Aun (web developer z Malezji, autor ikon i motywu Phoenity). Oryginalny artykuł i jego tłumaczenie dostępne są na warunkach licencji Creative Commons Attribution 3.0 USA.

Własność border-radius jest prawdopodobnie jedną z bardziej interesujących części specyfikacji CSS 3, umożliwiającą tworzenie zaokrąglonych rogów elementów dokumentu. Na przykład:

div {

  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

}

W Firefoksie 3.5 własność -moz-border-radius jest obecnie zgodna z najnowszą wersją (roboczą – przyp. tłum.) specyfikacji CSS 3. Dzięki temu można tworzyć także eliptyczne obramowania.

Co to więc znaczy? Według specyfikacji składnia jest następująca:

-moz-border-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]?

Mamy tutaj zbiór wartości tej własności rozdzielonych ukośnikiem. Tutaj leży cała magia. Jeśli dwa zbiory wartości rozdzielone są ukośnikiem, wartości z lewej strony określają półoś poziomą, a wartości z prawej – półoś pionową.

Oferuje to ciekawe możliwości. Poniższe demo pokazuje kilka eksperymentów z różnymi kształtami, które można w ten sposób uzyskać.

W przykładzie tym eksperymentujemy nie tylko z grubością i promieniem/półosiami obramowania, ale także i jego stylem – o wartościach ridge, double i groove. Obecnie wartości dotted i dashed nie działają, wyświetlane są jak solid. Więcej informacji na ten temat znaleźć można w zgłoszeniu błędu Mozilli nr 431176 .

One response to “Mozilla Hacks: Eliptyczne obramowania w Firefoksie 3.5

  1. Jestem w trakcie tworzenia strony i eliptyczne obramowania w css nie chodzą w IE w.6

    Czy jest inny sposób rozwiązania problemu oprócz stosowania grafiki aby to chodziło w IE w.6 ?

    pozdr

    Mirek

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

MDN

Better JavaScript docs for a better Web on MDN

Archiwum

%d bloggers like this: