ejemplo_sprite_diagonal.html 0000644 0001750 0001750 00000015703 11511340674 015305 0 ustar capy capy
Sprite diagonal
Espacio de 50px entre elementos
Aqui podemos ver que si este item superara en contenido los 50px de alto se podria ver el siguiente icono del sprite. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Espacio de 200px entre elementos
Aqui podemos ver que si este item superara en contenido los 200px de alto se podria ver el siguiente icono del sprite. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Espacio de 10px entre elementos diagonalmente
Usando sprites diagonales como el que usamos en este item, podemos ver que el problema deja de existir :). Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
sprite50.png 0000644 0001750 0001750 00000013133 11510734043 011710 0 ustar capy capy PNG
IHDR b ΆB "IDATxyt ՝?Uj,a[6cllB$0 yoX3!f<3 $o '! Y&$3lƘ,nX%[V/Uw{,dlf5:U_[oۂ"'pӆERJ Z]hJ=}Mt vQ3P* &px5:ֵ/ q3nyEu y =Q
RhsWo1w8ߝ7Αc*fmVH
/`wFVx͂ iYIgmrR*TWH)$]1lάs B97Y{>G2mH%QZK 5.}L#NaYǩ+
ӞnEipԻ͗^ºKQZӞh,5u !hc0ZS(EK?H _JW^ZܺuXaaxnÅ!lȟ9ll~RX7s؇G_ |vQ_z ey`'ū_gަN˶h}S ݈2Kh S˲g<&|||||||||||||s
#nTZ-J(Z!J=#|VZxdJ/n 5v&yB\=o R7xt:iOg`!%{zO[2~Η|`<);cܹ 53xu2 H Oc7!\R0*6r2wIVȈ,w.~7 .wa *&XJpZ$
"$Is҆pҤS I0|7 Bɺh(T vx\ ܵj)fUPnDHrv7JcaJ22B>zN5~2mĊhnA*9BP-h d̰o"|vd+y5y.fmkH-kR0C
eeR R i g|ibk_"xxI>|
{wV7o
ujrN9Q`pEr0)c{O`| K`R(-~>_\" J/C9zo)+)q_&Ih~l
؇{@۾}.ۍ(6j,:Gs0fn1 W{OM]EuKY:щ[oWKV\G="=Zw4eկWʪMU/,@;S5O 2gw L_͆oaZ2t%")6%jƿxG +} j0c8{Ǔo9;
U;:\]PUUիd2\|fpnޮ|ֵDm \n֚Z/^!tt:M.cw_ $ > NH$ DkR
!frr9\EJI6EH6ݙH$:C.CJR
ur8뺸m$I; -"N#@JuJ)(( 8@kM6%ɜ~ )g---{/CuTVVÇ_]] 9alf֭ICtյm\(FDQ RJػw CB_Rbg9DJH)5]kzz1e!fy@܀9v'[061 >ͩ ` hA)LI= UQ֞< g< G?R %џa YS+32tcn_ȘmیI5r#/ܘxܘd;sqФ c @?.~B8q]wz1JlQ u㍞P;\qU}0Rz>D(0TEC[C/PX1dX77+s*h)~!Ύ{啸W\q D?Vy״#q N8͈.7 aq7ي
)-5ٳZdaeuYۍ0{y:"ZxJq]9
q*aԱ.0ڀѸێ3> 1
9W13 Xη(
7p A 7 :xm`p2jfC v, l ,;hѱiY 3vP;&{ķmC`( CcgA˼w vμj(ƫ@pPޣ]
6鄝!eqx)H\z <VxA*π38N$ \
pk5+! omz7Ps8$ * p ̯ ұphdޝ`"^>[ A>=(w .´%Cl26dmx ud@ř_W
%Qe7``*w`or
@,ر
.HAA lU 6A|H&f7
7zMiF8lwe}w_X% > B%雽&*X2X_T LڼMl((lJ @wBQZe衡ܡ#77w9y4翳rB\9(u\K٤\wu '(ӮTq<\ ;PzQ~2 z0H$wk!nЮ֮PyFT*Ezd:V(ǹ%^}
#gIr|FE:zrݯ5?u*v6C0%oLTo|FbX tt!8s D`t!(߰鯃ZPꃽ aC
>F劃Z0JAF+<' kQGV \vݤʒrYo^<|k)AIOcmضv70:Af!xg7睳YLG|ͻhyVtC#0s:^gɂLB6w>:^Y٧] iv_U0{6vwlIbJA&3'cƎUt~ٛ7?;D9q,5n[A8o.]Z %~\W>FM7 gy؆] J oӬ]Y6qұ0\S A[V?wOu3kH۱hϿ|c|t:R`0HMM
{9q}eaԭF/ͩTj",R1p]X,6^Jy1 Ry455!Xr w] 55~mf,/c yX\ڂ`0Jx4h:nU0JH%U:y@%?Ͷec\g)AP.[J jοľݸ~Ɣaw RIÕ`iϣƱ̀@B`%ߵ`KtNd 0.{I h5FyU.ȯ eof3/ԪJE
#sAolƨӿ
,fNjIO7{ 5` tn q$
:ik7E1 9ɸ O4g6 /5f؉>LgJv>]y=C4Ǯ5uyֽAy|;@G]WȁٺWW]NjУϦ;qch<UmsRj"Jtw^k||||||||||||NMgwoXO+ֿO98yCw?hD(ZL8 ? ygvе %ev;BᢐN<{,,4|h})4ڜ+ɏ8:
֑M I'FvN v
JOD
a;LcP r C8L2nt;)\X>.ZRN7!C
,
M%2e{d{;B1JH:P8`l/m<Ʀ>`ԂQzJ[+PCJ} (E&iLqPwA#@e G!(BdB͖'^U$a$Xؑ2p@XjTN= oA#ءp H5qQ9Q{JFeZO*.):re)GM/
ߍ^= poS
}O \eHvy m'˞̈p0ba, :rAEIO ΨU?˷/́A,$E#RZxK.\u `)Q;{r P9oU7MoQ [o0_˞>|*؛m2_F*)+U;@h7ឲ
5 -o]ԼM1X(V0Baeo[.y*Xuo#ZkOebBEW6-,SoݒvPq-WpoVr[ckip 30 .Wxzm۷ yrxW'l58IiwYE^)QM/eKρ-ߛ,G zy4HcE:c~.W1'{6@`$?3>!'nƫ s:| ;" 2Otn#"C
j
e1 ZEcxOuNǵBn-͎3{f$zBXvm0JJ-sKNz]fO 2#L IENDB` sprite200.png 0000644 0001750 0001750 00000013517 11510734053 011774 0 ustar capy capy PNG
IHDR ,P IDATxyoջwC-- ,
n1F &c Nљ$L $&:*eb2ㆈ .4 .U[ մ
{9NyT# nZ3Q`F/N (qᮦ&W{x=cf̥(V@Orv%7u`k[_8 9ƕsg\^y昋H̓{Q/f昹%۶,{e;{p'x*xoNIU3X6h1CN9.`{Zly ܭ lv
w&Wɩ _( + .[ZWMppz Gi6
18r帯q q˴8laޤ=nNx%mV|~!LǸ|y̫m/mf*
Fa : c-J"%[;x?8TW?㣞NJqhKd/ ˠ7/7t2c
On|]p 8 Ϯl^N]Xb<n_6 ݛqk Ɩm::df\M$kޡ;ՉC܍0ooy>XhRnݶ8~NÅD!h>g ~Ki7m?tƳ;y\BEA5XNwٲq;Z i{ӉЈPh=[q:gxmM!B!B!B!B!B!B_18/QHi}ҪVMU@ n ^6 8fr
bƧk{ߢC)uSӱuma~*O ;\M $0IޒޮSNܽ= =w&h;m¹uFO睎ɤ3VSJjnijk3q'~d ˝ǭEo +8 p.6
'̮m${Hf$sֲKNr0scZ?#VW/ehK43 G@R$A$u` bd['qtW'\ǥ]-(FԵi54 VTV qep]۫ Iճ#{]Q7{Ŭl}
ew.[ v2^2vi ־Db?Ok{×XskZ}v [vݯ/:q Qcr KǀY-e y/=vAcբ`aRZw*F=]R&B!B!B!B!B!B!>G#Ae#3P u*/SpgDt` kv /YιhnzYk4`'%x8kx6Qb]gf~ѲItV[6EcY[7KU"vF+/t Hn4nf ]G j RU7MݱW[ ` d f!z}y%0Tݓx|dE|lY
沪u
g/%5cƿvʷzzz# w^ꃍ(dvѣXƇmuxO;'Rxy
5;VD|ߟPSSd2\|Ŕep]j //o8&
cect:M:&˱PJGӆicZfrr9|G)E6Eqlvk"y \Zk|'y >L&QJm N088" s t:M( ZkEkb>xyϞ=; 1dY21ݏDzʖ Ƙ}WWW?jԨ?,X}st{nN=kւ1ÇY91c
M0k h-+.~] 50TtD@ ?)44`
̜8:
#n-_ YiV-\h[cm2iڵ֟1W]hS`{ I`| q"O?Mg! >ꮻ0X1Cq.~:rS$Xx>UWav*;z1& 0 v@dɒ+[ljňۿ aO زB yW^Xσ<>SY.H Nu Zf̱٪*)/Y^f&m/t q'fm [6c P_8sRY{X]CUGia\]Ut>| k`
G ` |`s_Ո'B!B!B!B!B!BpoQ o^, eDQ#~I,f,g"aCX־nq% "P{fkU DZ 0j&zqqX_5ǫ HGa+K[;!
B߇t7Ċ`ʗǠSA >D sۖ.T]e
pa㓰w9x
|
9pgLx%$᭻ag
>
<r
! XԜ3_| Æ_a 8@߇`ÓCsP} G`0uPP\.d`?@0컀
|=4fhv#ι bŰ [>GCLز .HA~ Tz Z
ugs0v$LY
k'NeG$l7kwS8mŵ ~n
U bep77Kհeز*~IQxpCŤp] l4'؍Z(Dм 8(r/, =9 :rC#Q #v7B!B!B!B!B!B\bJ/]:j}U(dZZpwu '0==T 'Pz>` niUO˛؈NHoL{yD^a;yR[Q[XHdpt LW
O-27!Oޞ陶v5J dtgYlX"g`s>X!v+9ҳf_GM)-新nɆ;ı#ܲR8{/`WṧѠsҨ 8ZC ?R [g5x
<5J8*\6j}g@uўTw u lr9s6^ IY.w$zp_`̘Hh0d MW߿n<7%g͚뷆ZC&3NƎHkxo6Z;{ʴe<3gԏU!9C7 ڰ[n:C{ΩЊW;of,kʵ=`|o+Ǝqw\?m?s|[9B!B!B!B!B!BsR{]luuzRŋ 7%KN3n|ii)b!MCKKK+w}c,YXkq 8pt֚h4رc^{7 #6Z:f̘AgϞT*5.xT*5nSWW7Q)uJم455;uZ[[[w7OJP.T
Tѓj uZ 1.]4Chҩ VGh<c YPo=k 'Re` tV)$
& `W}<`Q=$WAAyXi@'?϶aTc}oDX>p"ʧˁ ƚQ4 ]Z
'Ǡ=֞)o O.Uf8 ` k5mIl_ ^ؽĞp AUOG
\ _ !'ca=:`Obv"%_ 8ntR,& jN'FpyRMkt8_JH{4\(UСh C5hy
M!B!B!B!B!B!6N8ܾX9* $^{9=6w ;f~dg>&dg} <<_}kܸ'[N!:2ma+(4-{x^Ƅf̩Z.f`qWkNs#${Yٸ@Q,|hۧ.u8S gѕ8u<<ͯqԖ)]yk'B!B!B!B!B!B
]ΟյfW>ͧYc~oUC wm4V<1/)x Xc/h<#t<
7%1ӟ0Uk̥;{b0`r)h=!t"kmlƬZ;w[H^78ƢsP6l걁B xL\unSrB~hL
`
3t@cCp2~ն1LSr 8Xc`* )>P8`l9\1sWVS}]]p"j(X]bX${rFSNPA㹁np+>Ҡ
N 3 l9p8Ida$8y8(:Վ%p"й`Ș#m&n<؉x:Hϯ#5hG&9NCmd=V^ 2}Ziͯ&-- Uq?_k?;B!B!B!B!B!B=n;UHڒL@ Wͳ*^g ,,q<7`11PsʊݏeWlLYiӟ490nh$T Ҍw .\ ((h9n3\71[Uw
~[F֭QZ\HٔYeO=yY]3 WMEA=q0zs[7/{R N4 'Gqg~{\T'.c3FT@/_{ z;ȡEϋבQ- zߺ%3?8.L6RdgAe`|\:*_&zһoFUE &̸'w *8z-^Tҫq D{N8ˑ?vaD,eQ>(|x[rD*bx^, 46&CJV
w^yί!!f [z N Sv`U|8ۢHZM-<e4 ALڂеi; jm?X-ѫ$7n`YTX]U34 ݵ-x1HMz j2sR}9VĊX~EJp76^]3u[tҤK0K\Or!t>=PBn=Z-k^"!3DjKK]Y`3 CuXρhm5!:QA:;*/DZD
tGn9vT=УcJB
AЉ)?}ΗnQ^q;Թ|WGI*"I
D.|*f(=#RvX
in]˖-åsPvjnzhcQQjD*occjȑ lУGlٲ(9G'(vڵ :rD*bgg{ncڵ5kڶmK zp2@Ǝ00 H#/X@۷o E0x<ƍɓ'/`Tdyή ׯǚ5k`ees&LQ0l0m?rH 2Ę1cиqcHM"VXŋk}ƌ=vX > } hްaCN݉D:pe>uTL8QWꆆ`000@ǎ ѠAVHE /t+ :t zBݵaW.!G HvܹPt]Y+Su%P+~ Y1"{ [nP .W.)Swk ~ 95o\iӦ5 ny|I !]AB:
::2ne tj, ,2f hLfTh,&=TRDjYȡ./٩[7v5U_\>ˊ9fӁdh&MBߢsg&$T iFl
;^7UN @^ jdѣ\T}U
QgDk={VNQQB.ڡ\^5h*7T :(W5 kRvhs7m1 :*>wJzC]敲[y&(k2Dj zIjdwkrU 9
F\/Q1
t"uV.Ϊ&1RNK헕k$(kwɠM< >#
Q
/kE: yyn( AD{< 2_ /m
N^Ȑ<[ڦ9*¨?*FծˇܰCNT_\QW7x1y:I
[dwYƶwK :YA"І* @& n3(G QF*?_ ,qct+!Z ɸNM!{ȸ0C^M@`_t_atk ::(A)uE}Q@I{/? X͠+kr iT] %>P7WB~]\cЉTt
zSt=p 4nʞqGgIT.1DѲ>5z)&kw?] tP:ran0A'ROGWnt=H' m=Tȟi} V)N+}Ӏe?x ̓6\.' x/Lt"t8 uk$O lo "ɸ~Wrv'*8H=AW|}<Ys\,~ YdЉTt!ukrE<(s@AnrJr"jcP%N
O&!OOdTWԟd`C]:wONS9]WzAC^`;jظ$R薭&!qH':{{Mxr:6*
YA"(=y26l,]۷۶[䜴rÏDjP|ЁgeiUvau*'9rj9Qo8XA"e^;+a.u[ƺY-\6u臂}{ܿޝ^ZD*CbѮ Un˅uKz9F- Z&,o~ 7`T&ƦKkknj%KrN¾R;U/ܿ
LvϞbD*l\T3
P9<9pw;} c''7~4nܞ#5qXz&re}9+ADDDDDDDDDDDDDDDDDDDDDDooNt#G$ هtn<p[!Ȑ232Dj\UοsPLrarZ$!ɑ7"LB>|ylʠIPT熣4 t<
"g f@|w d }Q"nSu˭vz wǢm(*_]Fŋ ڑlN&O> xog{ 3룉Hgݹ:Q=(I9h "I;So }B-CTOB^'?A2${k=&Q= yMe>Y{~+k'NTBfGPYm CNĐѿpor,d[;e1Dym!H8߅ 9Q}Dz52P #JvjMeãϐWng-f`D.l#pMg05lóMMQ 9Q}3}pS6lË\toZD008MG2Q6)P: V/yo,"'l8^ċ =z VH=cQ1O_ ɻ #nCu=dm`䆍īKUӓmzD*:߇Y7̻3Qx
:#? WȾFB