jQuery: bordes redondeados en las imágenes se superponen

Debido a la prestación diferentes a través de navegadores, Microsoft Internet Explorer definitivamente veo eso en mente, siempre hay que recurrir a trucos para aplicar efectos especiales que ahora debería ser una norma. El premio discutido bordes redondeados son un ejemplo clásico de "desastre" producido por la total incapacidad para hacer una grave las normas de representación de páginas HTML / CSS. , etc… Hay muchas soluciones que permiten a la red para obtener los "efectos" (efectos de la exención de HTML existentes como los bordes redondeados y de sombras, reflejos, etc ...) con manchas en las hojas de estilos, trucos especiales con el uso de div injertados, las bibliotecas JavaScript, el uso de canvas , etc ...
En una enseñanza puramente técnico me gustaría explicar con más detalle (cross-browser) para aplicar los bordes redondeados de las imágenes:

Demostración y la fuente


CSS

Sabemos que, aparte de IE, puede crear las esquinas redondeadas usando sólo CSS algunos de sus navegadores individuales, tales como:

1
2
3
4
5
6
/ * Esquinas redondeadas * /
div # {roundBorders
; /* CSS 3 */ border-radius: 9px; / CSS * 3 * /
; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * /
; /* Safari */ -Webkit-border-radius: 9px; / * Safari * /
}

Nota: He aquí, quisiera señalar lo absurdo que es este estado de cosas. Si todos los navegadores comienza a definir los estilos CSS convencer al total de la mayoría está a la mano. Además, una norma es que cuando se trata de "idénticas" para todos, de lo contrario lo normal? Realmente no es posible aceptar este estado de cosas, que para establecer una frontera de 4px queremos a 8 líneas de código CSS.

Este procedimiento, sin embargo, a pesar del problema resuelto "borde" no funciona en las imágenes. Una posible solución consiste en aplicar a una de las esquinas de una imagen tiene o las cuatro, la imagen un'alra construido para "simular" un borde redondeado. En la práctica vamos a superponer las imágenes de la frontera para nuestra imagen "objetivo", el resultado de la capacidad de los archivos GIF y PNG para ser prestados con la transparencia.

> Pro

  • funciona en todos los navegadores (FireFox, Opera, Safari, Chrome, Flock, IE 7)
  • útil cuando una intervención es rápida y precisa
  • Personalización completa de la imagen que representa a los bordes, con la posibilidad de personalizar cada tarjeta
  • Javascript compacto y configurable: se puede optar por actuar en lo que las esquinas de la imagen
  • no requiere de hojas de estilo (CSS)

> Contras

  • el tamaño del borde y el color depende de los bordes de la imagen y orígenes diferentes imágenes requieren diferentes
  • Usted necesita tener Javascript activo

La técnica

contenitore. Para aplicar los cuatro bordes en las esquinas de una imagen vamos a utilizar jQuery para "envolver" la etiqueta img en un div contenedor. , posizionati in modalità assoluta, che corrisponderanno ai nostri angoli. Inmediatamente debajo de la etiqueta img insertar cuatro div , colocó en modo absoluto, que corresponden a nuestras esquinas. El script jQuery jquery.roundborders.js está construido como una extensión, plugin, y el método roundBorders() acepta un número de opciones de las cuales el que las esquinas del borde suavizado. De ello se desprende que un máximo de cinco se agregarán div : contenedor más los cuatro puntos cardinales.

imagen

in absolute . Los cuatro div se muestra en la imagen de arriba se van a proyectar la imagen al ajustar el estilo de position en la absolute . Luego, a través de la utilización de margin , se colocará una por una a las cuatro esquinas de la imagen. Aquí está el código jquery.roundborders.js :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/ **
* Fronteras Ronda JQuery
*
* Crear un arrotondado efecto de borde sobre todas o algunas de las esquinas de una imagen
* Por superposición.
*
* @ Autor Giovambattista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
*
* @ Uso
* $ ('Myimageid'). RoundBorders (
* {
* Imagen: 'path / myborder.png,
* Radio: 16,
* Tiros de esquina: 'tl br "
*}
*);
*
*
* /

