Développeur Web RoR

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

Tag - css3

Fil des billets

mercredi 15 janvier 2014

L'attribut form d'html5

Vous avez peut-être un jour souffert des formulaires en html. html5 introduit une nouveauté l'attribut form, celui-ci permet de placer les input/select/button partout dans votre page web et de leur associer à un formulaire.

<form id="monform">

</form>

<input type="text" form="monform" name="name" value="" placeholder="Votre nom">

Ça peut-être bien pratique croyez-moi.

lundi 23 janvier 2012

Les ressources / articles web dev de ces derniers jours

Voici les quelques ressources que j'ai trouvé intéressante ces derniers jours (ça fait office de post-it en ce qui me concerne).

Framework html / css / js : http://www.99lime.com/

jQuery highlighter de code (marche avec Ruby !) : http://steamdev.com/snippet/

Utilisation de VIM : tutorial découverte par Synbioz : http://www.synbioz.com/blog/2012/01/18/l_utilisation_de_vim

Impress.js (Sur la ferme du web) : http://www.lafermeduweb.net/billet/impress-js-creez-des-presentations-de-type-prezi-en-javascript-1273.html

User interface Futurico (attention payant, mais peut être une bonne source d'inspi !) : http://www.behance.net/gallery/Futurico-User-Interface-Pro/2650227

Autre user interface : http://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/

Inspiration de design web : http://www.queness.com/community-news/10453/30-beautiful-web-design-examples-from-behance-and-deviantart

En espérant que cette petite compilation vous servira...

jeudi 12 janvier 2012

Barre de progression en html, css3

Ca vous dit une petite barre de progression (progress bar) ? Certain diront qu'il existe <progress> et <meter> d'html5, c'est juste utilisez-les ! Là il s'agit plus de l'aspect (css) que de la sémantique (html). Donc vous pouvez également utiliser ce css avec les balises sémantique html5...

Voilà pour l'HTML

<div class="barre">
    <div class="progress"></div>
</div>

Voilà pour le CSS3

body{
    background-color:black;
}

.barre{
    height:3px;
    width:300px;
    border-radius:3px;
    border:1px solid #111;
    border-bottom:1px solid #111;
    margin:10px;
}

.progress{
    margin-top:2px;
    margin:0;
    padding:0;
    background-color:#2B85C1;
    height:1px;
    width:200px;
    box-shadow:0px 0px 15px 1px #2B85C1,0px 0px 10px 1px black;
}

Voici le jsfiddle qui va avec : http://jsfiddle.net/yQUHc/2/

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 !

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 !

mardi 15 février 2011

CSS 3 : border-image démystifié

Il y a une nouvelle propriété css dans css3 qui permet de faire ce que l'on a toujours voulu faire en html / css : Faire une boite de notre cru avec dégradé ombre interne externe... Le problème c'est qu'il fallait faire une image et cette image n'était pas extensible. C'est à ce moment là qu'intervient border-image (mettez les préfixes qui vont bien -webkit- -moz- ...)

Syntaxe :

border-image:url(monimage.png) top right bottom left {stretch|repeat|round};

Exemple :

border-image: url("../images/fonds_bloc.png") 14 18 20 15 stretch;

border-width: 14px 18px 20px 15px;

Il est bien de combiner à cette propriété la largeur des borders c'est pour cela que j'ai ajouter border-width.

top right bottom et left : ils correspondent aux bordures de notre image (en pixel si l'image est matricielle ou en pourcent pour les images vectorielles) vous noterez que pour les images matricielles il ne faut pas ajouter l'unité px

les borders width : ils correspondent eux aux bordures de notre bloc (en pixel). Pour avoir la même échelle des bordures il est bien de mettre la même valeur pour borders width et top right bottom left.

Enfin un moyen mémo technique pour se souvenir de l'ordre des tailles de bordures : on commence par top puis dans le sens horaire (voir source).

Voici un exemple réel (il faut un navigateur qui supporte les border-image) : 

http://dl.crisalid.net/

La boite bleue est contruite avec ceci, voici l'image utilisée :

http://dl.crisalid.net/images/new/fonds_bloc.png

Pour plus de doc et des exemples suivez ma source :

http://www.lrbabe.com/sdoms/borderImage/index.html#nogo

mardi 22 décembre 2009

CSS 3 - Les tables avec des div - display:table

Cette après-midi je discutai avec un collègue qui voulait faire une table dans <table> et qui d'ailleurs ne savait pas pourquoi cette guère à la mise en page en table.

Pourquoi la guerre :
Parce que table en plus d'avoir l'apparence d'un tableau, exprime l'idée d'un tableau de données. Il s'agit d'une balide sémantique (la même différence existe entre <b> : mise en gras du texte et <strong> : balise sémantique car marque l'importance du texte.)

Et alors le problème me direz-vous ?
L'accessibilité ! Un traducteur non voyant (synthétiseur vocale) va traduire <table> par "Voici un tableau". Donc imaginez si le moindre mise en page utilise <table>...

Mais il faut avouer que une apparence de tableau est bien pratique. Si on doit faire ceci avec des <div> c'est long et lourd ! CSS 3 a pensé à nous !

Voici quelques nouvelles valeurs à l'attribut css display : table, table-row, table-cell.

Le style css inline de l'implémentation est volontaire ci dessous.

Mise en page <table> irrespectueux de l'accessibilité:


<table>
 <tr>
  <td>
   1
  </td>
  <td>
   2
  </td>
 </tr>
</table>

Mise en page <div> respectueux de l'accessibilité:


<div style="display:table">
 <div style="display:table-row">
  <div style="display:table-cell">
   1
  </div>
  <div style="display:table-cell">
   2
  </div>
 </div>
</div>