http://beta.rdsign.net/ Blogue RDSIGN pour partager au sujet de Javascript, Mootools, CSS3, HTML5, CSS, HTML... Sun, 20 May 2012 04:08:06 -0400 fr-CA http://beta.rdsign.net/article_79 http://beta.rdsign.net/article_79 Wed, 09 May 2012 11:01:39 -0400 Les générateurs et outils CSS sont de plus en plus nombreux sur la toile. Certains sont essentiels et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! http://beta.rdsign.net/article_78 http://beta.rdsign.net/article_78 Tue, 08 May 2012 14:25:49 -0400 Pour le travail, j'ai travaillé sur des animations de transition d'images pour une galerie. Voici le code mootools, html et css pour ces animations. http://beta.rdsign.net/article_77 http://beta.rdsign.net/article_77 Sun, 29 Apr 2012 18:35:24 -0400 Voici une traduction d'un article très intéressant et pratique.  Transitions Only After Page Load de Cris Coyier http://beta.rdsign.net/article_76 http://beta.rdsign.net/article_76 Sun, 29 Apr 2012 15:16:08 -0400 Quelques personnes me sont revenus avec des interrogations sur le design réceptif, soit le "Responsive Design". Pour vous aider à rapidement débuter avec le design réceptif, je vous présente une méthode simple en 3 étapes. http://beta.rdsign.net/article_75 http://beta.rdsign.net/article_75 Tue, 24 Apr 2012 11:30:49 -0400 9 morceaux de codes réutilisables qui peuvent s'avérer très pratique dans vos projets. http://beta.rdsign.net/article_74 http://beta.rdsign.net/article_74 Sun, 22 Apr 2012 17:08:01 -0400 Accordéon vertical en CSS3 (en réponse à l'article Accordéon horizontal en CSS3 http://beta.rdsign.net/article_73 http://beta.rdsign.net/article_73 Fri, 13 Apr 2012 14:45:57 -0400 Code pour un menu accordéon en CSS3 et Mootools. Facilement configurable. http://beta.rdsign.net/article_72 http://beta.rdsign.net/article_72 Thu, 12 Apr 2012 09:37:07 -0400 Parallax en Mootools. HTML, CSS et Javascript très simple et épuré pour faciliter son utilisation. http://beta.rdsign.net/article_71 http://beta.rdsign.net/article_71 Tue, 03 Apr 2012 11:00:43 -0400 Les bookmarlets sont des petites fonctions Javascript entreposées en tant qu'un URL d'un favoris que l'on peut placer dans notre barre de favoris et sont utilisées et gérées comme un favori. Ellers sont donc des outils agissant en un seul clic afin d'éviter de répéter des tâches ou encore de modifier une page courante en temps réel. http://beta.rdsign.net/article_70 http://beta.rdsign.net/article_70 Sun, 01 Apr 2012 17:19:14 -0400 Il m'est souvent arrivé d'avoir des problèmes avec les paragraphes dans des "layouts" fluides. Je suis tombé sur un article très intéressant qui démontre quelques méthodes pour contrer ce problème. http://beta.rdsign.net/article_69 http://beta.rdsign.net/article_69 Mon, 19 Mar 2012 16:07:00 -0400 Je travaillais sur un projet où je devais déplacer un objet dans le DOM. En fait, je bougeais un lecteur vidéo dans sa page. http://beta.rdsign.net/article_68 http://beta.rdsign.net/article_68 Sun, 18 Mar 2012 16:50:04 -0400 Voici, juste pour le plaisir, un petit effet de "Polaroid" fait en CSS. http://beta.rdsign.net/article_67 http://beta.rdsign.net/article_67 Fri, 09 Mar 2012 14:25:39 -0500 On peut remplacer dès aujourd'hui notre utilisations du text-indent:-9999px; http://beta.rdsign.net/article_66 http://beta.rdsign.net/article_66 Wed, 29 Feb 2012 13:54:23 -0500 Dans cette liste nous allons couvrir quelques-uns des meilleurs "framework" qui permettent de créer des présentations rapidement et simplement.  http://beta.rdsign.net/article_62 http://beta.rdsign.net/article_62 Fri, 17 Feb 2012 10:41:15 -0500 Un artcile complet sur les Formulaires HTML5 : placeholder, required, pattern et validation. http://beta.rdsign.net/article_61 http://beta.rdsign.net/article_61 Tue, 31 Jan 2012 16:00:22 -0500 J'ai découvert un super texte sur de nouvelles propriétés CSS3, comme il était en anglais je l'ai traduit pour vous. L'original se trouve sur impressivewebs. http://beta.rdsign.net/article_60 http://beta.rdsign.net/article_60 Fri, 27 Jan 2012 13:52:08 -0500 Encore une fois, j'ai travaillé sur la confection d'un portfolio. Cette fois-ci, un portfolio/galerie plein écran avec navigation en Mootools et CSS3 fonctionnel sur tous les navigateurs. (IE ne peut cependant afficher les petites subtilités CSS3.) http://beta.rdsign.net/article_59 http://beta.rdsign.net/article_59 Fri, 20 Jan 2012 15:54:04 -0500 Un des fonctionnalités des libraires JavaScript que j’adore et utilise souvent est la délégation d’événements.  http://beta.rdsign.net/article_57 http://beta.rdsign.net/article_57 Thu, 12 Jan 2012 11:27:05 -0500 Comment résoudre le problème de différenciation entre la pseudo-classe et le pseudo-élément en CSS. http://beta.rdsign.net/article_56 http://beta.rdsign.net/article_56 Sun, 08 Jan 2012 18:53:16 -0500 Petite expérience en CSS3 pour faire un slideshow d'images plein-écrans. http://beta.rdsign.net/article_55 http://beta.rdsign.net/article_55 Thu, 22 Dec 2011 15:44:07 -0500 Voici comment faire une barre de progrès avec petite animation en HTML5 et CSS3. http://beta.rdsign.net/article_54 http://beta.rdsign.net/article_54 Sat, 17 Dec 2011 14:23:34 -0500 C'est juste un petit essai d'animations sur "border" en CSS3. Deux bouttons, deux animations, tout simple et fort sympathique. http://beta.rdsign.net/article_52 http://beta.rdsign.net/article_52 Tue, 13 Dec 2011 14:43:18 -0500 Mootools tubular permet d'avoir une vidéo Youtube de votre choix en arrière-plan de votre site. http://beta.rdsign.net/article_51 http://beta.rdsign.net/article_51 Sat, 10 Dec 2011 18:13:53 -0500 Pour le plaisir, Accordéon horizontal en CSS3 exclusivement, sans javascript. http://beta.rdsign.net/article_50 http://beta.rdsign.net/article_50 Fri, 09 Dec 2011 16:18:31 -0500 Petit pack incluant le sprite, chaque image individuelle, le PSD et ainsi qu'une version monochrome. http://beta.rdsign.net/article_49 http://beta.rdsign.net/article_49 Sat, 03 Dec 2011 20:21:10 -0500 Pour mon portfolio j'ai construit un outil de classification avec animation "slide" de Mootools, voici comment le faire. http://beta.rdsign.net/article_48 http://beta.rdsign.net/article_48 Sun, 27 Nov 2011 19:59:08 -0500 Un "header" pour bien cibler les ordinateurs et mobiles et leur différents affichage. http://beta.rdsign.net/article_47 http://beta.rdsign.net/article_47 Sun, 27 Nov 2011 13:18:34 -0500 Après quelques petits ajouts, voici la version 1.1 de mon menu avec animation d'images en Mootools. http://beta.rdsign.net/article_46 http://beta.rdsign.net/article_46 Fri, 18 Nov 2011 16:53:37 -0500 25 secrets des outils de développement de navigateur http://beta.rdsign.net/article_45 http://beta.rdsign.net/article_45 Tue, 15 Nov 2011 10:04:38 -0500 Voici 3 bulles de dialogue, en CSS3, qui remplace le blockquote. http://beta.rdsign.net/article_44 http://beta.rdsign.net/article_44 Thu, 10 Nov 2011 16:46:48 -0500 Voici comment faire de multiples outlines en CSS3 de manière toute simple. http://beta.rdsign.net/article_43 http://beta.rdsign.net/article_43 Sun, 06 Nov 2011 11:07:45 -0500 Quelques fois, nous avons besoin d'une façon vite d'avoir une image plein écran en "background". J'espère que dans ces moments vous n'utilisez pas de Javascript, parce que c'est si simple à faire avec seulement du CSS. http://beta.rdsign.net/article_42 http://beta.rdsign.net/article_42 Wed, 02 Nov 2011 09:57:08 -0400 Comment faire une navigation sans javascript avec animation, gradient, ombre en  CSS3. http://beta.rdsign.net/article_41 http://beta.rdsign.net/article_41 Sun, 30 Oct 2011 21:08:17 -0400 Pour le plaisir voici un petit bouton réalisé entièrement en CSS3. http://beta.rdsign.net/article_40 http://beta.rdsign.net/article_40 Fri, 28 Oct 2011 16:13:06 -0400 Il existe beaucoup de façons pour utiliser dès maintenant l'attribut PLACEHOLDER. En voici une, toute simple, en Mootools. http://beta.rdsign.net/article_39 http://beta.rdsign.net/article_39 Thu, 27 Oct 2011 10:54:04 -0400 Petite librairie d'animation CSS3 http://beta.rdsign.net/article_38 http://beta.rdsign.net/article_38 Mon, 24 Oct 2011 15:52:39 -0400 Voici un petit effet/animation en CSS3 et Mootools d'un album de photos empilés. http://beta.rdsign.net/article_37 http://beta.rdsign.net/article_37 Sun, 23 Oct 2011 10:05:52 -0400 Cet article va discuter de comment cibler les appareils mobiles et d'afficher un contenu différent, différentes feuilles de styles et même rediriger à un URL mobile. http://beta.rdsign.net/article_36 http://beta.rdsign.net/article_36 Mon, 17 Oct 2011 13:23:56 -0400 Voici une traduction de l'excellent article de Louis Lazaris sur son site : impressivewebs.com, ce dernier démontre les différences entre les différents rendus des navigateurs pour les bordures. http://beta.rdsign.net/article_35 http://beta.rdsign.net/article_35 Fri, 14 Oct 2011 16:05:29 -0400 Comment utiliser SASS et SCSS sur un serveur distant. Méthode pour pouvoir travailler sur un SCSS, sauvegarder et rafraîchir votre page et avoir le CSS généré. http://beta.rdsign.net/article_34 http://beta.rdsign.net/article_34 Fri, 23 Sep 2011 14:49:07 -0400 Un petit post pour des boutons fluides avec images transparentes. http://beta.rdsign.net/article_33 http://beta.rdsign.net/article_33 Fri, 09 Sep 2011 21:24:20 -0400 Un portfolio tout simple en CSS qui laisse apparaître le titre et la description de l'image lorsque le curseur passe par-dessus cette dernière. http://beta.rdsign.net/article_31 http://beta.rdsign.net/article_31 Mon, 05 Sep 2011 15:31:33 -0400 Nouveaux onglets (tabs) fait en CSS3, fonctionnels sans Javascript et sans images sprites. http://beta.rdsign.net/article_30 http://beta.rdsign.net/article_30 Sun, 28 Aug 2011 18:09:52 -0400 Galerie pour portfolio en mootools que vous pouvez télécharger. Simple d'utilisation et très esthétique. http://beta.rdsign.net/article_29 http://beta.rdsign.net/article_29 Fri, 26 Aug 2011 21:01:40 -0400 Voici tout simplement une méthode pour vous faire de beaux boutons avec une apparence de métal brossé en CSS3. http://beta.rdsign.net/article_28 http://beta.rdsign.net/article_28 Sun, 14 Aug 2011 12:43:11 -0400 Vous en avez sûrement déjà vu, ces petits onglets en haut d'une boîte de texte qui servent à partager du texte. Nous allons donc, très simplement,  créer ces onglets fluides. http://beta.rdsign.net/article_27 http://beta.rdsign.net/article_27 Wed, 03 Aug 2011 19:51:17 -0400 J'ai vu un beau "rating system" en Jquery, ne travaillant qu'avec Mootools, j'ai décidé de le réécrire et de l'améliorer. J'en ai fait une classe réutilisable partout et pouvant gérer plusieurs "rating system" sur la même page. De plus, il est prêt à être utilisé conjointement à un fichier PHP pour gérer l'évaluation d'un article avec une base de données. http://beta.rdsign.net/article_26 http://beta.rdsign.net/article_26 Mon, 01 Aug 2011 11:21:24 -0400 Pour un projet, j'avais besoin d'une petite bordure, style couture, sur un morceau de tissus(image en background). J'ai travaillé à faire une version CSS de ce style pour que mes boîtes soient fluides et que lorsque je les agrandis le résultat reste beau. http://beta.rdsign.net/article_25 http://beta.rdsign.net/article_25 Fri, 29 Jul 2011 15:06:44 -0400 Voici quelques trucs pour commencer et comprendre le HTML5. Cette liste n'est pas exhaustive, il manque beaucoup de nouveaux éléments, elle ne se veut qu'un aide pour bien commencer. http://beta.rdsign.net/article_24 http://beta.rdsign.net/article_24 Sat, 23 Jul 2011 19:20:55 -0400 Ce fameux Lightbox de jquery, refait avec seulement du CSS3. http://beta.rdsign.net/article_23 http://beta.rdsign.net/article_23 Thu, 21 Jul 2011 11:28:27 -0400 Je me suis amusé à faire une petite animation de gallerie d'images en CSS3. Je suis arrivé avec un résultat intéressant, compatible avec les dernières versions de Firefox et Chrome. http://beta.rdsign.net/article_22 http://beta.rdsign.net/article_22 Wed, 20 Jul 2011 15:17:34 -0400 En fouillant un peu sur le web, en jouant un peu avec le CSS3 j'en suis venu à faire 3 styles de Text-shadow très intéressants. http://beta.rdsign.net/article_21 http://beta.rdsign.net/article_21 Wed, 13 Jul 2011 21:08:58 -0400 Je me suis amusé un peu avec les animations CSS3. Je suis arrivé avec un résultat satisfaisant, compatible avec les dernières versions de Firefox et Chrome. http://beta.rdsign.net/article_19 http://beta.rdsign.net/article_19 Fri, 08 Jul 2011 11:37:47 -0400 C'est juste un petit "reminder" pour pouvoir appliquer un style différent selon le navigateur. http://beta.rdsign.net/article_18 http://beta.rdsign.net/article_18 Thu, 23 Jun 2011 13:24:16 -0400 Juste un petit peu de CSS3 pour faire une police d'écriture style "emboss" que j'avais besoin. http://beta.rdsign.net/article_17 http://beta.rdsign.net/article_17 Wed, 22 Jun 2011 15:41:36 -0400 La propriété word-wrap est rarement utilisée mais reste une propriété CSS extrêmement utile. Vous pouvez forcer un long text à "wrapper" sur une nouvelle ligne en spécifiant break-word avec une propriété word-wrap. http://beta.rdsign.net/article_16 http://beta.rdsign.net/article_16 Wed, 15 Jun 2011 11:26:07 -0400 Quand arrive le temps de faire un petit Tooltip pour un site vous utilisez quoi ? Il existe plusieurs moyen, habituellement le plus fiable et le plus utilisé est d'ajouter du javascript avec une librairie (mootools ou Jquery). J'ai travaillé pour en créé un en html5 et CSS3. http://beta.rdsign.net/article_15 http://beta.rdsign.net/article_15 Tue, 14 Jun 2011 13:07:48 -0400 Juste un petit exemple pour mettre un vidéo en HTML5 de manière fluide. http://beta.rdsign.net/article_14 http://beta.rdsign.net/article_14 Thu, 09 Jun 2011 11:25:33 -0400 Petit menu tout simple mais fort sympathique et utile. http://beta.rdsign.net/article_13 http://beta.rdsign.net/article_13 Sun, 05 Jun 2011 10:31:40 -0400 "Vertical align" peut facilement devenir un casse-tête. J'ai travaillé quelques façons de faire pour que ça ne le soit pas. http://beta.rdsign.net/article_12 http://beta.rdsign.net/article_12 Sat, 04 Jun 2011 15:20:20 -0400 Je suis tombé sur un plugin fort intéressant en Jquery de Dave Rupert. Je l'ai donc transposé en Mootools pour pouvoir moi-même l'utiliser. FixText rend la grosseur de la police d'écriture flexible aux browsers. Il est avantageux d'utiliser ce plugin avec un "fluid Layout" pour que son texte se redimensionne selon la largeur de son parent. http://beta.rdsign.net/article_11 http://beta.rdsign.net/article_11 Thu, 02 Jun 2011 15:36:01 -0400 Il existe une technique appelé le "Double border technique" pour faire un semblant de "bevel". J'ai repensé un peu le code pour travailler avec l'attibut outline. http://beta.rdsign.net/article_10 http://beta.rdsign.net/article_10 Tue, 24 May 2011 11:27:25 -0400 Pour vous faire de beaux "header" qui font la largeur du navigateur. http://beta.rdsign.net/article_9 http://beta.rdsign.net/article_9 Tue, 17 May 2011 15:46:41 -0400 À l’origine, les déclarations CSS @font-face faisaient partie de la norme CSS 2.0 et étaient supportées aussi bien par Internet Explorer 6 que par Netscape 4. Cette propriété a été abandonné en CSS 2.1 Avec CSS 3, c’est le grand retour en force des fontes web à travers le module CSS Fonts qui redéfinit la méthode d’insertion des fontes personnalisées dans les navigateurs. Les spécifications c’est bien, mais comme d’hab http://beta.rdsign.net/article_6 http://beta.rdsign.net/article_6 Sat, 14 May 2011 10:25:03 -0400 J'ai beaucoup fouillé sur internet pour un carrousel en Mootools, sans grand succès. Sois ces carrousels ne fonctionnaient pas comme je voulais, sois ils ne fonctionnaient pas tout court. J'ai donc décidé d'en faire un comme je le voulais. Comme j'ai chercher pour celui et que je n'ai rien trouvé, j'ai décidé de vous le partager. http://beta.rdsign.net/article_5 http://beta.rdsign.net/article_5 Tue, 10 May 2011 21:52:51 -0400 Si vous avez un site à plusieurs colonnes, il faut absolument jetter un oeil à 1140 CSS Grid pris sur ce site http://cssgrid.net/. http://beta.rdsign.net/article_2 http://beta.rdsign.net/article_2 Wed, 04 May 2011 09:34:11 -0400 HTML5 Boilerplate est un template (HTML+CSS+JS+...) lancé par Paul Irish (Modernizr) et Divya Manian. Il contient toutes les bonnes pratiques du moment en terme de performances, de compatibilité inter-navigateurs, de JavaScript, avec un soupçon d'accessibilité (si utilisé à bon escient), voire de Flash. http://beta.rdsign.net/article_1 http://beta.rdsign.net/article_1 Sat, 30 Apr 2011 10:28:16 -0400 J'ai voulu faire des boites qui reprenaient le style du logo ci-haut. J'ai donc fait en CSS3 un pattern, j'y ai ajouté un border-radius et un box-shadow. http://beta.rdsign.net/article_4 http://beta.rdsign.net/article_4 Thu, 28 Apr 2011 15:07:47 -0400 Application qui aide à créer une grille modulaire dans photoshop.