background preloader

Un arrière-plan extensible intelligent

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. Exemples Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe : Simon & Comet Flavors me Piz'za-za Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le principe Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré. Préparation de l'image de fond La méthode CSS3 Le code HTML

http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Related:  CSS3création site dreamweaverFront-endStructures esthétiques (HTML, CSS, Jquery...)DEVELOPP | PART 01

Les transitions et animations CSS Introduction Depuis toujours, les concepteurs web ont tenté de styler et de dynamiser des pages HTML terriblement monotones. À la fin des années 90, un simple effet de survol ne peut pas être réalisé facilement : l’utilisation de JavaScript est inévitable, mais impose de connaître la programmation. Une taille de police en fonction de la largeur d’écran J’ai souvent eu l’occasion à travers mes divers projets Web mobile (responsive), d’avoir à réduire la taille des polices de titre car même un simple mot ne passait pas en largeur. Pour éviter d’avoir une césure sur chaque mot du titre, le plus simple était de s’autoriser une réduction approximative du corps. (approximative… façon de parler). Je vous propose des solutions relative. CSS3 à la rescousse

jQuery – Effet smooth scroll (défilement fluide) - Tutoriels Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 110 465 fois. 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 {...}.

Les fondamentaux du Responsive Web Design Prenons deux exemples simples. Le premier pourrait être ces vitres qui s'opacifient en fonction de la luminosité extérieure. Ou encore ces murs-miroirs où plus nous nous approchons, plus ils nous semblent se déformer. Méthode Daisy : les CSS feuille à feuille Bienvenue chez vous ! C’est le bazar, n’est-ce pas, dans votre code CSS ? Le CSS ? 50 Templates HTML5 de qualité à télécharger gratuitement Dernièrement la qualité des templates HTML5 gratuits à télécharger a augmenté drastiquement et leur nombre s’est multiplié. C’est une bonne chose pour vous qui êtes friands de ces ressources, que ce soit pour des projets rapides, pour apprendre ou pour avoir une base qui vous fera gagner du temps pour vos designs de sites. En général il n’est pas facile pour un webdesigner de trouver un template qui soit à la fois beau, intéressant et gratuit.

Infinite Scroll avec jQuery sur WordPress Dans ce tutoriel vidéo, je vous propose de mettre en place sur votre site un système de défilement infini avec jQuery et sans utiliser de plugins WordPress. Avant de regarder la vidéo, je vous conseille de lire le contenu de cet article afin de mieux comprendre le principe de la technique utilisée durant le tuto. En 2011, le défilement infini (ou la pagination infinie) a été popularisé par les réseaux sociaux tels que Twitter et Facebook. En effet, depuis la découverte de cette technique, de nombreux sites ont mis en place l’Infinite Scroll à la place place des paginations à l’ancienne (bouton suivant et précédent). Par exemple, afin d’améliorer l’expérience utilisateur, Tumblr a su adapté les archives de ses blogs avec ce procédé (ex:

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

Centrer un float en CSS Une zone – la galerie – doit être constituée de un ou plusieurs éléments – les boites – centrés à l’interieur et sur une seule ligne. En HTML « à la papy » c’est très facile à faire : la galerie est une cellule d’un tableau avec la propriété align="center", et le contenu est un tableau d’une seule ligne dont le nombre de cellules varie de 1 à 5 (le nombre maximum de boites pour tenir sur une seule ligne). Mais comment faire ça en CSS ? Problématique Créer une grille CSS responsive Les grilles CSS, à quoi ça sert ? La plupart des sites Internet ont un gabarit « générique ». Par exemple, un blog va avoir un corps et une barre latérale. Une grille CSS va vous permettre de gérer ce gabarit très facilement.

14 templates HTML5 gratuits Nouvelle fournée de ressources sur le blog : au programme du jour, 14 templates HTML5 à télécharger gratuitement. Pratiques lorsqu’on souhaite mettre rapidement un projet en ligne, certains templates peuvent littéralement vous sauvez la vie ou du moins vous faire économiser un bon nombre d’heures de travail. D’après moi, il sont à utiliser avec modération et si vraiment nécessaire.

Twitter Feed for WordPress : Afficher vos derniers tweets Twitter est l’un des réseaux sociaux les plus en vogue du moment avec Google+ et Facebook. Si vous avez la gâchette facile au niveau des tweets et que vous souhaitez les afficher sur votre site Internet, l’extension WordPress Twitter Feed for WordPress est pour vous. Twitter Feed for WordPress vous permet tout simplement d’afficher les tweets d’un utilisateur dans vos pages, articles ou widget.

Related:  CSSEffet Parallaxcreation webeffet paralax