background preloader

BgMax - Image de fond ajustée

BgMax - Image de fond ajustée
script : bgMax v1.1.1langage : javascriptcatégorie : moduleusage : Un background-image toujours adapté aux mesures de la fenêtre du visiteur, avec en prime une apparition en fondu.tags : effets spéciaux - image Concept Une image de fond, quand elle est bien soignée, peut apporter à un site web un bel atout graphique. Hélas, avec la variété croissante des tailles d'écrans, on ne sait jamais dans quelles conditions le visiteur pourra profiter de notre belle image. bgMax permet de pallier ce problème, et d'aller même un peu plus loin. adaptation des mesures de l'image à celles de la fenêtre plusieurs modes d'ajustement apparition de l'image en fondu (optionnel) Intégration Pour commencer, il faut charger le script, en insérant le code suivant entre les balises <head> et </head> de la page : Ensuite, on déclenche l'éffet par un tout petit bout de javascript placé en fin de page, juste avant la balise </body> : <script type=\"text/javascript\"> bgMax.init('dossier/mon-image.jpg'); </script> Options Related:  Portfolio

PHP - Récupération de données | CommentCaMarche Mars 2014 PHP rend très simple la récupération de données envoyées par l'intermédiaire de formulaires HTML. Création d'un formulaire Grâce à la balise FORM du langage HTML, il est très simple de créer des formulaires comprenant : des champs de saisie des cases à cocher des boutons radio des listes à choix multiples des champs "hidden" (cachés) pour transmettre certaines informations ... Pour utiliser un tel formulaire capable d'envoyer des informations à un script PHP, il suffit de mettre le nom du fichier PHP qui réceptionnera les informations en tant que valeur de l'attribut ACTION de la balise FORM. Voici ce à quoi peut ressembler un formulaire en HTML, permettant d'envoyer les coordonnées d'une personne à un fichier PHP nommé test.php3 : Le résultat de ce code est le suivant (le bouton Envoyer est volontairement désactivé) : Nom : <INPUT type=text size=20 name=nom> Prénom : <INPUT type=text size=20 name=prenom> Age : <INPUT type=text size=2 name=age> <INPUT type=submit value=Envoyer>

Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page Advertisement a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element by Scott Robbin Download Backstretch Now link to a hosted copy on cdnjs.com or download the entire project, including examples. Do you see the full-sized background image on this page? In a nutshell, that's what Backstretch does. It will stretch any image to fit the page or block-level element, and will automatically resize as the window or element size changes. Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site. Demos Where can I get it? If you are interested in learning more about Backstretch, it's recommended that you view the project on GitHub. Support Basic support is offered through Github's issues tracker. If you are in need of immediate support, Email Support is available for $17. Other jQuery Plugins

Selection de ressources web gratuites Sélection de ressources web gratuites TextPattern : est un CMS (Content Management System) plutôt dédié aux écrivains, en OpenSource. Développé en PHP & MySQL. Bluefish Editeur de texte basique mais orienté web développement et webdesign. jEdit Autre éditeur de texte pour développeurs. Pêle-mêle : Générer des fonds de pages à rayuresCréer des avatars Créer des onglets Superposer un ruban dans un coin d'une page Web Créer des badgesDes boîtes et menus à onglets Créer des spinners c'est-à-dire une animation destinée à faire patienter le visiteur.Chercher des images sur Flickr par analogie de couleurs RoundedCornr génère le code CSS d'une boîte aux bords arrondis. gestion du gradient ; bordure ; transparence ... 3D-box maker génère une boîte 3D et plaque des images téléchargées sur chaque face. Logo Creator Comme son nom l'indique.SimWebSol Un autre générateur de logo avec reflet.Genfavicon : générer un icône instantanément grâce à une image téléchargée. A suivre ...

Cours de PHP - Les sessions Voyons maintenant un tutorial vraiment important pour la sécurité de vos scripts : les sessions. En effet, afin de transmettre des variables de pages en pages, plusieurs possibilités s'offrent à vous : les divers champs des formulaires, qu'ils soient hidden ou non.passer les variables directement à travers les liens.utiliser les cookies.utiliser les sessions. Cependant, toutes ces possibilités n'offrent pas le même niveau de sécurité. En effet, certaines de ces possibilités sont vraiment pratiquent dans leurs modes d'utilisation (comme les cookies par exemple mais tout le monde n'est pas obligé d'accepter les cookies), ce qui implique, dans la majorité des cas, un bas niveau de sécurité (cas du passage des variables par les liens, ce qui implique que les variables seront visibles de tout le monde). De même, faire dans chaque page un formulaire contenant des champs hidden permettant de faire circuler les différentes variables à travers toutes les pages du site n'est pas vraiment pratique. <?

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

Inserer un document dans un site ou blog Ce message est redondant car on commence à sérieusement connaître ce service. Il permet d'insérer à peu près n'importe quel type de document dans un site ou un blog, alors commençons par quelque chose de simple : une image : Jusque là tout fonctionne. Un détail, je ne peux afficher l'aperçu du billet. Tout ce que j'obtiens est une vaste fenêtre contenant la balise 'objet'. Voyons maintenant quelque chose de plus compliqué un fichier Excel 2007 (suffixe xlsx), roulement de tambour : Tout cela m'a l'air opérationnel. Voila un exemple concret de embedit.in.

Barre de progression animée en CSS pur Nous allons mettre une image de fond sympathique dans le "container" et définir la largeur (width) et la hauteur (height). Le premier enfant (span) aura pour fonction de représenter la barre de progression. Nous allons positionner le second enfant (em) en absolu par-dessus la barre de progression et lui donner une position gauche à la valeur d'arrêt désirée. L'élément em à le même fond que le "container" ainsi il donne un effet d'arrêt de la barre de progression à un certain pourcentage. Pour conserver ceci aussi beau que possible, j'ai utilisé une balise HTML de définition de list (dl) pour plusieurs valeurs. Pour une barre de progression vous pouvez utiliser autant d'élément que vous le désirez. J'ai décidé d'utiliser les styles directement dans le HTML pour le placement de la balise em. Comment est-elle faite ? Dans mon exemple, j'utilise une barre de progression de 200 pixels de large.

Apprendre le HTML5 – Tutoriel Complet Tutoriel complet pour apprendre le HTML5 – Quelque soit votre niveau, ce cours est fait pour vous. Que vous débutiez dans la création de site internet ou que vous maitrisez déjà le xHTML et / ou le HTML 4.01, découvrez toute la puissance du HTML5. Chaque chapitre est rédigé de façon concise et compréhensible par tous. Ils sont divisés en thèmes consultables indépendamment suivant votre niveau et vos connaissances. L’ensemble du cours – en constante évolution - est accessibles à tous quelque soit votre niveau : Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum. Maintenant que vous savez à quoi ressemble le HTML5 et ce qu’on peut faire avec, passons aux choses sérieuses. Voici les bases des langages de développement web HTML et CSS. La transition du HTML 4.01 au HTML5 apporte son lot de modifications : de nouveaux éléments sont apparus et d’autres sont devenus obsolètes ou inappropriés. [cadrePTQ]

colorimetrie et codage hexadecimal Des sites fournissant ce service existent probablement par dizaines ou pire. Celui-ci est simple, sobre et fournit : Le code héxadécimal lorsqu'on fait glisser la souris sur la palette.La couleur lorsqu'on lui fournit le code héxa. On y trouvera également une explication sur l'impact des couleurs sur l'humeur et le comportement. Une objection cependant : il lui manque la pipette, petit instrument qui reconnait la couleur sur laquelle il est posé. Bien utile pour les webmestres. couleur.com

Related: