Réflexions sur le webdesign, les nouvelles technologies, la vie ...

CSS : Vidéos élastiques

Dans l’optique du développement multiplateformes, on nous demande de penser en amont à toutes les options possibles pour qu’un projet web soit conçu pour passer aussi bien sur les navigateurs web mais aussi sous smartphones et tablettes. J’ai fait des recherches pour un projet ou beaucoup de vidéos étaient présentes. Non seulement les CSS doivent s’adapter aux formats, mais les médias aussi. Avec HTML5 on peut utiliser la balise native « video » avec max-width:100% + height:auto, mais ceci ne marche pas avec l’iframe intégré ou la balise object.
Heureusement, j’ai trouver un petit tuto sur webdesignerwall, qui traite de ce sujet. En HTML5 le code est basique :

Html

video {
max-width: 100%;
height: auto;
}

Comme je l’ai dit au début, ce code ne fonctionne pas si l’intégration utilise balise iframe ou la balise objet, qui est couramment utilisé par la plupart des sites de partage vidéo comme YouTube et Vimeo.

Pour des balises iframe & objet élastiques

Rien de compliqué, il faut juste envelopper le code d’intégration avec une DIV et spécifiez 50% à 60% en bottom. Il faut ensuite définir les éléments enfants (iframe, object et embed) en largeur et hauteur à 100%, le tout en position absolue. Ceci afin de forcer les éléments intégrés à s’élargir automatiquement. Ce qui donne :

Html

< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0" >
< /div >

CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

Comment faire pour créer Largeur fixe & élastique ?

Pour contraindre la largeur d’une vidéo, une DIV supplémentaire est nécessaire. Enveloppez la vidéo avec cette autre DIV et spécifiez une valeur de largeur fixe avec max-width: 100%.

CSS

.video-wrapper {
width: 600px;
max-width: 100%;
}

Html

< div class="video-wrapper" >
< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0">
< /div >
< !-- / video -->
< /div >
< !-- / video-wrapper -->

Compatible ?

Ceci fonctionne sur les principaux navigateurs (Chrome, Safari, Firefox, Internet Explorer, Opera, l’iPhone et l’IPAD).

Pour aller plus loin :
http://www.alistapart.com/
http://www.tjkdesign.com/

Technique CSS : 10 graphiques interactifs pur CSS

1289153075_kchartLa création d’un graphique en CSS qui est à la fois visuellement beau et interactif, est tout à fait possible, en particulier avec CSS3. Trouver sur le site Speckyboy, un tour d’horizon avec 10 exemples impressionnants de graphiques en CSS.

graphs_charts_css_03

Framework CSS : gagner en efficacité

1248117515_templatesM’intéressant depuis un petit moment sur les outils disponibles pour une mise en page optimale d’un site, je suis tombé sur pléthore de sites proposant chacun son outil et sa méthodologie. Pour y voir plus clair, je vais essayer de synthétiser mes trouvailles.

D’abord, un Framework kézako ? On peut être le définir comme un cadre de travail, intégrant une structure ou squelette, que vous utilisez pour démarrer vos projets de sites. Par exemple, au lieu de définir une remise à zéro globale, à chaque fois que vous commencez un nouveau projet, vous pouvez (devez, dans un souci d’efficacité) mettre en place des styles par défaut (neutres) qui seront modifiés au fur et à mesure de l’avancement du projet. C’est-à-dire :
- des CSS déjà remplies avec vos besoins en attributs bloc, texte, titre, etc.
- des pages vides appelant les CSS, JS et autres
- des pages appelant les divers formulaires
- des gabarits pour la mise en forme de catalogue produits
- etc.
C’est ce que nous appelons un environnement (gabarit) de travail CSS.
Vous ne voyez pas bien l’intérêt d’un Framework de ce style, et bien détrompez-vous.

La mise en place optimisée d’éléments ne date pas d’hier, dans le monde du Print, les graphistes s’aident de grilles pour caler les éléments et harmoniser la disposition des blocs, tout en facilitant la lecture. Car le rythme de lecture est lui aussi très important, comme l’explique très bien David Larlet sur Biologeek :

Si je le rapproche ici du rythme vertical c’est qu’il procure exactement la même sensation d’harmonie et de stabilité à un site, on peut passer ainsi d’un design amateur à quelque chose de plus professionnel, le rythme vertical peut même parfois se suffire à lui-même.
Mais de quoi parle-t-on concrètement ?
C’est une notion ancienne qui vient de l’imprimerie et qui prend en compte l’alignement et l’esthétique typographique en dosant judicieusement la taille des lignes (font-size) et des interlignes (line-height) mais aussi des marges (margin et padding) afin d’obtenir un résultat agréable et régulier. On parle de rythme car c’est vraiment ce qui va donner sa dynamique à la page et retirer toute notion de cacophonie de tailles de polices et de marges inadéquates.
source : www.biologeek.com

Lire la suite…

 Page 2 de 3 « 1  2  3 »