When gradients were first introduced we only had hex and rgb/rgba colors for monitors that only worked on the sRGB color space so the gradients would look the same in all monitors. With the introduction of the new color spaces in the CSS Color Level 4, and the way they work it is appropriate to ask the question: do all color spaces work the same with gradients Adam Argylehttps://twitter.com/argyleink created a comparison to test the look of linear gradients across the color spaces in the CSS Color level 4https://www.w3.org/TR/css-color-4/ and level 5https://www.w3.org/TR/css-color-5/ modules and supported by the underlying color.jshttps://colorjs.io library....
linear-gradient, radial-gradient, and conic-gradient don't automatically repeat color stops. However, there are functions taht do: - repeating-linear-gradient - repeating-radial-gradient - repeating-conic-gradient The size of the repeating gradient line or arc is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If you don't declare a value for either the first or last colors, the gradient line...
Conical gradients can do different things than linear gradients but, from my perspective, they are harder to work with or it may be I have a harder time reasoning through them. The conic gradients work with two or more colors and, at he most basic level work like linear gradients. Note that for these examples we've set a default border-radius of 50% so they'll appear in a circle. The first example shows the simplest conic gradient between two colors. Note how there is a third, purplish color at the bottom of the demo css .demo01 { background-image: conic-gradient red, blue...
Radial gradients radiate out from a central point that you control. The first example is a gradient between two colors. The default position for the gradient is 50% 50%, at the center of the containing block. Because we didn't specify dimensions for the color stops, the browser will use its default algorithm to create the gradient. css .demo01 { background: radial-gradient red, blue ; } The second demo shows a three color gradient placed at the default location of 50% 50%. css .demo02 { background: radial-gradient red, green, blue ; } There are two types of radial gradients: circular and...
In addition to dialogues, there is a new API to handle popovers, small blocks of text, natively in the browser. This post will explore the Popover API, what it does, how it works and provide examples of how to use it. Necessary context Before we jump into popovers we need to define a few terms. Top layer : The top layer, as the name implies is painted last as the top-most layer of content in the browser viewport, regardless of document order or z-index values. : By default, if multiple elements are positioned in the same location, the browser paints...
The web platform now provides ways to build dialogues without having to use third-party libraries. This post will cover dialogues and modal dialogues, the Javascript necessary to interact with the dialogues we create and some basic CSS. Basic Dialogue The HTML is simple. We first create a div with the content we want the user to see in the dialogue, including the dialogue's close button. If we don't put it inside the dialogue, it'll be impossible to close the modal dialogue via user action. We also add buttons to open the dialogue either as a normal dialogue or a modal...
The isolationhttps://developer.mozilla.org/en-US/docs/Web/CSS/isolation property provides a way for an element to create a stacking contexthttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSPositioning/Understandingzindex/Thestackingcontext without using any special technique to do so. Creating new stacking orders prevent an element from acquiring blend-modes from elements in the backdrop. The following example demonstrate how isolation works with mix-blend-modehttps://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode See the Pen isolation property test with background image by Carlos Araya @caraya on CodePen. In the example there are two elements with a magenta background. The only difference is the isolation declaration. The first box with class isolation-auto sets isolation to auto, the default value. This let's the background through, blending it with...
> "We will encourage you to develop the three great virtues of a programmer: laziness, impatience, and hubris." — Larry Wall, Programming Perl 1st edition, Oreilly And Associates Taken from: Laziness Impatience Hubrishttps://wiki.c2.com/?LazinessImpatienceHubris. This came in to my mind today as I finished a quick and dirty color conversion tool. All the new color spaces available in the new color level 4https://www.w3.org/TR/css-color-4/ and color level 5https://www.w3.org/TR/css-color-5/ specifications it makes it hard to keep all the different syntaxes in my head. So I wrote a little app that, given a color, will produce a color swatch for the seven syntaxes I'm...
To apply transforms to an element, use the CSS transform Property. The property accepts one or more s which get applied one after the other. css .target { transform: translateX50% rotate30deg scale1.2; } One issue with this is that, if we want to update one of the properties then we have to update all of them. For example, if we want to change scale to 1.5 we need the following: css .target:hover { transform: translateX50% rotate30deg scale2; } This is tedious and error-prone, particularly if you create many of these variations. Chrome 104, Edge 104, Firefox 72 and Safari 14.1...
After a while, I finally pulled the plug from Media Temple / Go Daddy and moved to a different host if you want to know why I moved, ping me on social media, won't discuss it in this post. I currently host smaller projects on Netlify and they are a good host but it's another server I have to worry about and I made publishing unnecessarily hard and I don't know how to change it. So I decided to consolidate everything into my domain. This post will document the process, both in the command line and an automated version using...
