Bonjour mes amis!
Défi
Créez quelque chose de similaire à
Codepen Dashboard.
Le résultat devrait être quelque chose comme ceci:
Solution possible
La disposition d'une section peut ressembler à ceci:
<section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section>
Qu'est-ce qui est intéressant ici?
Puisque chaque bloc a un titre, nous pouvons l'envelopper dans la section (selon la spécification, la section et l'article doivent avoir des en-têtes).
.viewport - un bloc contenant un cadre (ci-après nous l'appellerons juste un bloc).
L'attribut src fait référence au contenu de la trame, qui est remplacé par une "couverture" utilisant JS (plus de détails plus loin).
Seamless indique que le contenu du cadre doit être affiché comme s'il faisait partie d'un document (non pris en charge actuellement).
Scrolling = «no» empêche l'affichage des barres de défilement dans le cadre.
Window.open est une façon d'ouvrir le contenu d'un cadre ("_blank" dans un nouvel onglet).
Document.location est une façon de télécharger un fichier.
Tout HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width: device-width"> <title>Iframe</title> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <header> <h2>Title</h2> </header> <main> <section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section> <section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section> <section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section> <section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section> </main> <footer> <p>© All rights reserved.</p> </footer> </body></html>
Numéro de problème 1. Entrez le cadre dans le bloc
La taille d'iframe par défaut dans Chrome est 304x154px.
Appliquez les styles suivants à la section:
section { margin: 1em; width: 300px; background: rgba(0, 0, 0, 0.15); border-radius: 5px; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3); }
La définition de la largeur de la section à 300 pixels (+ méta-nom = «fenêtre» et affichage: flex sur l'élément parent) garantit le même affichage du cadre sur des écrans avec des résolutions différentes.
Il se présente comme ceci:
Et ça devrait être comme ça:
Comme vous pouvez le voir, le problème est que le contenu est affiché dans le cadre en taille réelle et que le cadre lui-même dépasse légèrement les limites du bloc.
Une façon de résoudre ce problème consiste à mettre à l'échelle l'iframe:
iframe { width: 1024px; height: 768px; transform: scale(.25); transform-origin: 0 0; }
Ensuite, déterminez la taille du bloc. Largeur: 1024 * 0,25 = 256 pixels, Hauteur: 768 * 0,25 = 192 pixels.
Tous les CSS @import url("https://fonts.googleapis.com/css?family=Playfair+Display|Roboto&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: radial-gradient(circle, skyblue, steelblue) fixed; display: flex; flex-direction: column; font-family: "Playfair Display", serif; text-align: center; color: #222; } h2 { font-size: 2em; text-transform: uppercase; text-shadow: 1px 1px #ddd; user-select: none; } main { flex-grow: 1; display: inherit; flex-wrap: wrap; justify-content: space-evenly; align-content: space-evenly; } section { margin: 1em; width: 300px; background: rgba(0, 0, 0, 0.15); border-radius: 5px; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3); } .viewport { margin: auto; width: 256px; height: 192px; overflow: hidden; } iframe { width: 1024px; height: 768px; transform: scale(.25); transform-origin: 0 0; } h3 { padding: 0.5em 0; font-size: 1em; letter-spacing: 2px; text-transform: uppercase; text-align: center; color: #ddd; text-shadow: 1px 1px 0 #222; user-select: none; } button { border: none; outline: none; margin: 0.75em 0; padding: 0.75em; width: 100px; background: linear-gradient(to bottom, skyblue, steelblue); font-family: inherit; font-weight: bold; letter-spacing: 2px; color: inherit; text-transform: uppercase; border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); cursor: pointer; transition: .2s; } button + button { margin-left: 1em; } button:active, button:checked, button:focus, button:hover { background: radial-gradient(steelblue, skyblue); color: #ddd; box-shadow: inset 0 0 2px rgba(0, 0, 0, .4); }
Problème n ° 2: affichage du contenu en survol
Avec un nombre important de cadres sur la page, en particulier avec du contenu dynamique, nous obtenons un chargement / rechargement très long et des décalages constants lors du défilement.
Afin de résoudre ce problème, nous désactivons le contenu des cadres et le remplaçons par une image. L'image doit avoir une taille de 1024x768px. Pour être plus précis, nous changeons les adresses des fichiers - la valeur est src (sur Codepen ce problème est résolu avec une courte animation du contenu du cadre). Lorsque vous survolez un cadre spécifique, son contenu doit être affiché.
La solution pourrait être la suivante:
Le résultat peut être vu
ici .
Merci de votre attention. Mes meilleurs vœux.