jQuery: bords arrondis sur les images pour les chevauchements

En raison de la rendu différent entre les différents navigateurs, Microsoft Internet Explorer certainement voir dans cet esprit, nous devons toujours recourir à des astuces pour appliquer des effets spéciaux qui doivent être désormais un standard. Le prix-discuté des bords arrondis sont un exemple classique de «désastre» produite par l'incapacité totale à faire une sérieuse normes à la page de rendu HTML / CSS. , etc… Il existe de nombreuses solutions qui permettent au réseau pour obtenir des "effets" (effets d'exempter HTML existants comme les bords arrondis, les effets d'ombre, des reflets, etc ...) avec des taches sur les feuilles de styles, de trucs spéciaux à l'utilisation de div greffés, des bibliothèques JavaScript, l'utilisation de canvas , etc ...
Sur un enseignement purement technique, je tiens à expliquer davantage (cross-browser) d'appliquer les bords arrondis des images:

Démo et la source


CSS

Nous savons que, en dehors de IE, vous pouvez créer des coins arrondis en utilisant simplement CSS certains de leurs navigateurs individuels, tels que:

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

Note: Je voudrais ici souligner l'absurdité de cet état ​​de choses. Si chaque navigateur commence à définir ses styles CSS coax le total le plus est à portée de main. En outre, une norme est que quand il est "identique" à tous, sinon quelle est la norme? Ce n'est vraiment pas possible d'accepter cet état ​​de choses, trouvent que de fixer une frontière de 4px nous voulons à 8 lignes de code CSS.

Cette procédure, cependant, malgré le problème résolu "bord" ne fonctionne pas sur les images. Une solution possible est de demander à l'un des coins de l'image a tout ou quatre, l'image un'alra construit pour «simuler» un bord arrondi. En pratique, nous allons superposer les images de la frontière à notre image "cible", le résultat de la capacité et les fichiers GIF PNG pour être rendu avec la transparence.

> Pro

  • fonctionne sur tous les navigateurs (Firefox, Opera, Safari, Chrome, Flock, IE 7)
  • utile quand une intervention est rapide et ciblée
  • Personnalisation complète de l'image qui représente les bords, avec la possibilité de personnaliser chaque conseil
  • Javascript compact et configurable: vous pouvez choisir d'agir sur ce que les coins de l'image
  • ne nécessite pas de feuilles de style (CSS)

> Moins

  • la taille et la couleur dépendent de l'image et les bords des images différentes origines nécessitent différentes
  • Vous aurez besoin de Javascript actifs

La technique

contenitore. Pour appliquer les quatre bords dans les coins d'une image, nous allons utiliser jQuery pour "emballer" la balise img dans un div conteneur. , posizionati in modalità assoluta, che corrisponderanno ai nostri angoli. Immédiatement sous la balise img insérer quatre div , placé en mode absolu, qui correspondent à nos coins. Le script jQuery jquery.roundborders.js est construit comme une extension, plugin, et la méthode roundBorders() accepte un certain nombre d'options à partir de laquelle à laquelle les coins du bord doux. Il s'ensuit qu'un maximum de cinq seront ajoutés div : récipient plus aux quatre coins.

l'image

in absolute . Les quatre div le montre l'image ci-dessus vous irez à superposer l'image lors de la définition du style position dans l' absolute . Ensuite, à travers l'utilisation de margin , sera placé un par un pour les quatre coins de l'image. Voici le code 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
/ **
* Frontières ronde JQuery
*
* Créer un effet de bord arrotondado sur certains ou tous les coins de l'image
* Par superposition.
*
* @ Auteur Giovambattista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
*
* @ Utilisation
* $ ('Myimageid'). RoundBorders (
* {
* Image: 'chemin / myborder.png »,
* Rayon: 16,
* Corners: 'tl br »
*}
*);
*
*
* /

