Davel's TechBlog

Icon

Trouvailles, plugins et autres "trucs" destinés à faciliter la vie des pov' développeurs comme moi. Spécialité AS3, PHP et un peu de Javascript.

Plugin jQuery : Biseau

J’ai récemment, pour un client, eu besoin d’un effet de biseau plat sur des blocs HTML.

Oui je précise biseau « plat » parce que mes premières recherches, qui se dirigeaient plus vers des solutions en CSS, m’ont fait atterrir sur ces putains d’effets 3D moches, au rendu dégueulasse ! Mais à part ça, pas l’équivalent d’un border-radius qui permettent de couper l’angle d’un bloc. Chose étonnante vu leur utilisation fréquente en design mais bon… les spécifications CSS quoi.

Lors de mes recherches je suis bien tombé sur l’excellent plugin jQuery Corners et son option « bevel » mais ce plugin n’est pas efficace sur un fond en image ou bien sur un dégradé. De même corner.js est très efficace mais seulement appliqué à des images. C’est ballot.

Alors pour mon projet, et aussi pour la gloire, j’ai finalement décidé de créer un plugin pour ajouter des angles biseautés aux éléments HTML de types block.


Tout d’abord l’exemple :

http://davel.fr/demo/biseau/example/

C’est assez clair mais voyons tout de même la marche à suivre :

1/ Bien évidemment insérer les scripts jQuery et jQuery.biseau sur sa page :

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.biseau.js"></script>

2/ Ajouter un bloc HTML sur votre page, bien sur, sinon que voudriez-vous biseauter ??? Il faudra bien sur que ce bloc ait une couleur de fond attribuée en CSS et une taille.

	<div id="monbloc" style="width:100px;height:100px;background-color:#999999;"></div>

3/ Enfin, lancer la méthode sur ce bloc :

$(document).ready(function(){
	$('#monbloc').biseau({options});
})

Les options

Il suffira de passer à la méthode un Object contenant une ou plusieurs de ces propriétés :
tl : taille du biseau haut/gauche (top left) (default : 0)
tr : taille du biseau haut/droit (top right) (default : 0)
bl : taille du biseau bas/gauche (bottom left) (default : 0)
br : taille du biseau bas/droit (bottom right) (default : 0)
zindex : Afin de rendre le contenu original du bloc visible, j’ai joué avec les z-index. Si vous avez des soucis de ce coté, vous pourrez le modifier. (default : 4)

Voilà, voilà, c’est mon second plugin pour jQuery, j’espère que je ne serai pas le seul à en avoir l’utilité. ;)

Téléchargement :
J’ai bien évidemment mis directement le script sur GitHub.

Ce qu’il faudra ajouter dans le futur si je me bouge un peu les fesses :
– permettre de mettre une bordure (ça devrait être faisable théoriquement)
– essayer de rendre les blocs « élastiques »
– mettre l’effet sur des blocs spéciaux de type table (est-ce utile ?)

Be Sociable, Share!

Category: Javascript/jQuery

Tagged: , , , , , ,

3 Responses

  1. flightcom dit :

    Merci pour ce plugin ! Ca va m’être très utile, en attendant CSS4 :)

  2. Pierre dit :

    Merci, sympa ton script, je me suis longtemps pris le choux avec de douteux bricolages pour arriver a ça, mais si on veut mettre un border? On fait comment ?

  3. davel_x dit :

    Je vais effectivement plancher sur ce point, l’idée est d’ajouter encore des divs avec XXpx de décalage.
    J’avais aussi comme idée de passer si possible par du canvas pour alléger le truc mais ça rendrait le script incompatible avec IE<=8. Enfin il faut que je vérifie si un bloc liquide casse tout ça. Bref, il reste du taff sur ce projet mais je m'attelle aux bordures en priorité.

Leave a Reply

Additional comments powered by BackType