I've been become more comfortable playing with CSS features that are beyond just making sure that typography works well in all form factors. Rotate On Hover One of the things that I like is the subtle and fun rotation that Smashing Magazine does with the author's photo when you first visit an article and how it moves to a fully vertical position when you hover over the image. I've always thought that that's backward and that it should move to the diagonal position when you hover over the image… so let's try to do it that way. The default state...
I was working on typesetting poems when I thought what it would take to center a piece of content both vertically and horizontally? For image and smaller blocks of text like poems, I choose to work with flexboxhttps://www.w3.org/TR/css-flexbox-1/ as it provides, in my opinion, the simplest way to center content on both axes without scripting. The code looks like this: css .container { height: 100vh; display: flex; flex-flow: column; justify-content: center; align-items: center; } Some caveats: - You must set an explicit height for the container, in this case, 100vh. Otherwise, there is no height to center to - Because...
As I was working on my last post about paged media I discovered one thing we can do to make footnotes for the web a little more user-friendly. Paged Media has a way to hide the text of the footnote from being displayed on the page... wouldn't it be nice to do that with web content as well without having to change the document we're working with? CSS on its own will take you part of the way there... so let's explore how can Javascript help. What we want to accomplish: 1. Hide all the elements with class footnotes 2....
One thing that the web is sorely lacking is the ability to create print-ready content from our web pages. CSS provides specifications for paged media but the support in browsers leaves a lot to be desired, forcing people into tools that accomplish the goals of creating high-quality print content. In many instances, I will cut pieces of the code where they are not relevant. You can find the full stylesheet along with the resulting PDF from the Github Repohttps://github.com/caraya/new-paged-media One thing we need to remember is that for this particular project we're doing everything in the command line so download...
One of the most frustrating things that happen when I print a web page is that all links appear as underlined text without any reference to what the links point out to. One way to solve the problem without Javascript is to use generated content to append the full URL to the link and use print specific stylesheets so that it'll only happen when we print the document. Dudley Storey provides another way to accomplish the same goal using Javascripthttp://thenewcode.com/1186/Better-Links-for-Printed-Web-Pages-with-JavaScript. It doesn't require an additional stylesheet but, depending on the length of the document, may be hard to move back...
It's been possible to work in multiple columns of text without having to resort to hacks to make columns work in multiple browsers and in multiple form factors. According to caniuse.com developers need to pay attention to the following caveats: - Firefox doesn't support the break-before, break-after, break-inside properties but supports the page-break-\ properties to accomplish the same result. - WebKit-based based browsers support the non-standard -webkit-column-break-\ properties to accomplish the same result but only the auto and always values - Before Chrome 63, the browser supports the non-standard -webkit-column-break-\ properties to accomplish the same result but only the auto...
Design systems are interesting because of how they scale design to multiple teams and multiple sites/products while still providing a consistent and recognizable brand. For a full introduction to design systems, see Introducing Design Systemshttps://www.designbetter.co/design-systems-handbook/introducing-design-systems The work I do is not always conducive to creating a design system but it's always good to know about them so we can jump in without having to start completely from scratch. That said we'll look at three areas: - Building a basic component using just HTML, and CSS - Building the same component using existing design systems - Material Design from Google -...
I've always wanted to avoid manually doing data replacement and numbering if I can avoid it. We'll add counters for the following: - Chapters defined by elements - Sections defined by elements - Figures will be tied to chapters - Tables will be tied to chapters We'll work with the headings first and then add whatever we need to so that figures and tables work as designed. Chapters, sections, and subsection The basic structure of the styles is the same: If needed we reset counters using counter-reset and increase the appropriate counters using counter-increment. We then use the ::before pseudo-element...
3D content is a really interesting way to create interactive content for the web but until recently it has been a pain to develop on a Mac, particularly since most device makers decided early on that Macintosh hardware wasn't powerful enough to work with their devices see, this post from 2015https://www.oculus.com/blog/powering-the-rift/ outlining the minimal hardware support level and, partly, why it won't work with Apple hardware and, though things seem to be getting better with newer Apple hardware releases, I'm not holding my breath and neither is Macworld UKhttps://www.macworld.co.uk/feature/mac/can-you-use-oculus-rift-with-mac-3634238/. While direct development with the Oculus SDK is out of the...
Dropcaps have always been a pain in terms of implementation and cross-browser support. Perhaps you've seen something like this in CSS style sheets before: css p::first-letter { color: FE742F; float: left; font-size: 5em; margin: 0 .2em 0 0; } This will create a 5em first letter for paragraph elements. Which is good if you only have one paragraph worth of text but, as this codepenhttps://codepen.io/caraya/pen/WaGyqN illustrates, longer text gets more drop caps than intended. There is a pseudo-selector that will help with this. first-of-type selects the first child of the chosen type inside its parent. So, for our drop cap...
