{"id":183,"date":"2011-10-29T16:44:35","date_gmt":"2011-10-29T14:44:35","guid":{"rendered":"http:\/\/www.davel.fr\/techblog\/?p=183"},"modified":"2013-02-01T16:59:48","modified_gmt":"2013-02-01T14:59:48","slug":"plugin-jquery-biseau","status":"publish","type":"post","link":"https:\/\/www.davel.fr\/techblog\/2011\/10\/plugin-jquery-biseau\/","title":{"rendered":"Plugin jQuery : Biseau"},"content":{"rendered":"

J'ai r\u00e9cemment, pour un client, eu besoin d'un effet de biseau plat sur des blocs HTML.<\/p>\n

Oui je pr\u00e9cise biseau \"plat\" parce que mes premi\u00e8res recherches, qui se dirigeaient plus vers des solutions en CSS, m'ont fait atterrir sur ces putains d'effets 3D moches, au rendu d\u00e9gueulasse ! Mais \u00e0 part \u00e7a, pas l'\u00e9quivalent d'un border-radius qui permettent de couper l'angle d'un bloc. Chose \u00e9tonnante vu leur utilisation fr\u00e9quente en design mais bon... les sp\u00e9cifications CSS quoi.<\/p>\n

Lors de mes recherches je suis bien tomb\u00e9 sur l'excellent plugin jQuery Corners<\/a> et son option \"bevel\" mais ce plugin n'est pas efficace sur un fond en image ou bien sur un d\u00e9grad\u00e9. De m\u00eame corner.js<\/a> est tr\u00e8s efficace mais seulement appliqu\u00e9 \u00e0 des images. C'est ballot.<\/p>\n

Alors pour mon projet, et aussi pour la gloire, j'ai finalement d\u00e9cid\u00e9 de cr\u00e9er un plugin pour ajouter des angles biseaut\u00e9s aux \u00e9l\u00e9ments HTML de types block.<\/p>\n


\nTout d'abord l'exemple :<\/p>\n

http:\/\/davel.fr\/demo\/biseau\/example\/<\/a><\/p>\n

C'est assez clair mais voyons tout de m\u00eame la marche \u00e0 suivre :<\/p>\n

1\/ Bien \u00e9videmment ins\u00e9rer les scripts jQuery et jQuery.biseau sur sa page :<\/p>\n

\r\n\t<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.4\/jquery.min.js\"><\/script>\r\n\t<script type=\"text\/javascript\" src=\"js\/jquery.biseau.js\"><\/script>\r\n<\/pre>\n
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\u00e9e en CSS et une taille.<\/p>\n
\r\n\t<div id=\"monbloc\" style=\"width:100px;height:100px;background-color:#999999;\"><\/div>\r\n<\/pre>\n
3\/ Enfin, lancer la m\u00e9thode sur ce bloc : <\/p>\n
\r\n$(document).ready(function(){\r\n\t$('#monbloc').biseau({options});\r\n})\r\n<\/pre>\n
Les options<\/strong><\/p>\n
Il suffira de passer \u00e0 la m\u00e9thode un Object contenant une ou plusieurs de ces propri\u00e9t\u00e9s :
\ntl<\/strong> : taille du biseau haut\/gauche (top left) (default : 0)
\ntr <\/strong>: taille du biseau haut\/droit (top right) (default : 0)
\nbl <\/strong>: taille du biseau bas\/gauche (bottom left) (default : 0)
\nbr <\/strong>: taille du biseau bas\/droit (bottom right) (default : 0)
\nzindex <\/strong>: Afin de rendre le contenu original du bloc visible, j'ai jou\u00e9 avec les z-index. Si vous avez des soucis de ce cot\u00e9, vous pourrez le modifier. (default : 4)<\/p>\n
Voil\u00e0, voil\u00e0, c'est mon second plugin pour jQuery, j'esp\u00e8re que je ne serai pas le seul \u00e0 en avoir l'utilit\u00e9. ;)<\/p>\n
T\u00e9l\u00e9chargement : <\/strong>
\nJ'ai bien \u00e9videmment mis directement le script sur GitHub.<\/a><\/p>\n
Ce qu'il faudra ajouter dans le futur si je me bouge un peu les fesses :
\n- permettre de mettre une bordure (\u00e7a devrait \u00eatre faisable th\u00e9oriquement)
\n- essayer de rendre les blocs \"\u00e9lastiques\"
\n- mettre l'effet sur des blocs sp\u00e9ciaux de type table (est-ce utile ?)<\/p>\n","protected":false},"excerpt":{"rendered":"
J’ai r\u00e9cemment, pour un client, eu besoin d’un effet de biseau plat sur des blocs HTML. Oui je pr\u00e9cise biseau \u00ab\u00a0plat\u00a0\u00bb parce que mes premi\u00e8res recherches, qui se dirigeaient plus vers des solutions en CSS, m’ont fait atterrir sur ces putains d’effets 3D moches, au rendu d\u00e9gueulasse ! Mais \u00e0 part \u00e7a, pas l’\u00e9quivalent d’un […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[38,39,37,41,40,15,16],"class_list":["post-183","post","type-post","status-publish","format-standard","hentry","category-javascriptjquery","tag-bevel","tag-bezel","tag-biseau","tag-coin","tag-corner","tag-jquery","tag-plugin"],"_links":{"self":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/comments?post=183"}],"version-history":[{"count":7,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/183\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/183\/revisions\/186"}],"wp:attachment":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/media?parent=183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/categories?post=183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/tags?post=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}