I'm not very partial to working with colors in general and with gradients in particular. They used to only be available when working with SVG and not CSS. At some point we gained the ability to work with gradients in CSS and, more recently, it became possible to work with multiple kinds of gradients. This post will dive into linear gradients, the ones that I use most often on web content. What is a gradient? Gradients are images that show a transition between two or more colors. These transitions are shown as either linear, radial, or radial. Gradients can be...
Using fonts on the web has a longer story than many would think. The @font-face at-rule has been around since the early days of the web. Initially, there were no fonts on the web... the goal was to share documents, not to produce the polished documents that we see today. In the beginning, web browsers relied on locally installed fonts both for performance the modems of the time would take forever to download a font. We could use any of the pre-defined fonts: Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS...
CSS Fonts Level 4 introduces support for color fontshttps://www.w3.org/TR/css-fonts-4/color-font-support. The idea is that these fonts will be less resource-intensive because they will make fewer round trips to the server to manipulate the colors available to display the font. In theory there are no browsers that currently support this defining a custom palette for color fonts look like this: The @font-paletter-values at-rule The name of the palette we are creating The font family that the palette is associated with The base palette that we're overriding A list of one or more override colors css @font-palette-values Cooler { font-family: Bradley; base-palette: 1;...
JSON Schemashttps://json-schema.org/ allows us to create a schema for JSON data. This would allow us to validate the data and ensure that it is complete and has the correct structure. This would also address one of the drawbacks of NoSQL and, potentially, XML databases: how to ensure that the data is complete, meaning that all records contain the same data. We'll build a schema for interview-like content for a JSON document that we'll later convert to XML. The content for the interview object This is a complete JSON document that matches the schema. I cheated a little with the document...
Part of my love/hate relationship with Rails is that I think it is too opinionated for its own good. It makes it easier for people to write apps if you accept the opinions that DHH and the Rails community have baked into the platform over the years. Don't make me think, or why I switched to Rails from JavaScript SPAshttps://reviewbunny.app/blog/dont-make-me-think-or-why-i-switched-to-rails-from-javascript-spas makes a comparison between Javascript and the need to manually select the tools and technologies that we use in our projects in contrast to Rails and its "convention over configuration" approach. It made me think about the two opposite sides...
I've always liked shadows as a way to give depth to content that would otherwise be flat and uninspiring. My first approach at creating shadows in CSS was to use box-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow, primarily in title boxes where the entire container would have a shadow and not the individual laters. text-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow does the same thing for text that box-shadow does for boxes. As presented in the example below, the four values for the text-shadow property are: offset-x offset-y blur-radius color css h1 { color: rebeccapurple; font-size: 160px; text-shadow: 8px 4px 2px darkgrey; } Shadows are a nice way to provide depth to...
In replaced elementshttps://developer.mozilla.org/en-US/docs/Web/CSS/Replacedelement, aspect ratiohttps://en.wikipedia.org/wiki/Aspectratioimage is the ratio of the width to the height of an image. Until recently we had to rely on the browser's calculations of "implicit" aspect ratios. Over time this was ok and worked well, the jump of text wasn't as bad as it is today or the images loaded fast enough so it wouldn't be a problem. Over time browsers implemented a more accurate way of calculating the aspect ratio. This would prevent jank and content shifting by setting the dimensions of the image before it is loaded. css img, inputtype="image", video, embed, iframe, marquee,...
The :any-linkhttps://developer.mozilla.org/en-US/docs/Web/CSS/:any-link styles all a elements with an href attribute. This allows us to target all links in a document, regardless of location or parents. This is particularly useful when playing with text-decoration- attributes. Safari uses the -webkit- prefix for these properties so we need to duplicate work to ensure that the links display the same across browsers. css :any-link { border: 1px solid blue; color: orange; } / WebKit browsers / :-webkit-any-link { border: 1px solid blue; color: orange; } We can also add link pseudo-elements like :hover and :visited to the :any-link selector. css :any-link { border: 1px...
CSS provides ways to play with the underline of elements beyond removing the underline from links and only showing it on hover. CSS Text Decoration Module Level 4https://drafts.csswg.org/css-text-decor-4/ provides four longhand properties one shorthand property for underlining text. This post will cover the text-decoration- properties and some adjacent properties: The text-decoration-skip- properties text-underline-position text-underline-offset We will also discuss When to Avoid the text-decoration Shorthand Propertyhttps://css-tricks.com/when-to-avoid-css-text-decoration-shorthand/. Using the shorthand property is nice as it saves typing but it's not always the best option. The post explains when and why it may be a good idea to use the longhand properties. text-decoration-\:...
One very frustrating thing when working with images on the web is when you're trying to fit an image into a container. If the image has different dimensions and aspect ratio than the container, the image will be resized to fit, losing potentially important portions of the image or stretching it to the point it becomes blurry and hard to find the details on it. This post will discuss three attributes that may help solve this type of problem: object-fit, background-size and aspect-ratio. Background Before we start there are a couple of background items to talk about. Replaced Elements In...
