jQuery: bordas redondas nas imagens para sobrepor

Devido à diferente renderização entre os navegadores, a Microsoft Internet Explorer definitivamente ver isso em mente, você sempre tem que recorrer a truques para aplicar efeitos especiais que, até agora, deve ser um padrão. Bordas arredondadas do award-discutidos são um exemplo clássico de "desastre", produzido pela completa incapacidade de realizar um padrão sério na página renderizar HTML / CSS. , etc… Existem inúmeras soluções na rede que permitem que você obtenha os "efeitos" (efeitos que isentam do atual HTML como bordas arredondadas, efeitos de sombra, reflexos, etc ...) com manchas nas folhas de estilos, truques especiais com o uso de div enxertadas, bibliotecas Javascript, o uso de canvas , etc ...
Como vou ilustrar ainda mais técnica puramente didático (cross-browser) para aplicar as bordas arredondadas das imagens:

Demo e fonte


CSS

Sabemos que, para além de IE, que é possível atingir os cantos arredondados explorando simplesmente alguns CSS navegador específico próprio indivíduo, tais como:

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

Nota: Gostaria de aqui apontar o quão absurdo é este estado de coisas. Se cada navegador começa a definir os seus próprios estilos CSS persuadir o mais total é em cima de nós. Além disso, um padrão é que, quando é "idêntica" para todos os, caso contrário, o que é normal? Você realmente não pode aceitar este estado de coisas, que se reúnem para definir uma fronteira de 4px quero oito linhas de código CSS.

Este procedimento, no entanto, apesar de resolver o problema "bordas" não funciona em suas imagens. Então, uma solução possível é a aplicação, a um dos cantos de uma imagem especular de qualquer ou todos os quatro, imagem un'alra construído para "simular" uma aresta arredondada. Na prática, nós estamos indo para sobrepor as imagens da borda para a nossa imagem "target", produzindo a capacidade de GIF e PNG para ser processado com transparência.

> Pro

  • funciona em todos os navegadores (Firefox, Opera, Safari, Chrome, Flock, IE 7)
  • útil quando você precisa de uma intervenção rápida e direcionada
  • Personalização completa da imagem que representa as fronteiras, com a capacidade de personalizar cada única aresta
  • Javascript compacto e configurável: você pode escolher em quais cantos do ato
  • não precisa de folhas de estilo (CSS)

> Cons

  • o tamanho da borda e cor depende da imagem: diferentes bordas e fundos diferentes requerem diferentes imagens
  • Você vai precisar de Javascript ativo

A técnica

contenitore. Para aplicar as quatro bordas nos cantos de uma imagem vamos usar jQuery para "quebrar" a tag img com uma div container. , posizionati in modalità assoluta, che corrisponderanno ai nostri angoli. Imediatamente sob a tag img insert quatro div , posicionado no modo absoluto, que correspondem aos nossos cantos. O script jQuery jquery.roundborders.js é construído como uma extensão, plugin, eo método roundBorders() aceita um número de opções, tais como os ângulos em que para fazer a ponta macia. Segue-se que o valor máximo irá ser adicionados cinco div : um recipiente, mais os quatro cantos.

imagem

in absolute . Os quatro div mostrado na imagem acima, você irá sobrepor a imagem quando vai definir o estilo de position em absolute . Então, através da utilização da margin , será colocado um a um para os quatro cantos da imagem. Aqui está o código de 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
/ **
* JQuery Fronteiras Rodada
*
* Criar um efeito arrotondado vantagem sobre alguns ou todos os cantos de uma imagem
* Por meio de sobreposição.
*
* @ Author Giovan Battista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
*
* @ Uso
* $ ('Myimageid'). RoundBorders (
* {
* Imagem: 'path / myborder.png'
* Raio: 16
* Corners: 'tl br'
*}
*);
*
*
* /

