Fear-Art | Agencja interaktywna, strony internetowe, sklepy internetowe.

Poniższy przykład pokazuje jak przy pomocy jQuery w prosty sposób ustawić obiekt na środku sceny (okna przeglądarki).

Obiekt jest automatycznie wyśrodkowywany, wertykalnie oraz horyzontalnie, w trakcie zmiany wielkości okna.

 

$(document).ready(function() {
    $(window).resize(function() {
        gotoCenter();
   });

 

 

 

function gotoCenter () {
        var mywidth = $(document).width()/2;
        var myheight = $(document).height()/2;
        var objwidth = $('.contrainer').width()/2;
        var objheight = $('.contrainer').height()/2;
        $('.contrainer').css('left', mywidth-objwidth);
        $('.contrainer').css('top', myheight-objheight);
        }
   gotoCenter();
});

DEMO

Jak zaokrąglić brzegi obiektu przy pomocy HTML'a, nie używając grafik, by działały pod wszystkimi przeglądarkami.

Otóż jest to możliwe tylko dla przeglądarek Safari, Firefox, Chrom i Opera.
Jak na nieszczęście IE nadal nie obsługuje tego parametru. Mam nadzieje, że zmieni się to wraz z IE9.

Aktualnie wszystkie ostatnie wersje w/w przeglądarek obsługują tag:

.box {
        border-radius:10px;
        }

Gdzie 10px to kont zaokrąglenia.

Zaokrąglenie możemy oczywiście zastosować również tylko do konkretnego rogu:

.box {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
}

 

Zniekształcenie zaokrąglenia możemy osiągnąć podając dwie różne wartości:

.box {
        border-top-right-radius: 10px 6px;
        }