background preloader

Alsacréation - section HTML & CSS + JS

Alsacréation - section HTML & CSS + JS
Related:  création site dreamweaver

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 Il existe une unité encore peu connue car prise en charge par nos navigateurs depuis peu de temps, il s’agit des unités relative au viewport. Pour résumer, nous allons proposer un corps de texte qui dépend de la largeur de la fenêtre du navigateur. Très bien, mais que représente une unité de vw, par exemple ? Prenons un exemple plus parlant. Mon corps de texte aura un équivalent de 10% de la largeur de mon viewport, à savoir la largeur de la fenêtre de votre navigateur. Il vous faudra donc recharger la page sur la page de démonstration à chaque redimensionnement de la fenêtre du navigateur.

Amélioration progressive : Modernizr et sélecteurs CSS avancés A l'inverse du concept de dégradation gracieuse, le principe d’amélioration progressive ("progressive enhancement" en anglais) est une stratégie de conception web en couches successives, qui permet à chacun d’accéder au contenu et aux fonctionnalités de base d’une page web en utilisant n’importe quel navigateur, tout en offrant une version améliorée aux utilisateurs disposant de navigateurs plus récents ou plus évolués. En pratique et dans le domaine des styles CSS, cela se traduit par une mise en forme initiale commune à l'ensemble des logiciels de navigation, puis un "bonus" pour agrémenter ceux qui ne supportent pas encore CSS3 ou mal CSS2.1. Cela permet d’opter occasionnellement pour une technologie récente telle que CSS3 pour certaines décorations d’éléments de page (coins arrondis, ombrages, semi-transparence, transitions progressives…) qui pourraient consister en des « bonus » mérités pour les navigateurs récents. Modernizr : le bazooka JavaScript :root pour IE9 et supérieurs

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

Utiliser CSS3 aujourd'hui, outils et ressources Bien que les spécifications CSS 3 soient encore en phase de maturation, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer. Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public. De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. Voyons quelques uns de ces outils en ligne en vogue actuellement : CSS3pie.com CSS3please.com CSS3.info

draGGradients -- create custom css radial-gradients dragging your mouse draGGradients is as a simple tool to generate and customize multiple css3 radial gradients. I get back an old project that uses a multiple gradient jpg image as a background and started to generate the same image in css-only. Instead of code only this image I finished doing this little stuff. Toggle main controls (also pressing ESC key) to customize, add and arrange each point generator. Basically the tool works generating radial-gradients from each draggable point, and you could control: - The main color. You could also add, delete and arrange each point from the same section. In the bottom left menu, you could: - Toggle points. You could also create a pen with the generated gradient, clicking on the Codepen logo. This simple and little tool was made with ❤ by @elrumordelaluz

scottjehl/Respond 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. Le site Creazy Leaf a fait une belle sélection de thèmes HTML5 que vous pouvez retrouver ici même : 50 Templates HTML5 à télécharger gratuitement Ci-dessous un petit aperçu de quelques-uns de ces templates de qualité. Overflow Aperçu / Téléchargement Arcana Aperçu / Téléchargement Dopetrope Aperçu / Téléchargement Halcyonic Aperçu / Téléchargement Prologue Aperçu / Téléchargement Strongly Typed Aperçu / Téléchargement Verti Aperçu / Téléchargement Txt Aperçu / Téléchargement Nina Aperçu / Téléchargement Mini-Portfolio en flat design Aperçu / Téléchargement