( $ ) { (Function ($) {
= function ( settings ) { jQuery. Fn. roundBorders = function (settings) {
( devolver isto. cada (
function () {
$ ( this ) ; var $ this = $ (this);
'ba4aae84ef81' ; // paganini not repeat var hash = 'ba4aae84ef81', / / Paganini não repetir

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

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

{ defaults var = {
|| 16 , . radius: configurações raio | | 16
|| 'border.png' , . imagem: configurações de imagem | | 'border.png'
|| $this. attr ( 'width' ) , . width:. configurações de largura | | $ this attr ('width'),
|| $this. attr ( 'height' ) , . altura:. configurações de altura | | $ this attr ('altura'),
|| 'no' , . centro: centro de configurações | | 'não',
|| 'tl tr bl br' . cantos: configurações cantos | | "tl tr bl br"
};

defaults. radius ; var ra = defaults raio.;
defaults. width ; var ww = padrões de largura.;
defaults. height ; var hh = defaults altura.;
defaults. image ; var IM = padrões de imagem.;
hh ; var a = - hh;
ww - ra ; var tr = ww - ra;
to + hh - ra ; var bl = a + hh - ra;
( defaults. center == 'no' ) ? '' : 'margin:0 auto' ; ? var cc = (defaults. centro == 'não')'': 'margin: 0 auto ";

'' ; var a ='';
defaults. corners . split ( ' ' ) ; .. var CR = defaults cantos split ('');
{ } ; var co = {};

'<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; width:'. + ra + 'px, height:' + ra + 'px; margin:' + 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; width:'. + ra + 'px, height:' + ra + 'px; margin:' + 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 + ') -' + (ra * 2) + '. px 0px no-repeat; position: absolute; width:' + ra + 'px, altura : '+ ra +' px; margin: '+ 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 no-repeat; position: absolute; width:' + ra + 'px, altura : '+ ra +' px; margin: '+ bl +' px 0 0 '+ tr + "px"> </ div>';

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

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

Imagem das bordas

Como mencionado anteriormente, um dos "contras" desta técnica é a necessidade de criar uma imagem que represente as fronteiras. Esta desvantagem, no entanto, pode se transformar em uma vantagem se precisamos criar bordas complexas e não apenas os clássicos "arredondamento". De qualquer forma, vamos ver como a imagem deve ser realizado para as fronteiras simples. No nosso exemplo, queremos criar uma borda arredondada de 16px. Então, vamos usar um recurso dos estilos, a fim de "fundir" os nossos quatro arestas em uma única imagem. Desta forma, teremos uma única imagem de 64 × 16 pixels, como mostrado abaixo:

Baixar a imagem em formato PSD
(Baixe o PSD ou PNG )

Cada caixa representa um ângulo e tem a dimensão de 16 x 16 pixels. O fundo preto representa a cor branca é a superfície transparente, enquanto os do fundo, onde você vai encontrar a nossa imagem. Se o seu site tem um fundo diferente basta substituir o branco com a cor do seu site. A imagem será então:

imagem

A ordem dos ângulos é necessário: canto superior esquerdo (superior esquerdo), canto superior direito (canto superior direito), esquerda (canto inferior esquerdo) e inferior direito inferior (canto inferior direito).

One Response to: " "

  1. 17 jan 2010 Gairloch :

    - Citação: -
    "Nota: Gostaria de aqui apontar o quão absurdo é este estado de coisas. Se cada navegador começa a definir os seus próprios estilos CSS persuadir o mais total é em cima de nós. Além disso, um padrão é que, quando é "idêntica" para todos os, caso contrário, o que é normal? Você realmente não pode aceitar este estado de coisas, que se reúnem para definir uma fronteira de 4px quero oito linhas de código CSS. "
    - Fim de citação -

    Quoto 100% seria agora que não que as normas também foram seguidos e se existem novas implementações devem agir em conformidade com todas as actualizações subsequentes do browser.

    Responder Quote

Deixe um comentário

TAG XHTML permita: Código de acesso: 
 <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