| <article> | |
| <p>It is possible to use <a href="#">JavaScript</a> <span class="linkpreview"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/milky-way-swirl-2x.jpg" alt>Web Developer Reading List: JavaScript | |
| </span> and several image files to achieve this, at the cost of swapping multiple image files back and forth over a potentially weak and thin wireless connection. The <a href="#"><picture></a> <span class="linkpreview"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/small-male-runner-2x.jpg" alt>Responsive Images For Designers: The HTML5 picture element</span>element achieves the same result, at the expense of bandwidth.</p> | |
| <p>In an ideal world we would have an image format that integrated “dynamic crop marks”, allowing a single source image to adapt to different requirements while preserving its central focus. While we don’t have such a feature yet, we do have SVG’s <a href="#">viewBox attribute</a><span class="linkpreview"> | |
| <span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/frame-2x.jpg" alt></span><span>Understanding the SVG viewBox</span></span>, which comes awfully close.</p> | |
| <p>While it is best known as a vector image format, SVG has supported bitmaps from its inception:</p> | |
| </article> |
A test prototype for a link preview feature on thenewcode.com: internal links show more info about the linked article to the side, on a sufficiently wide screen. In the final version, link preview code would be dynamically created with JavaScript.
A Pen by Dudley Storey on CodePen.
| @font-face { | |
| font-family: 'Libertad'; | |
| src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/libertad.woff2') format('woff2'); | |
| font-style: normal; | |
| font-weight: 400; | |
| } | |
| @font-face { | |
| font-family: 'Libertad'; | |
| src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/libertad-italic.woff2') format('woff2'); | |
| font-style: italic; | |
| font-weight: 400; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Libertad, Avenir, sans-serif; | |
| line-height: 1.6; | |
| color: rgba(0,0,0,0.8); | |
| margin-bottom: 4rem; | |
| } | |
| article { | |
| width: 90%; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| font-size: 1.3rem; | |
| } | |
| article p { | |
| position: relative; | |
| } | |
| .linkpreview { | |
| top: 0; | |
| opacity: 0; | |
| transition: .2s; | |
| position: absolute; | |
| left: 100%; | |
| min-height: 100%; | |
| width: 10rem; | |
| border-left: 6px solid #2F8BCA; | |
| margin-left: 2rem; | |
| font-style: italic; | |
| display: flex; | |
| flex-direction: column; | |
| font-size: 1rem; | |
| padding: 1rem; | |
| } | |
| .linkpreview img { | |
| border-radius: 50%; | |
| width: 80%; | |
| margin-bottom: 1rem; | |
| } | |
| article p a { | |
| color: currentColor; | |
| } | |
| .linkpreview img { | |
| width: 100%; | |
| } | |
| a[href="#"]:hover { | |
| color: #2F8BCA; | |
| } | |
| a:hover + .linkpreview { | |
| opacity: 1; | |
| } | |
| @media all and (max-width: 1100px) { | |
| .linkpreview { display: none; } | |
| } |