Développeur Web RoR

Aller au contenu | Aller au menu | Aller à la recherche

Tag - intégration

Fil des billets

mercredi 11 janvier 2012

Effet de vignettage en CSS3

Suite à la demande de Geoffrey Dorne sur twitter, je me suis dit que ça devait intéresser d'autres personnes. Voici la ligne de css à mettre dans une class ou un id pour obtenir un effet de vignettage sur une image ou un élément html :

box-shadow:0px 0px 163px 20px black inset;

Oups pardon si vous ne connaissez pas le terme "Vignettage" cliquez-ici.

L'intégration c'est cool et amusant... quand c'est pas pour IE !

mardi 20 septembre 2011

Cours sur l'intégration html/css par BBX

Le créateur de http://bbxdesign.com/ vient de lancer un site / tutorial sur l'intégration html / css. Il est vraiment bien fait (je l'ai survolé), si vous n'y connaissez rien, je vous souhaite une bonne lecture. Tout est ici : http://css.steaw.com/ . Cliquez sur rideau puis le menu sera en haut à droite.

vendredi 16 septembre 2011

Un plugin jquery pour faire un background animé - MyFloatingBg

MyFloatingBg est un plugin jquery qui permet de faire bougé son background. Cela peut-être pratique et si c'est bien travaillé ça peut-être très joli. Bon mais faut pas en abusé hein !

Bon et puis c'est sous licence MIT !

Demo : http://www.kfsoft.info/MyFloatingBg/demo.php

Téléchargement : http://www.kfsoft.info/MyFloatingBg/jquery.MyFloatingBg.js

mercredi 7 septembre 2011

Le métier de l'intégrateur html

Voici une description illustrée du métier d'intégrateur web, ou développeur front office. J'ai fait la vidéo sans me préparer, c'est pour ça que des fois je me casse la tête sur certains trucs. Elle dure 1h (en réalité il a fallu 3 heures.) Chargez la vidéo en HD et plein écran pour bien voir.  


Intégration html5 css3 par rivsc

J'ai fait un tout petit peu de JS pour dire que j'aurais vu tous les aspects de l'intégration. Mais bon il y a d'autres choses à faire (Tester sur les autres navigateurs/versions, S'intéresser aux interfaces riches FLASH / AIR / SILVERLIGHT, faire du JS un peu plus évolué avec des plugins jquery par exemple, utiliser les CSS transitions, utiliser les font-face, ...).

Le découpage est fait à la truelle, normalement on fait des png avec la transparence, comme ça on peut changer le background comme on veut sans tout retoucher.

Après la fin de la vidéo, J'ai finalisé l'intégration un peu plus proprement (l'élément actif du menu qui passe au dessus, la couleur de fond, les transitions css pour le menu, le design fluide complet).

Ressources utilisées pour ou pendant la vidéo :

Netbeans IDE gratuit et open-source pour php/html/css/js/ruby : http://fr.netbeans.org/

Logiciel pour les screencasts : gtk-recordMyDesktophttp://recordmydesktop.sourceforge.net/about.php

Ubuntu (10.04) toujours pas upgradé le portable... : http://www.ubuntu.com/download/ubuntu/download

Gimp pour les découpages des éléments de la charte graphique (version de dev) : http://www.gimp.org/

Un navigateur internet : Chromiumhttp://www.chromium.org/

Le plugin pendule pour la capture de couleur (colorpicker) et mesure des éléments (ruler) : https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi?hl=fr

Le site internet pour faire ses gradients css3 sans se casser la tête colorzillahttp://www.colorzilla.com/gradient-editor/

Liste des selecteurs CSS w3schoolshttp://www.w3schools.com/cssref/css_selectors.asp

S'il manque des trucs, laissez des commentaires.

La charte était une démo sur un site de template payant. Donc je ne laisse pas les sources. Si vous êtes graphiste ou que vous avez les droits complets sur une charte graphique, je veux bien l'intégrer et laisser les sources , contactez-moi !

lundi 5 septembre 2011

10 astuces d'intégration html css

Voici quelques petites astuces  pour les intégrateurs web

1) Z-index ne fonctionne pas :

z-index ne fonctionne que sur les éléments positionnés (Ah ok je fais quoi alors : => position:relative; )

2) Z-index 20 au dessus de z-index 100 pourquoi ? :

