Como usar corners.js

Desde hace tiempo estoy deseando realizar esta entrada y sobretodo después de ver muchas webs relacionadas con este tema, he podido observar que las explicaciones no eran correctas o bien, no las entendían los usuarios que la visitaban, más lo primero que lo segundo, por ello en esta entrada pienso hablar de este tema.

Como crear esquinas redondeadas para que funcionen en todos los navegadores, sin el uso de estilos CSS3, que algunos no lo aceptan.

Bueno hay que tener conocimientos básicos de HTML, de CSS y de javascript y con un poco de intuición lo tendremos fácil. Quiero dejar claro que no se hablará de estilos, eso es cuestión de cada uno de vosotros realizar los estilos a vuestro gusto.

Puedes copiar el archivo corners.js que incluyo en la entrada y al final de dicho archivo que es donde realizaremos las modificaciones, es decir, donde añadiremos los estilos ( id, class, ul, li, p, span…) para dar forma redondeada a lo que se desee.

Para empezar crearemos nuestro archivo style.css o estilos.css o como queramos llamarlo

Posteriormente añadiremos lo siguiente en la página o páginas donde daremos forma redondeada a lo que deseemos, en el HEAD.

ARCHIVO CORNERS.JS
Al final de este archivo es donde se añaden los id, class, h1, h2… y demás estilos que desees dar forma redonda en sus esquinas sean las 4 esquinas o la que desees:

/**
* DD_roundies, this adds rounded-corner CSS in standard browsers and VML sublayers in IE that accomplish a similar appearance when comparing said browsers.
* Author: Drew Diller
* Email: drew.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_roundies/
* Version: 0.0.2a -  preview 2008.12.26
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_roundies/#license
*
* Usage:
* DD_roundies.addRule('#doc .container', '10px 5px'); // selector and multiple radii
* DD_roundies.addRule('.box', 5, true); // selector, radius, and optional addition of border-radius code for standard browsers.
* 
* Just want the PNG fixing effect for IE6, and don't want to also use the DD_belatedPNG library?  Don't give any additional arguments after the CSS selector.
* DD_roundies.addRule('.your .example img');
**/

eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p}('t K={16:'K',1L:G,1M:G,1d:G,2f:y(){u(D.2g!=8&&D.1N&&!D.1N[q.16]){q.1L=M;q.1M=M}17 u(D.2g==8){q.1d=M}},2h:D.2i,1O:[],1b:{},2j:y(){u(q.1L||q.1M){D.1N.2L(q.16,'2M:2N-2O-2P:x')}u(q.1d){D.2Q('< ?2R 2S="'+q.16+'" 2T="#1P#2k" ?>')}},2l:y(){t a=D.1k('z');D.2m.1w.1Q(a,D.2m.1w.1w);u(a.12){2n{t b=a.12;b.1x(q.16+'\\:*','{1l:2U(#1P#2k)}');q.12=b}2o(2p){}}17{q.12=a}},1x:y(a,b,c){u(1R b=='1S'||b===2V){b=0}u(b.2W.2q().1y('2X')==-1){b=b.2q().2Y(/[^0-9 ]/g,'').1T(' ')}H(t i=0;i<4;i++){b[i]=(!b[i]&&b[i]!==0)?b[C.1e((i-2),0)]:b[i]}u(q.12){u(q.12.1x){t d=a.1T(',');H(t i=0;ie.E.V){c.B=e.E.V+1}}e.x.Z.z.3o='3p('+c.T+'F '+c.R+'F '+c.B+'F '+c.L+'F)'},1v:y(a){t b=q;2d(y(){b.1o(a)},1)},2e:y(a){q.1D(a);q.24(a)},1V:y(b){q.z.1l='S';u(!q.W){1q}17{t c=q.W}t d={3q:G,3r:G,3s:G,3t:G,3u:G,3v:G,3w:G};u(d[q.1K]===G){1q}t e=q;t f=K;q.2J=b;q.E={};t g={3x:'2e',3y:'2e'};u(q.1K=='A'){t i={3z:'1v',3A:'1v',3B:'1v',3C:'1v'};H(t a 1h i){g[a]=i[a]}}H(t h 1h g){q.1r('3D'+h,y(){f[g[h]](e)})}q.1r('3E',y(){f.2v(e)});t j=y(a){a.z.3F=1;u(a.W.1j=='3G'){a.z.1j='3H'}};j(q.3I);j(q);q.18=D.1k('3J');q.18.14.23='1l:S; 1j:27; 28:0; 1B:0; Q:0; 3K:S;';q.18.z.1c=c.1c;q.x={'1u':M,'Z':M,'1H':M};H(t v 1h q.x){q.x[v]=D.1k(f.16+':3L');q.x[v].1i=D.1k(f.16+':3M');q.x[v].1z(q.x[v].1i);q.x[v].3N=G;q.x[v].z.1j='27';q.x[v].z.1c=c.1c;q.x[v].3O='1,1';q.18.1z(q.x[v])}q.x.Z.1G='S';q.x.Z.1i.3P='3Q';q.3R.1Q(q.18,q);q.1F=G;u(q.1K=='3S'){q.1F=M;q.z.3T='3U'}2d(y(){f.1o(e)},1)}};2n{D.3V("3W",G,M)}2o(2p){}K.2f();K.2j();K.2l();u(K.1d&&D.1r&&K.2h){D.1r('3X',y(){u(D.3Y=='3Z'){t d=K.1O;t e=d.1U;t f=y(a,b,c){2d(y(){K.1V.2r(a,b)},c*2C)};H(t i=0;i
Como puedes ver es muy simple, copia este archivo, pegalo en un editor de texto y llamalo "corners.js" añade dicho archivo a tu carpeta js y añade el script del principio en el HEAD de tu página. Te invito a trastear, jugar con el final del archivo para que veas las posibilidades de este archivo.
Si deseas verlo en acción te invito a visitar esta web
Te invito a comentar más abajo esta entrada y a pinchar en los enlaces de mis redes si te ha gustado, de esa forma colaboras conmigo
[donatem]Ayudame a conseguir un morgan[/donatem]

[subscribe]Si te gusto esta entrada! Suscríbete a mi RSS[/subscribe]

				

					

						
						Shares