( $ ) { (Function ($) {
= function ( settings ) { jQuery. fn. roundBorders = function (paramètres) {
( retourner ce. chacun (
function () {
$ ( this ) ; var $ $ = ce (cette);
'ba4aae84ef81' ; // paganini not repeat var hash = 'ba4aae84ef81' / / Paganini ne pas répéter

! $this. hasClass ( hash ) ) { if ($ this hasClass. (dièse)) {

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

{ par défaut var = {
|| 16 , . Paramètres RADIUS rayon | | 16,
|| 'border.png' , . image: les réglages d'image | | 'border.png »,
|| $this. attr ( 'width' ) , .. Largeur: paramètres de largeur | | $ this attr ('width'),
|| $this. attr ( 'height' ) , .. Hauteur: réglages de hauteur | | $ this attr ('height'),
|| 'no' , . centre: centre de réglages | | 'non'
|| 'tl tr bl br' Corners:. Paramètres coins | | 'tl tr bl br »
};

defaults. radius ; par défaut var = ra rayon.;
defaults. width ; var = ww défaut largeur.;
defaults. height ; par défaut var = hh hauteur.;
defaults. image ; par défaut var = im image.;
hh ; var = - hh;
ww - ra ; var tr = ww - ra;
to + hh - ra ; var = bl + HH - ra;
( defaults. center == 'no' ) ? '' : 'margin:0 auto' ; var = cc (par défaut, le centre == 'non')?'':' margin:. 0 auto;

'' ; var out ='';
defaults. corners . split ( ' ' ) ; par défaut var = cr. Corners. diviser ('');
{ } ; 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; width: '. ra + +' px, hauteur: '+ ra + "px; margin:' + à + '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, hauteur: '+ ra + 'px; margin: "+ à +' 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, hauteur : '+ 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 pas répétées; position: absolute; width:'. ra + + 'px, hauteur : '+ 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) si (co [CR [ou]]) out + = co [CR [ou]];

$ Ce
'<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' ) ; ... Après (out) AddClass (dièse) FadeIn («lent»);
}
}
);
}
; }) (JQuery);

Image des bords

Comme mentionné précédemment, l'un des «inconvénients» de cette technique est la nécessité de créer une image qui représente de nos frontières. Ce désavantage, cependant, peut se transformer en un avantage si nous avons besoin pour créer des bords complexes et non pas simplement «arrondissement» des classiques. Quoi qu'il en soit nous allons voir comment l'image doit être faite pour les bords simples. Dans notre exemple, nous voulons créer un bord arrondi de 16px. Puis exploiter une caractéristique des styles afin de «fusionner» nos frontières quatre dans une seule image. De cette façon, nous aurons une seule image de 64 × 16 pixels, comme illustré ci-dessous:

Télécharger l'image au format PSD
(Télécharger le PSD ou PNG )

Chaque case représente un coin et a des dimensions de 16 × 16 pixels. Le fond est noir la couleur transparente tandis que le blanc est la couleur du fond qui est à notre image. Si votre site a un fond différent, il suffit de remplacer le blanc avec la couleur de votre site. L'image sera alors:

l'image

L'ordre des angles est nécessaire: le droit en haut à gauche (en haut à gauche), en haut à droite (en haut à droite), en bas à gauche (coin inférieur gauche) et en bas (en bas à droite).

One Response to "jQuery: bords arrondis sur les images pour les chevauchements"

  1. 17 janvier 2010 Gairloch :

    - Citation: -
    "Note: Je voudrais ici souligner l'absurdité de cet état de choses. Si chaque navigateur commence à définir ses styles CSS coax le total le plus est à portée de main. En outre, une norme est que quand il est "identique" à tous, sinon quelle est la norme? Ce n'est vraiment pas possible d'accepter cet état de choses, trouvent que de fixer une frontière de 4px nous voulons à 8 lignes de code CSS. "
    Fin de citation - -

    Citation 100% Il est temps que ceux qui avaient également suivi les normes et s'il ya de nouvelles implémentations sont conformes avec les prochaines mises à jour du navigateur.

    Répondre Citer

Laisser un commentaire

XHTML TAG PERMIS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CODE D'INSERTION: 
 <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