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 CSS3 Coda Clips

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

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

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.

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 :

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.

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.

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 CSS3 Coda Clips

You don’t want to read the complete article ? Download right now the CSS3 coda clips :

Download CSS3 Coda Clips

Coda

With its numerous features, Coda is a great development tool for Mac users.It’s a « all in one » software : Text editor, css editor, file transfer, svn, lots of plugins etc. Perfect for html/css integration jobs (among others).

Among the many features available, the system of « clips » is really interesting because it saves valuable time.

Clips ?

Coda has a library dedicated to storing snippets (small pieces of preformatted and easily reusable code). The default library contains very few clips, but you can add as many as you want (html, css, js, php etc..).

Here is an example of clip for the border-radius CSS3 property

You can see the different vendor prefix and the initial border-radius property. Each clip has a title, some content and it is possible to assign a shortcut to quickly include the content in the current page (here: radius + tab).

There are lots of Coda Clips available on the internet : Wordpress, Javascript, HTML etc.

CSS3

Between vendors prefix, progressive enhancement and some naturally long CSS3 properties (like gradient for example), we spend a precious time to write and code our stylesheets.

In order to optimize web integration in my projects I’ve created a list of clips with many CSS3 properties and their attached shortcuts. This article is an opportunity to share those clips with Coda users who may need it.

Here are all the CSS3 properties you will find in my clips :

• 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 of the CSS3 clips content

In order to be used quickly, a shortcut is attached to each clip. For example, to insert the border-radius property, you just have to write radius and tab to insert he content into your stylesheet.

Another example : write gradient and tab to insert a CSS3 gradient property. It’s easy and it saves few lines of CSS code each time.

Installation

The installation is very simple as you just have to double click on the CSS3.clips file in order to add it to your Coda clips list.

You could also customize the content of each clip if you click on the « i » icon at the right of each clip title as it’s shown on the screenshot bellow

As you’ll probably understand the Coda clips system can save you valuable time so why deny it ?

Download Coda CSS3 Clips

A propos de ce projet…

Comme je le disais en introduction, ce petit projet personnel provient d’une envie de création et d’une période plutôt propice pour moi donc autant en profiter. Ayant récemment fait l’acquisition d’un Iphone et étant en quête de fonds d’écran orientés typo je me suis dit que je pouvais essayer d’en créer moi-même. Vous retrouverez à la fin de cet article des liens pour plus d’informations sur les polices utilisées.

Il vous suffit de cliquer sur les images pour visualiser les wallpapers en grande taille.

Vous pouvez dès maintenant Télécharger le zip complet

Mon travail vous plait ? Télécharger le zip complet

About this project

As I said in introduction, this small personal project came from a desire to create something and a more favorable time for me to do it. Having recently acquired an iPhone and always looking for type oriented wallpapers, I thought I could try to create it by myself. You will find at the end of this article all the links for more information about the fonts used.

You just have to click on the images to see large size wallpapers previews

You could already Download all wallpapers (zip)

You like my work ? Download all wallpapers (zip)