Il y a certainement des contextes d'empilement différents (un parent différent avec un z-index).

3) Clear ça sert à quoi ?

clear : left / right / both : Il sert à faire un espèce de retour chariot à gauche / droite / les deux.

4) Mon bloc prend toute la place pourquoi ?

Justement parce que c'est un bloc (display:block;)... mettre display:inline si vous voulez qu'il prenne la place qu'il a besoin.

5) Je veux fixer les dimensions de mon élément, mais c'est un display:inline.

C'est pour cela qu'il existe la valeur de la proprété display : "inline-block".

6) Vertical-align ne fonctionne pas :

Vertical align ne fonctionne que sur les cellules de tableau, donc display:table-cell; ou display:table-row;

7) Je souhaite que mes deux blocs cote à cote aient la même hauteur, et si possible non fixé : 

Il faut les mettre en display:table-cell; et si possible mettre le conteneur parent en table-row.

8) Quand je change les paddings mon bloc change de taille :

Oui les padding ne comprenne pas la taille du bloc (content-box), il faut donc spécifier : box-sizing:border-box; maintenant les bordures et le padding sont inclus, les margins quand à eux sont toujours exclus.

9) Un élément de type bloc prend width:100%; par défaut !

10) N'oubliez pas le reset css (http://meyerweb.com/eric/tools/css/reset/).

En espérant que ça puisse servir à quelques uns.

mercredi 17 août 2011

Utiliser les caractères unicodes plutôt que des pictos bitmap

Bon voilà j'étais comme toujours en train de quémender des pictogrammes au graphiste quand soudain j'ai eu une idée ! Comme mes sites sont en utf-8 pourquoi ne pas utiliser les caractères unicodes. Plus besoin de faire des sprites css avec moulte picto dans tous les états (hover, visited, active).

Exemple : 

♔♕♖♗

Généralement le code html est &#XXXX;  XXXX étant le code hexa du caractère !

Evitez de mettre ça dans la balise title y parait que c'est spammy...

Voici les pages wikipedia à regarder pour trouver vos pictos :

http://en.wikipedia.org/wiki/Category:Unicode_charts

Symbole pour éditer copier coller : http://en.wikipedia.org/wiki/Template:Unicode_chart_Dingbats

Symbole de dominos : http://en.wikipedia.org/wiki/Template:Unicode_chart_Domino_Tiles

Symbole ordinaux et cardinaux : http://en.wikipedia.org/wiki/Template:Unicode_chart_Enclosed_Alphanumerics

Symbole d'opérateur mathématique : http://en.wikipedia.org/wiki/Template:Unicode_chart_Supplemental_Mathematical_Operators

Autres Symboles : http://en.wikipedia.org/wiki/Template:Unicode_chart_Spacing_Modifier_Letters

Formes géométriques : http://en.wikipedia.org/wiki/Template:Unicode_chart_Geometric_Shapes

Flèches : http://en.wikipedia.org/wiki/Template:Unicode_chart_Arrows

Jeu d'echec : http://en.wikipedia.org/wiki/Template:Unicode_chart_Chess_Symbols

Encore quelques uns : http://panmental.de/symbols/info.htm (il suffit de copier le caractère et de le coller dans votre IDE préféré)

mardi 14 juin 2011

Less fonctionne maintenant en javascript

Bon l'outils en ligne de commande lessc c'est un peu has-been du coup ! Less s'utilise maintenant coté client avec le script javascript. Du coté serveur ça tourne avec Node.js, un peu lourd, pour juste compiler un css...

Mais du coup la version client est super pratique. Rien besoin, pas besoin de déployer un fichier css compilé, c'est le script js qui compile le css à la volée.


<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Voir la doc lesscss

- page 2 de 5 -