Michał Środek

Moje przemyślenia

Witaj na srodek.info

Jest to blog poświęcony nowoczelnym technologiom ułatwiającym tworzenie aplikacji internetowych. Znajdziesz tutaj porady na temat CSS3, JavaScript, designu, web-usability, standardów W3C.

Cześć! Nazywam się Michał Środek. Z zawodu programista php, z zamiłowania gitarzysta oraz fanatyk GNU/Linuksa(openSUSE® w laptopie). W branży aplikacji internetowych od 9 lat. Prywatnie bez dzieci i kota.

Pracuję wciąż nad własnym elastycznym i wydajnym frameworkiem MVC, kilkoma portalami internetowymi oraz mniejszymi bibliotekami php. Czekam na wasze opinie, zgłoszenia błędów oraz pomysły na dalszy rozwój.

Ta część strony jest w trakcie budowy a moje prace tymczasowo niedostępne.

Przypadku pytań, ofert pracy oraz ciekawych pomysłów proszę się ze mną kontaktować. Na głupie pytania nie odpowiadam.

Możesz mnie znaleźć i wysłać PW na php.pl(SHiP), jamendo.com(michalsrodek), goldenLine lub naszej-klasie

13 Październik 2009

Zaokrąglone krawędzie

Zaszufladkowany do: CSS — Tagi: — Michał Środek @ 21:19

CSS3 wpro­wa­dza nową — moim zda­niem — prze­ło­mową funk­cjo­nal­ność, która znacz­nie uła­twi kre­owa­nie stron inter­ne­to­wych. Jest to para­metr umoż­li­wia­jący two­rze­nie zaokrą­gleń. Co cie­kawe, zaokrą­gle­nia są na tyle inte­li­gentne, że wpły­wają także na obra­mo­wa­nia oraz cienie.

Skład­nia jest bar­dzo prosta:

border-radius: promień zaokrąglenia;

Przy­kład:

border-radius: 20px;
Lorem ipsum dolor sit amet…

Oczy­wi­ście możemy zde­fi­nio­wać różne war­to­ści dla poszcze­gól­nych narożników:

border-radius: przekątna-od-górnego-lewego przekątna-od-górnego-prawego;
border-radius: 20px 0px;
Lorem ipsum dolor sit amet…

Przy­kład 2:

border-radius: góra-lewy góra-prawy dół-prawy dół-lewy;
border-radius: 5px 20px 0px 50px;
Lorem ipsum dolor sit amet…

Możemy rów­nież okre­ślić sto­pień zaokrą­gle­nia pio­no­wego i pozio­mego każ­dego z naroż­ni­ków. Trzeba jed­nak użyć do tego stan­dar­do­wej nazwy para­me­trów dla kaz­dego z naroż­ni­ków tj. border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius. Każdy z tych para­me­trów posiada 2 opcje — pro­mień poziomy oraz pro­mień pionowy.

Przy­kład:

border-top-left-radius: 50px 20px;
Lorem ipsum dolor sit amet…

Obsługa w róż­nych przeglądarkach

Nie­stety skład­nia nie jest ujed­no­li­cona. W przy­padku prze­glą­da­rek opar­tych o sil­nik WebKit wystar­czy dodać –webkit– na początku kaz­dego z para­me­trów, dla fire­foxa są to:

  • –moz-border-radius,
  • –moz-border-radius-topleft,
  • –moz-border-radius-topright,
  • –moz-border-radius-bottomleft,
  • –moz-border-radius-bottomright

Opera nie obsłu­guje zaokrą­gleń lecz można użyć SVG do emu­la­cji tego efektu(pamiętajmy jed­nak, że nie będzie on posia­dał tych samych właściwości).

background:  silver url("border.svg");
-webkit-border-radius: 1em;
-moz-border-radius: 1em; border-radius: 1em;

Plik border.svg

<rect fill="white"  x="0" y="0" width="100%" height="100%" />
<rect fill="silver"  x="0" y="0" width="100%" height="100%" rx="1em"/>

O for­ma­cie SVG jed­nak napi­szę kilka oddziel­nych notek ponie­waż tech­no­lo­gia ta bar­dzo mi się podoba a jest pomi­jana w arty­ku­łach oraz pra­cach two­rzo­nych przez współ­cze­snych pro­gra­mi­stów stron internetowych.

Dodaj arty­kuł do:

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Gwar
  • Reddit
  • Technorati
  • Twitter
  • Wykop

2 komentarzy »

  1. dla fire­foxa jest są to:“ — lite­rówka ;)

    Komentarz - autor: Hs2 — 12 lutego 2010, 22:19

  2. @Hs2: Popra­wione ;)

    Komentarz - autor: Michał Środek — 12 lutego 2010, 22:26

Kanał RSS z komentarzami do tego wpisu. Adres URL dla TrackBacków

Dodaj komentarz