Transitions in space. A few simple transitions can make a huge difference. In this article we’ll learn how we can use transitions to bring our content to life, as well as plan and build our hover effects to perform smoothly and look great. Transitions vs animations Transitions are a great way to smooth the changes from one state to another (and back again) in the browser.
They seem like a simpler alternative to the keyframes and animation approach, but they are useful in very different ways. For example, a transition isn’t much use if you want an animation to play on load, or if you want it to loop infinitely. But if you have two states and you want to be able to easily animate back and forth between the two, a transition’s the best choice. I’ve written more about the differences between transitions vs animations. In this example we’re going to build up a space scene and introduce a hover effect to reveal some more information about the planet. You can find the full demo here. Setting the states Starting state. Spring Into CSS Grid □ CSS Grid has been getting a lot of attention recently and I finally dedicated time this past weekend to sit down and get a basic understanding of how it works. It was an emotional rollercoaster of an experience (seriously, this is life changing stuff) but I was able put together some notes while creating my demo and wanted to share.
This post is by no means a thorough look at just how powerful this layout feature is, but hopefully it helps take the potential intimidation factor out of the mix to get started, or spring into, CSS Grid. Here’s a link to the full screen demo. Drawing Up A Plan As with any new web thing I am trying to learn I instantly jumped into Adobe Illustrator 🙃 Feeling inspired by Earth Day, grids, and purple I set out to draw up a basic outdoor scene I could then work to replicate with CSS Grid and try to learn as I go.
Here’s what I ended up with: Markup Before implementing Grid the layout is a standard block situation with all the images stacked on top of one another. Iframe, pour un contenu dynamique ou isolé de la page. Cette balise faisait déjà partie de la spécification HTML 4 mais est développée dans la version 5 alors que les frames, et donc la balise frameset, sont devenus obsolètes. Iframe signifie "inline frame", en français cadre en ligne, il s'insère dans le flot du contenu de la page. On utilisait déjà l'iframe pour créer du contenu dynamique avant l'apparition d'Ajax: en assignant un contenu avec JavaScript, on pouvait modifier la page très facilement après son chargement.
Mais Ajax permet une interaction plus complète avec le serveur. L'iframe a cependant d'autres utilisations. Indépendamment des moteurs de recherche les iframes permettent d'insérer du contenu plus facilement qu'avec Ajax qui requiert des fonctions XMLHttpRequest. Ajax reste indispensable pour charger une page HTML créée sur le serveur, en fonction de paramètres fournis par l'utilisateur. Utilisation d'iframe On définit une iframe en assignant l'URL d'une page contenant le contenu à inclure à l'attribut src. Code source: srcdoc. Intégrer une page web au sein d'une autre page web - Apprendre le Web.
Dans cet article, nous verrons comment intégrer une page web dans une autre, tout en minimisant les risques encourus par une telle manipulation. L'imbrication des pages, quelques mots d'histoire Imbriquer des pages entre elles peut sembler étrange voire contre-nature mais cela existe depuis les débuts du Web.
Lorsque la bande passante était utilisée par des modems 56k (voire moindre), pour réduire le temps de téléchargement, les pages web étaient fragmentées en morceaux appelés frames, tous intégrées dans un frameset. Malheureusement, les frames ont apporté plus de problèmes que de solutions et le concept de frame/frameset a disparu depuis l'apparition d'AJAX. Cela dit, il existe des cas où imbriquer des pages web est une solution valide. C'est notamment le cas lorsqu'on veut inclure du contenu généré par un utilisateur ou du contenu tiers (des publicités par exemple).
Afin d'améliorer la sécurité lors de telles opérations, il est possible d'intégrer le contenu dans une iframe HTML5. Menu déroulant – FrogWeb. Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source. Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée.
Pour des raisons d’accessibilité et de reférencement j’utilise une autre technique : left: -999em (cacher) et left: auto (montrer) Utilisation de left Tout d’abord une précision quant à l’utilisation de left, top, right et bottom : ça ne fonctionne que sur des éléments positionnés (absolute, fixed, relative). Cela tombe bien puisque pour faire un sous menu déroulant celui-ci doit-être en position: absolute. Voici le code totalement épuré de toute CSS décorative pour une meilleure compréhension : Code HTML Code CSS ce qui nous donnes (ah oui, c’est du brut…) : D’autres techniques existent mais je trouve celle-ci plus « propre ». Rien ne vous empêche également de les laisser. Tutoriel Vidéo HTML-CSS Menu déroulant en CSS. CSS3 Minimalistic Navigation Menu. Responsive Retina-Ready Menu. A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. View demo Download source Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game.
The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize. Please note: some effects only work in browsers that support the respective CSS properties. Preparing the icon font Creating a custom icon font might look a bit complicated, but with tools like IcoMoon it’s just a matter of creating the icons and importing them into the tool. The first thing we need to do is to create the icons for the menu. La mort des gros frameworks CSS ? Découvrez 5 Frameworks CSS légers dans les tendances !
Envie de changer de framework CSS ? Découvrez donc 5 frameworks CSS très légers et très tendance en ce moment ! La mort des gros frameworks CSS ? Je ne sais pas vous, mais pour moi les trending repositories de Github sont un point de passage obligé pour ma veille journalière. JS, CSS, PHP, cela me permet de trouver de jolies ressources à voit presenter, et me fourni l'arsenal nécessaire dans ma vie de développeur web. Si vous etes comme moi, vous avez peut-être vous aussi remarqué quelque chose d'assez étrange des dernières semaines sur la page CSS : la disparition des gros frameworks, et l'entree en force des frameworks CSS minimalistes. Attention, je ne dis pas que Foundation et Bootstrap ont toujours été en haut du classement, mais ce n'est vrai que depuis de nombreuses années maintenant, la norme était d'avoir au moins une de ces des deux ressources dans le top 5 (souvent les deux, souvent bien plus près de la première position que de la cinquième). Tent Tachyons Bulma Spectre Neat.
Comprendre et appliquer la récursivité en CSS. Aujourd'hui, le BlogDuWebdesign vous propose de jeter un oeil à un concept intéressant à appliquer au CSS : la récursion. La récursivité, kesako D'après Wikipédia "La récursivité est une démarche qui fait référence à l'objet même de la démarche à un moment du processus. ". C'est l'effet que vous avez en filmant un écran avec la camera qui diffuse sur ce même écran, ou si vous mettez deux miroirs l'un en face de l'autre.
En développement, nous appelons récursive une fonction qui s'appelle elle-même, et c'est un des meilleurs moyens de se passer des boucles. Comprendre la récursivité en CSS Malheureusement, la recursion n'est pas quelque chose que l'on ne pourra réellement appliquer en l'état en CSS, mais il est assez simple de reproduire un effet a mi-chemin entre la récursion informatique et la récursivité. Prenons comme exemple le pen suivant. Si la taille est une propriété "évidente" pour la récursion, il en existe de nombreuses autres ! Ajoutons un peu d'animation dans l'équation. 23 excellents thèmes & templates Bootstrap gratuits.
Bootstrap est un framework gratuit qui permet de mettre sur pied un site responsive rapidement et simplement. Vous trouverez dans cet article 23 templates bootstrap gratuits parmi les plus intéressants du web. Ils sont majoritairement conçus pour des sites one-page et seront particulièrement utiles si vous souhaitez créer un site pour promouvoir un évènement, mettre un CV en ligne ou mettre en avant des créations pour un freelance ou une agence. Pour aller plus loin, vous trouverez à la fin de l’article 3 tutos qui vous aideront à maîtriser Bootstrap. 1.
Avana Portoflio minimaliste construit avec Boostrap 2. Template bootstrap gratuit, one-page, moderne, présenté avec une thématique fitness/yoga mais facilement adaptable. 3. Thème en 2 pages créé pour mettre en avant vos travaux et vos coordonnées 4. Template bootstrap gratuit, accrocheur et dynamique 5. Thème one-page idéal pour une startup ou une entreprise 6. Thème one-page conçu pour les évènements 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. A Complete Guide to Flexbox. Tavmjong Bah's Blog | A blog about Inkscape, SVG, and other worldly matters… The SVG Working Group had a four day face-to-face meeting in Sydney this month. Like last year, the first day was a joint meeting with the CSS Working Group. I would like to thank all the people that donated to Inkscape’s SVG Standards Work fund as well as to the Inkscape general fund that made my attendance possible. Joint CSS and SVG Meeting Minutes CSS Stroke and Fill Specification The CSS working group would like to allow the use of the SVG ‘stroke’ and ‘fill’ properties on CSS text as well as other places in CSS (e.g. box border).
Text Issues Next we covered a whole slew of text issues I raised dealing with flowed text in SVG. Strategy for using CSS in SVG for wrapping The first issue was to agree on how SVG and CSS are related. The CSS/HTML code: The result: Wrapped text in HTML. The CSS/SVG code: Wrapped text in SVG 2. It was pointed out at a discussion on Day 2, that the use of ‘shape-outside’ in SVG was not consistent with the CSS model. How is the first line placed in a wrapped shape? Nouvelle formule pour les inspirations pour intégrateurs #83 : Illustrations CSS. Premier article d'un nouveau format pour les inspirations pour intégrateurs, qui se renouvelle pour 2017 ! Pour ce premier chapitre, revenons sur les illustrations et animations en CSS. Les inspirations pour intégrateurs changent de formules ! Dans quelques mois les inspirations pour intégrateurs atteindront l'âge respectable de 4 ans, et ont très peu évolué depuis leurs débuts.
En un peu plus de 80 articles, j'ai sélectionné pour vous quelques créations pour leur rendu visuel et leurs techniques de créations que je trouvais intéressants, mais j'ai maintenant un petit peu l'impression de tourner en rond avec ce format. Heureusement, nous commençons une nouvelle année, et c'est une excellente excuse pour entamer un nouveau format de ce rendez-vous ! Tous les premiers jeudis du mois, vous retrouverez un article d'inspirations pour les intégrateurs dans le style des anciens, avec des ressources sélectionnées, et ordonnée selon leur complexité.
Créations et animations en CSS "traditionnelle" Tutoriel : Transition automatique sur un texte. Heu… tu te demandes certainement ce que j’entends par « transition automatique sur un texte » ! En fait, il s’agit simplement d’appliquer une transition sympa sur des petits textes qui défileraient en continu, remplaçant le texte précédent (par exemple, cela peut s’appliquer à des citations).
Comme un exemple est toujours plus parlant que des mots, je t’ai créé une page de démonstration Tu as probablement déjà croisé ce genre de chose lors de tes aventures sur le web ! Cela t’intéresse peut-être d’ajouter cet effet sympathique sur ton site ou sur ton portfolio, que tu as bien sûr créé avec succès grâce à ce tutoriel. Je vais t’expliquer comment faire ça de deux façons : avec quelques lignes de jQuery, ou en utilisant seulement les animations CSS. Pourquoi deux façons différentes, en fait ? Bonne question ! Allez, jeune MMI, trêve de blabla et en route pour les explications ! La base Et oui ! En HTML, les citations ont leurs propres balises : The power of jQuery Première étape : intégrer jQuery.
Tutoriel pour créer un portfolio avec tri. .portfolio .item { width: 48%; /* On ne met pas 50% afin de créer un espace de 2% de chaque côté (rappel : 2 colonnes, donc 2% sur la colonne de gauche et 2% sur la colonne de droite). */ display: block; /* Comme les items sont des ancres à la base (qui sont de type inline), il faut les transformer en block pour manipuler leur positionnement. */ color: #fff; box-sizing: border-box; padding: 1em; position: relative; /* La position relative permet de dire que les éléments suivants devront se placer par rapport à celui ci. Height: 300px; overflow: hidden; /* Grâce à cette ligne, on évite les débordements, et surtout on cache l'état 0 des animations cursor: pointer; margin-bottom: 20px; border: 3px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); /* Permet d'ajouter une ombre portée légère, les paramètres dans l'ordre sont : x, y, portée, couleur transition: all .2s ease-in-out; /* Comme pour le menu, on ajoute la transition pour créer un easing sur nos animations -moz-transition: all .2s ease-in-out;
Ressources et Tutoriels : transitions et animations en CSS3. Je le prédis comme une grosse tendance pour 2013 : l’adoption et l’utilisation massive d’animations en CSS3 pour agrémenter l’expérience utilisateur et apporter de l’originalité au design. Les possibilités d’animation offertes par le CSS3 poussent l’interaction plus loin, et cela relativement facilement. Voici une liste de liens regroupant chacun plusieurs tutoriels et ressources à télécharger gratuitement tirant profit de ces nouvelles possibilités. Plus besoin de Flash pour réaliser de petites animations et effets divers. Qu’il s’agisse d’effets de survol, de surbrillance, de simulation de 3D en exécutant des rotations, des transformations de plans, des découpages, etc… le CSS3 conforte ses positions et montre qu’il y a encore beaucoup à faire avec.
Vous trouverez ci-dessous de nombreux exemples de ce qu’il est possible de faire grâce à cette nouveauté et à un support de ses fonctionnalités meilleur de mois en mois. 18 tutoriels d’effets d’animation et de transition avec CSS3. Réaliser un effet "affichage d'aéroport" en CSS et JS. 20 Tutoriels et outils pour le Webdesign et l’Intégration HTML/CSS/jQuery. Astuce CSS : La propriété « content » La propriété CSS « content », qui n’est pas supporté par Internet Explorer (pas de surprise, en effet), permet de réaliser des mises en page particulières et offrent de nombreuses possibilités. Relativement peu utilisée, elle permet d’ajouter du contenu avant ou après un élément spécifié. Comment ça marche ? Fonctionnant en couple avec les pseudo-classes :before et :after, elle vous permet donc d’ajouter de nombreuses choses, et c’est bien là sa force : Exemples 1.
Design Spartan est un site trop cool ! Cette syntaxe particulière permet de dire que l’on veut, après la lien <a>, ajouter entre parenthèse le contenu (chaîne de caractère) de l’attribut href de ce même lien <a>. Résultat : 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor dolore magna aliqua. Je spécifie donc que mes paragraphes « citation » auront comme contenu additionnel avant et après eux une image. Résultat : 3. Résultat : Plus d’exemples La prorpiété « content » sur Babylon-Design. 10 Astuces CSS pour vous sauver la vie ! #3.