background preloader

Une vidéo d'arrière-plan sur toute la page en HTML et CSS

Une vidéo d'arrière-plan sur toute la page en HTML et CSS
Ce tutoriel a été initialement publié en anglais par Florent Verschelde sous l'intitulé Full page video background with HTML and CSS. Quelques adaptations ont été apportées par rapport au tutoriel original. Je voulais implémenter une vidéo d'arrière-plan occupant toute une page : avec l'élément HTML 5 <video>, utilisant tout le viewport et recouvrant le viewport (pas de bandes noires). Afin de recouvrir pleinement le viewport avec la vidéo, on pourrait utiliser JavaScript, mesurer le viewport, puis dimensionner et positionner en conséquence la vidéo. Cependant, il existe aussi des solutions entièrement en CSS, au moins pour le cas d'usage ci-dessus. Voir la page de démonstration Format letterbox par défaut Prendre un élément <video> et le faire recouvrir le viewport est aussi facile que pour n'importe quel élément HTML, par exemple avec un positionnement fixe : Cela fait bel et bien prendre à notre élément <video> la largeur et la hauteur du viewport. Comment corriger ça ? Et… ça y est !

http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html

Related:  Structures esthétiques (HTML, CSS, Jquery...)dompecheHTML

Project Parfait Project Parfait, est une expérimentation d'Adobe visant à proposer dans le navigateur une petite application (mais néanmoins très puissante) qui décompose les fichiers PSD envoyés, pour : extraire les codes couleurs extraire du code CSS copier-coller le texte exporter les calques dans des formats optimisés (gif, jpg, png) obtenir les dimensions des éléments ou les distances entre calques Bref, c'est un outil relativement léger et pratique lorsqu'il s'agit de faire de la découpe/intégration de page HTML et CSS à partir de maquettes Photoshop, et qu'on n'a rien d'autre sous la main. Par contre, il n'est pas encore idéal : en situation réelle, le code CSS produit est loin d'être... parfait (il est vrai qu'on ne peut pas faire de magie à partir d'une maquette graphique pure).

16 sites pour trouver des illustrations vectorielles gratuites - Pour tout designer / webmaster / auto entrepreneur web qui se respecte, le problème des images pour créer un site est récurrent. Il existe une multitude de sites pour trouver des photos stock, mais beaucoup sont malheureusement payants. Il existe heureusement quelques alternatives, qui feront l'objet d'un billet ultérieur Pour ce qui est des illustrations vectorielles, ou vector files, le problème devient un peu plus épineux.

Les attributs async et defer pour <script> Deux attributs HTML permettent de modifier le comportement des balises <script> et plus particulièrement pour le chargement des ressources JavaScript : async : charger/exécuter les scripts de façon asynchrone. defer : différer l'exécution à la fin du chargement du document. Ils sont souvent confondus avec pourtant des conséquences différentes.

10 sources d'images libres et gratuites pour illustrer son site De nombreuses plateformes hébergent des images librement utilisables par les éditeurs de sites web professionnels. Comment chercher des photos, cliparts et illustrations gratuites de qualité ? Quelles plateformes offrent une alternative aux banques d'images payantes ? La méthode insertAdjacentHTML Exemple de code avec innerHTML <div id="mondiv"></div><script> document.getElementById('mondiv').innerHTML = 'Et hop ! <img src="saucisse.png" alt="">'; </script> Mais cela remplace directement tout le contenu de l'élément (à moins de le récupérer avant par une pirouette). Pour insérer du contenu en choisissant l'emplacement exact, on pourra plutot se servir de insertAdjacentHTML() qui va prendre en paramètres : la position d'insertion avec les mots clés : beforeBegin avant l'élément (équivalent à before en jQuery) afterBegin à l'intérieur au début (équivalent à prepend en jQuery) beforeEnd à l'intérieur à la fin (équivalent à append en jQuery) afterEnd après l'élément (équivalent à after en jQuery) le code HTML à insérer

Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery. 25 banques d'images et des millions de photos gratuites [+5 BONUS] Tous les acteurs du web doivent être conscient de l’importance d’utiliser les bons supports graphiques et les bonnes images. En effet, la réussite d’un projet web dépend en bonne partie du design et de l’ergonomie d’un site. Pas que bien sûr, mais un site avec de belles illustrations pourra naturellement mieux se démarquer de ses concurrents disposant d’images médiocres ou pas d’images du tout. En tant que professionnel du web, que vous soyez webdesigner, blogueur, référenceur, webmaster, développeur, chef de projet ou encore rédacteur, vous devez connaître les bonnes sources de photos pour enrichir vos contenus. Et si ça peut être gratuit, alors pourquoi s’en empêcher ! Plusieurs personnes m’ayant contacté par mail pour savoir où je trouve les photos pour illustrer mes sites, je me suis dit qu’il serait sympa de réaliser un récapitulatif complet des meilleures banques d’images libres de droits et gratuites que j’utilise régulièrement.