49 Free Responsive HTML5 CSS3 Website Templates HTML5 has been around for a while now and we can see all developers have started to share free resources in HTML5, CSS3. The css3 website templates we are introducing today are totally free with amazing features like flat design, responsive layout, jquery sliders etc. Free doesn’t make it any bad as you can see most of these html templates look like premium templates. We have took a little extra time to grab new HTML templates in this exciting list of freebies. Download, share these templates with your friends and you have complete freedom to modify the theme to your project needs without any attributions. Here you will find around 50 free responsive html5 css3 website templates which can be used on your new website to alter, create high quality templates of your own without working from scratch. Also take a look at our previous articles on HTML5 Templates Spore – Free HTML5 Masonry Blog Template DemoDownload Burstfly – Free Grid HTML template DemoDownload Mart eCommerce Template Nava Lens

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. Certains sympathiques webdesigners offrent un certain nombres de templates codés, prêts à l’emploi. Brushed Template Un template one page, basé sur Twitter Bootstrap, Responsive, optimisé pour les écrans Retina. Kataklimt Responsive Html5 Theme Responsive et créé pour la photographie. MiniPort Un design one-page, légèrement texturé, avec de larges typographies, pour présenter votre profil en un clin d’œil sur tout périphériques. Telephasic Utile dans de nombreuses situations, ce template polyvalent pourra s’adapter facilement à vos besoins. Andia Agency Prologue Strongly Typed Escape Velocity Mori Dark Nina Theme Striped

Tutoriels HTML5, CSS3, Accessibilité, JavaScript, AJAX, jQuery Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5, XHTML), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Dans DreamWeaver, il y a "Dream", ce qui indique que faire un site avec ce logiciel est du domaine du rêve (Annie Cordy)

CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Ressources HTML5 Ressources HTML5 Compatibilité HTML5 et navigateurs du marché : en plus chaque feature est un lien vers des explications et exemples en français ! : tables de compatibilités mises à jour pour chaque élément html/api js/element css3 par navigateur/version : site recommandant ce qu'il est bon et pas bon d'utiliser dans HTML5/CSS3 si on ne veut pas avoir de soucis, indique les solutions alternatives :t est interactif de votre browser pour mesurer son support HTML5 Sites intéressants généraux sur HTML5 en particulier contient un très bon tutorial de base sur les CANVAS. Tutoriaux spécialisés Sur l'utilisation du Canvas Pour les plus curieux et pour ceux qui ont fait du processing en Licence, une version 100% HTML5+Javascript existe : les démos sont assez impressionnantes. File API Web Sockets SVG et HTML5

40 Useful HTML5 Tutorials, Techniques and Examples Toolkits HTML5 right after its arrival has been in the news because of its enhanced functionality and ease of use. And now the latest version of HTML5 is out, web developers and internet marketers are shifting to HTML5 as it comes with several new and improved features that distinctly make Web development easier. In this collection, we are sharing some useful HTML5 tutorials with our designing and development fraternities to help them learn the new ways to get web pages SEO friendly and more interactive. Useful HTML5 Tutorials, Techniques and Examples Create a Stylish Contact Form with HTML5 & CSS3 Follow this step by step process to create your own stylish contact form completely in HTML5 and CSS3. Create Vector Masks using the HTML5 Canvas The HTML5 canvas can be used to create a lot of cool things, like games, video effects, graphs and more. Making a Beautiful HTML5 Portfolio This tutorial shows you how to create a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin.

La structure d’une page HTML5 Comme l’HTML5 est actuellement mis en œuvre par quasiment tous les webmasters sur Internet, enfin du moins les plus « passionnés », j’ai pensé qu’il était nécessaire d’expliquer certains des nouveaux éléments et de poser les bases de la structure d’une page HTML5. D’autant que plusieurs des sites que j’ai davantage regardés et qui montrent une structure HTML5, ne semblent pas avoir compris comment les nouveaux éléments structurels doivent être utilisés. Effectivement la structure de base d’un document HTML5 n’a pas changé. Chaque structure comprend une section d’entête (head) contenant des détails invisibles et des liens vers des ressources et une section de corps (body) où les éléments visibles du document résident. Voici un exemple pour la section d’entête (head) d’une page HTML5 : [sourcecode language="HTML"] <title>Titre de la page</title> </head> [/sourcecode] DOCTYPE (doctype) Élément HTML (html) Nous avons maintenant besoin d’ouvrir l’élément <html lang="fr">. Élément d’entête (head)

Related: