2010. május 25., kedd

Lekerekítés

Vidám Fűz tette fel a kérdést, hogy most akkor ez így hogyan? 3 féle megoldás van. A kedvencem a CSS3-as megoldás, ami nem működik Internet Explorer és Opera alatt sem, (Operához egy másik megoldás van, azt most nem fejtem ki). Ehhez itt egy nagyon jó kis leírás: http://www.css-3.hu/2009/09/kerekitett-sarkok-css-3-modra/ ez tudomásom szerint firefox 3.5-ben, safari-ban és chrome-ban működik.

A másik megoldás jQuery alapon megy. Ennek a használata a következő:

Csinálunk egy HTML osztályt, legyen mondjuk .rounded-corner a neve.

<div class="rounded-corner">ide kerül a tartalom.</div>


Kell csinálnunk egy javascript file-t, amit a smink .info file-jában húzunk be, illetve le kell tölteni a hozzá való jQuery plugint, amit szintén a smink könyvtárba tegyünk. (Persze van modul is. Ha ezt használjuk, akkor az első sor nem kell, bár ez a modul nem tűnik up-to-date-nek.)

scripts[] = jquery.corner.js
scripts[] = rounded.js

ebbe a file-ba (rounded.js) írjuk a következőket:

$(".rounded-corner").corner();

vagy

$(".rounded-corner").corner(15px);

De érdemes itt megnézni a további lehetőségeket.

(Esküszöm HTML-be HTML írni eléggé advanced dolog.)

Nincsenek megjegyzések:

Megjegyzés küldése