Microdata et Schema.org, la sémantique chirurgicale Les dispositifs mettant en exergue la sémantique qui permet notamment aux moteurs de recherche d'appréhender des informations précises sur le contenu d'une page Web ont été valorisés par l'avènement de la technologie Microdata dans HTML5. Fort des expérimentations en matière de balisage sémantique fournies par les microformats, on a pu mettre en place une syntaxe permettant de faciliter ce type de mise en évidence. Les microformats avant HTML5

Une feuille de styles de base pour le media print Nous avons parfois la fâcheuse habitude de penser que le Web n’est bon à être restitué que sur un écran d’ordinateur. Pourtant, un grand nombre de documents web et d’informations en ligne sont parfaitement adaptés au médium d’impression. Non seulement pour faciliter leur consultation, les transmettre, mais aussi pour les archiver. Pour vous faciliter la tâche et ne plus la négliger, je vous propose une feuille de style dédiée à l'impression qui condense bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide de la règle-at @media print {...}.

Photl : plus de 500 000 photos gratuites et libres de droit Illustrer un site ou un article de blog avec de belles photos, gratuites, en respectant le droit d’auteur, ce n’est pas toujours facile. Heureusement, des sites web entiers répertorient les meilleures images libres de droit. Focus sur Photl, un outil bien pratique pour trouver des photos de qualité. Sur Photl, vous pouvez rechercher une photo gratuite et libre de droit avec un mot clé. Les keywords les plus recherchés sont indiqués en bas du site pour vous aider.

HTML5 - L'attribut download L'attribut download de HTML5 permet de forcer le téléchargement d'une ressource au lieu de la faire afficher par le navigateur. Avant l'apparition de cet attribut encore très méconnu, il était nécessaire de passer par une solution PHP ou .htaccess pour forcer le téléchargement d'une ressource (ou autre solution serveur). Désormais cet attribut rend cette fonctionnalité beaucoup plus abordable. Cet article a été publié initialement sur le blog de l'auteur : HTML5 - Attribut download Comment fonctionne l'attribut download ?

Maîtriser l'impression CSS Proposer une version imprimable reposant uniquement sur une feuille de style pour le media print appliquée à la page affichée par le navigateur offre plusieurs avantages immédiats : Il n’est plus nécessaire de générer côté serveur une version HTML spécifiquement destinée à l’impression ; La feuille de style pour le média print est généralement rapide à créer, dès lors que les styles pour l’affichage sont réservés à ce dernier par la précision du media screen ; Les possibilités sont variées (toutes les propriétés de positionnement, de bordures, de typographie, etc. sont disponibles) ; Les résultats par défaut sont corrects pour un effort somme toute raisonnable. On rencontre cependant deux sortes de difficultés : certaines parties du contenu affiché peuvent finalement ne pas être imprimées, certaines propriétés des CSS print peuvent ne pas avoir d’effet, selon les navigateurs. Les problèmes d’impression peuvent être classés en deux catégories : Ce qui dépend de la configuration du navigateur

74 Banques d'images gratuites Toute image trouvée sur Internet et que vous pouvez télécharger est gratuite et vous pouvez en faire ce que vous voulez pour un usage privé, il est donc inutile de se poser la question. Puis-je utiliser telle ou telle photo que j’ai trouvée sur Internet? Réponse : oui. Oui à partir du moment où l’usage de la photo est strictement privé (répétition volontaire). Plyr - Un player vidéo HTML5 moderne sans fioritures Plyr est un player HTML5 vidéo moderne et très léger pour vos applications web. Un nouveau venu parmi les lecteurs HTML5 video du marché, Plyr se distingue par son côté moderne et qui va droit au but. En effet, il se concentre sur les navigateurs modernes et prend en charge Internet Explorer 10+ (voire IE9 en mode dégradé).

Related: