• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

Vous êtes un utilisateur de Coda ? Vous passez un temps précieux à coder toutes ces propriétés CSS3 à rallonge dans de vos feuilles de style ? Hum.. je pense que ce billet peut vous intéresser… Vous y trouverez une liste de clips CSS3 pour Coda qui devraient booster votre productivité.

Vous n’avez pas envie de lire l’article ? Téléchargez dès maintenant la liste de clips CSS3 pour Coda :

 

>>>>> Télécharger les clips CSS3 pour Coda <<<<<

 

Coda

Les nombreuses fonctionnalités de Coda en ont fait l’un des outils de développement privilégié des utilisateurs de Mac. C’est un logiciel « tout en un » : éditeur de texte, éditeur css, transfert de fichiers, système de gestion de versions, nombreux plugins etc… un outil parfait pour le travail d’intégration web (entre autre).

Parmi les multiples fonctionnalités proposées, le système de « clips » est vraiment intéressant car il permet de gagner un temps précieux.

Les Clips ?

Coda dispose d’une bibliothèque dédiée au stockage de snippets (petit morceaux de code préformatés, réutilisables facilement). Par défaut la bibliothèque ne contient que très peu de clips mais libre à vous d’en ajouter autant que vous voulez (html, css, js, php etc.).

Voici l’exemple d’un clip pour la propriété border-radius

CSS3 Coda clip : border-radius

On y retrouve les différents préfixes propriétaires et la propriété border-radius initiale. Chaque clip se compose d’un titre, d’un contenu et il est possible d’attribuer un raccourci pour en inclure rapidement le contenu dans la page en cours (ici : radius + tab)

Il existe de nombreux Clips Coda disponibles gratuitement sur Internet : Wordpress, Javascript, HTML etc.

CSS3 Coda clips

CSS3

Depuis l’arrivée des CSS3 nous sommes habitués à utiliser des propriétés à rallonge. Entre les préfixes propriétaires permettant la compatibilité inter-navigateurs, le progressive enhancement, et des propriétés CSS3 naturellement longues (comme les dégradés par exemple), tout cela accroit le temps passé à créer nos feuilles de style.

CSS3 Coda clips

Pour optimiser mon travail d’intégration j’ai créé une liste de clips regroupant de nombreuses propriétés CSS3 auxquelles sont rattachés des raccourcis. Cet article est l’occasion de partager cette liste avec les utilisateurs de Coda qui pourraient en avoir besoin.

Voici la liste exhaustive du contenu que vous trouverez dans mes clips CSS3 :

  • Box-shadow
  • Text-shadow
  • Border-radius
  • Gradients
  • Gradients + background image
  • Multiple backgrounds
  • Transform : scale
  • Transform : rotate
  • Transform : translate
  • Transform : skew
  • Transition : all
  • Animation
  • Keyframes

Screenshot de la liste de clips CSS3 :

CSS3 Coda clips

Pour être utilisé plus rapidement, chaque clip possède son propre raccourci. Pour border-radius, par exemple, il suffit de tapper radius et tab pour insérer le contenu dans votre feuille de style.

Autre exemple : si vous souhaitez ajouter un dégradé (et sa longue syntaxe), il vous suffit de tapper gradient suivi de tab pour insérer le clip. C’est très simple et cela vous économise quelques lignes de CSS à chaque fois.

CSS3 Coda clips : raccourci

Installation

L’installation est simplissime puisque vous n’avez qu’à double cliquer sur le fichier CSS3.clips pour ajouter une nouvelle famille de clips « CSS3″ à la liste des clips de Coda.

Vous pouvez bien sûr personnaliser le contenu afin de vous l’approprier plus facilement. Pour modifier un clip il vous suffit de cliquer sur l’icône « i » située sur chaque intitulé comme vous pouvez le voir sur le screenshot ci-dessous.

CSS3 Coda clips : modification

Vous l’aurez compris, ce système de clips peut vous faire gagner un temps précieux alors pourquoi s’en priver ?

 

>>>>> Télécharger les clips CSS3 pour Coda <<<<<


Quelques liens pour finir

 

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Aurélien voir son blog

Web designer freelance : ergonomie, design UI-UX web/mobile, intégration

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

12Commentaires

  • Avatar_thumb
    Jérémy MATUR

    le 10/03/2011 | #1

    Super Article,

    Merci !

    • Avatar_thumb
      The Multimédia

      le 10/03/2011 | #2

      Est-ce qu'il y a un équivalent de coda pour windows et/ou Linux ?

    • Avatar_thumb
      Mathias Coutant

      le 11/03/2011 | #3

      Super article, utilisateur de coda depuis maintenant 1 an je suis toujours aussi fan.

      @The Multimédia: À ma connaissance non, mais pour coder sur windows tu peux voir du côté de komodo edit, ou encore netbeans qui sont pas mal.

      • Avatar_thumb
        Emilien Edmond

        le 12/03/2011 | #4

        Hum je suis le seul à ne pas pouvoir télécharger les clips?

        • Avatar_thumb
          Aurélien FOUTOYET

          le 12/03/2011 | #5

          Merci à tous pour vous commentaires.
          Emilien, je viens d'essayer et le lien est fonctionnel de mon côté

        • Avatar_thumb
          leo fontin

          le 12/03/2011 | #6

          C'est une super ressources. J'utilise Coda depuis un bon moment maintenant mais j'ai jamais pris le temps de faire ça.
          Merci beaucoup.

          • Avatar_thumb
            Arbaoui Mehdi

            le 12/03/2011 | #7

            Merci pour l'article, Personnellement j'utilise TextMate ou Neatbeans.

          • Avatar_thumb
            Vincent Bianciotto

            le 14/03/2011 | #8

            Merci pour cet article. Très intéressant. Je conseil également aux utilisateurs de Coda (ou autres logiciels) l'utilisation du framework "less" qui est également d'une grande aide pour la création de styles CSS3 : http://lesscss.org/ Et d'ailleurs, j'invite nos bons rédacteurs de blogduwebdesign à faire un article sur "less", qui est un framework formidable et devient rapidement indispensable. Je dirai même plus, je me propose également pour la rédaction de cet article si ça vous tente.

          • Avatar_thumb
            empty

            le 27/03/2011 | #9

            Merci pour ces clips qui sont bien utiles et évites les allez retour pour les trous de mémoires :ninja: Merci pour le conseil pour less, c'est vrai qu'un article serait intéressant :)

          • Avatar_thumb
            Willy PRADON

            le 10/06/2011 | #10

            Merci beaucoup ça me fera gagner un maximum de temps car jusqu'à maintenant je tapais tout à mains nues :-)

            Également merci à Vincent pour "less"

            • Avatar_thumb
              GeekPress

              le 30/10/2011 | #11

              Je ne connaissais pas le référentiel des clips Coda et c'est juste énorme ! Merci pour ces liens qui vont me permettre de gagner un temps fou :)

            • Avatar_thumb
              Manu

              le 13/11/2011 | #12

              Excellent, merci !

            Ecrire un commentaire

            captcha

            Ouvrir