( $ ) { (Function ($) {
= function ( settings ) { jQuery. fn. roundBorders = function (parámetros) {
( devolver este. cada una (
function () {
$ ( this ) ; var $ this = $ (this);
'ba4aae84ef81' ; // paganini not repeat var hash = no 'ba4aae84ef81' / / paganini repetir

! $this. hasClass ( hash ) ) { if ($ this hasClass. (hash)) {

'display' , 'block' ) ; $ Esta Css ('display', 'block').;

{ por defecto var = {
|| 16 , . RADIUS radio | | 16,
|| 'border.png' , . imagen: configuración de la imagen | | 'border.png,
|| $this. attr ( 'width' ) , . ancho:. ajustes de ancho | | $ this attr ('width'),
|| $this. attr ( 'height' ) , .. Altura: ajustes de altura | | $ this attr ('height'),
|| 'no' , . centro: centro de configuración | | 'no'
|| 'tl tr bl br' Tiros de esquina:. Ajustes de esquinas | | 'tl bl br tr'
};

defaults. radius ; por defecto var = ra radio.;
defaults. width ; var ww = defecto de ancho.;
defaults. height ; por defecto var = hh altura.;
defaults. image ; por defecto var = im imagen.;
hh ; var a = - hh;
ww - ra ; var tr = ww - ra;
to + hh - ra ; var a = bl + hh - ra;
( defaults. center == 'no' ) ? '' : 'margin:0 auto' ; var = cc (por defecto el centro == 'no')?'':' margin:. 0 auto;

'' ; var a cabo ='';
defaults. corners . split ( ' ' ) ; por defecto var = cr. Esquinas. dividida ('');
{ } ; var w = {};

'<div style="background:url(' + im + ') no-repeat;position:absolute;width:' + ra + 'px;height:' + ra + 'px;margin:' + to + 'px 0 0 0"></div>' ; co tl = '<div style = "background: url (' + im + ') no-repeat; position: absolute; ancho:'. ra + +" px, altura: '+ ra + "px; margen:" + a + "px 0 0 0"> </ div> ';
'<div style="background:url(' + im + ') -' + ra + 'px 0px no-repeat;position:absolute;width:' + ra + 'px;height:' + ra + 'px;margin:' + to + 'px 0 0 ' + tr + 'px"></div>' ; co tr = '<div style = "background: url (' + im + ') -' + ra +" px 0px no-repeat; position: absolute; ancho: '. ra + + "px, altura:' + ra + "px; margen:" + a + "px 0 0 '+ tr +" px "> </ div>';
'<div style="background:url(' + im + ') -' + ( ra * 2 ) + 'px 0px no-repeat;position:absolute;width:' + ra + 'px;height:' + ra + 'px;margin:' + bl + 'px 0 0 0"></div>' ; co bl = "<div style =" background: url ('+ im +') - '+ (AR * 2) + "px 0px no-repeat; position: absolute; ancho:'. ra + +" px, altura : '+ ra + "px; margen:' + BL +" px 0 0 0 "> </ div> ';
'<div style="background:url(' + im + ') -' + ( ra * 3 ) + 'px 0px no-repeat;position:absolute;width:' + ra + 'px;height:' + ra + 'px;margin:' + bl + 'px 0 0 ' + tr + 'px"></div>' ; co br = 'div style <= "background: url (' + im + ') -' + (ra * 3) +" px 0px que no se repita; position: absolute; ancho: '. ra + + "px, altura : '+ ra + "px; margen:' + BL +" px 0 0 '+ tr + "px"> </ div>';

var o in cr ) if ( co [ cr [ o ] ] ) out += co [ cr [ o ] ] ; for (var o cr) if (co [cr [o]]) salida + = co [cr [o]];

$ Este
'<div style="width:' + ww + 'px;height:' + hh + 'px;' + cc + '"></div>' ) . Wrap ("<div style="width:' ww + + + + + cc hh'px;height:''px;' +'"> </ div> ')
out ) . addClass ( hash ) . fadeIn ( 'slow' ) ; ... Después de (a) AddClass (hash) FadeIn ("lento");
}
}
);
}
; }) (JQuery);

Imagen de los bordes

Como se mencionó anteriormente, uno de los "contras" de esta técnica es la necesidad de crear una imagen que representa las fronteras. Esta desventaja, sin embargo, se puede convertir en una ventaja si tenemos que crear bordes complejos y no simplemente "redondeo" clásicos. De todos modos vamos a ver cómo la imagen se debe hacer para los bordes simple. En nuestro ejemplo, queremos crear un borde redondeado de 16px. Luego explotar una característica de los estilos con el fin de "fusionar" las fronteras cuatro en una sola imagen. De esta manera vamos a tener una sola imagen de 64 × 16 píxeles, como se muestra a continuación:

Cargar la imagen en formato PSD
(Descargar PSD o PNG )

Cada cuadro representa una esquina y tiene unas dimensiones de 16 × 16 píxeles. El fondo es negro el color transparente, mientras que el blanco es el color del fondo, que es nuestra imagen. Si su sitio tiene un fondo diferente, cambiando el blanco con el color de su sitio. La imagen de entonces:

imagen

El orden de los ángulos se requiere: arriba a la izquierda (arriba a la izquierda), arriba a la derecha (superior derecha), abajo a la izquierda (esquina inferior izquierda) y abajo a la derecha (esquina inferior derecha).

One Response to "jQuery: bordes redondeados en las imágenes se superponen"

  1. 17 de enero 2010 Gairloch :

    - Cita: -
    "Nota: He aquí, quisiera señalar lo absurdo que es este estado de cosas. Si todos los navegadores comienza a definir los estilos CSS convencer al total de la mayoría está a la mano. Además, una norma es que cuando se trata de "idénticas" para todos, de lo contrario lo normal? Realmente no es posible aceptar este estado de cosas, que para establecer una frontera de 4px queremos a 8 líneas de código CSS. "
    - Fin de la cita -

    Cita 100% Es hora de que los que habían seguido también las normas y si hay nuevas implementaciones son conformes con las próximas actualizaciones del navegador.

    Responder Citar

Deja un comentario

XHTML PERMISO TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL


Dejar de SOPA