Tag: Interesting

8 Interesting Typography Links for January 2022

Every now and then, I find that I’ve accumulated a bunch of links about various things I find interesting. Typography is one of those things! Here’s a list of typography links to other articles that I’ve been saving up and think are worth sharing.

A specimen of the Retail typeface, once of the typography links in the list.
An awesome new font from OH no Type Company

Do you have any interesting typography links from the past month worth sharing? Drop ’em in the comments!


8 Interesting Typography Links for January 2022 originally published on CSS-Tricks. You should get the newsletter and become a supporter.

CSS-Tricks

, , , ,

Using CSS Shapes for Interesting User Controls and Navigation

Straight across or down, that’s the proverbial order for user controls on a screen. Like a list of menu items. But what if we change that to a more fluid layout with bends, curves, and nooks? We can pull it off with just a few lines of code. In the age of modern minimalistic designs, curved layouts for the user controls add just the right amount of pep to a web design.

And coding them couldn’t be more easier, thanks to CSS Shapes.

CSS Shapes (notably, the shape-outside property) is a standard that assigns geometric shapes to float elements. The content then wraps around the floated element along the boundaries of those shapes.

The use cases for this standard are usually showcased as designs for textual, editorial content — where plain text flow along the shapes floating at their sides. However, in this post, in place of just plain text, we use user controls to see how these shapes can breathe some fluid silhouettes into their layouts.

For the first demo, here’s a design that can be used in product pages, where any product-related action controls can be aligned along the shape of the product itself.

<img src="bottle.png"> <div>   <input type="radio" name=blue checked> <br>   <input type="radio" name=blue> <br>   <input type="radio" name=blue> <br>   <input type="radio" name=blue> </div>
img {   height: 600px;   float: left;   shape-outside: url("bottle.png");   filter: brightness(1.5); } input {   -webkit-appearance: none;   appearance: none;   width: 25px;   height: 25px;   margin-left: 20px;   box-sizing: content-box;   border: 10px solid #231714;   border-radius: 50%;   background: linear-gradient(45deg, pink, beige);   cursor: pointer; }

The image of the bottle is floated left and given a shape boundary using the shape-outside property. The image itself is referenced for the shape.

Note: Only images with transparent backgrounds can produce shapes according to the silhouettes of the images.

The default style of the radio buttons is replaced with a custom style. Once the browser applies the shape to the floated image, the radio buttons automatically align themselves along the shape of the bottle.

Like this, we don’t have to bother with individually assigning positions for each radio button to create such a design. Any buttons later added will automatically be aligned with the buttons before them according to the shape of the bottle.

Here’s another example, inspired by the Wikipedia homepage. This is a perfect example of the sort of unconventional main menu layouts we’re looking at.

Screenshot of the Wikipedia home page, displaying the site logo above a world globe made out of puzzle pieces. Links to various languages float around the globe's edge, like English, Spanish, German, in blue. Each link has a light grey count of how many articles are available in each language.

It’s not too crazy to make with shape-outside:

<div>   <img src="earth.png">   <div class=l>     <a href="#">Formation</a><br>     <a href="#">Atmosphere</a><br>     <a href="#">Heat</a><br>     <a href="#">Gravitation</a>   </div> </div> <div>   <img src="earth.png">   <div class=r>     <a href="#">Moon</a><br>     <a href="#">Climate</a><br>     <a href="#">Rotation</a><br>     <a href="#">Orbit</a>   </div> </div>
img {   height: 250px;   float: left;   shape-outside: circle(40%); }  /* stack both sets of menus on the same grid cell */ main > div { grid-area: 1/1; }   /* one set of menus is flipped and moved sideways over the other */ .r { transform: rotatey(180deg) translatex(250px); }  /* links inside the flipped set of menus are rotated back */ .r > a {    display: inline-block;    transform: rotateY(180deg) translateX(-40px);  }  /* hide one of the images */ main > div:nth-of-type(2) img { visibility: hidden; }

An element only ever floats left or right. There’s no center floating element where content wraps around both the sides. In order to achieve the design where links wrap on both the sides of the image, I made two sets of links and flipped one of the sets horizontally. I used the same image with a circle() CSS shape value in both the sets so the shapes match even after the rotation. The text of the links of the flipped set will appear upside down sideways, so it’s rotated back.

Although both the images can sit on top of each other with no visible overflow, it’s best to hide one of them with either opacity or visibility property.

The third example is a bit lively thanks to the use of one of the dynamic HTML elements, <details>. This demo is a good example for designs to show extra information on products and such which by default are hidden to the users.

<img src="diamond.png"> <details>   <summary>Click to know more!</summary>   <ul>     <li>The diamond is now known as the Sancy     <li>It comprises two back-to-back crowns     <li>It's likely of Indian origin   </ul> </details>
img {   height: 200px;   float: left;   shape-outside: url("diamond.png");   shape-margin: 20px; } summary {   background: red;   color: white;   cursor: pointer;   font-weight: bold;   width: 80%;    height: 30px;   line-height: 30px; }

The image is floated left and is given a CSS shape that’s same as the image. The shape-margin property adds margin space around the shape assigned to the floated element. When the <summary> element is clicked, the parent <details> element reveals its content that automatically wraps along the shape of the floated diamond image.

The content of the <details> element doesn’t necessarily have to be a list, like in the demo. Any inline content would wrap along the floated image’s shape.

The final example works with a polygon shape instead of images or simple shapes like circle and ellipse. Polygons give us more angular geometric shapes that can easily be bent by adding just another coordinate in the shape.

<img src="nasa.png"> <div><!-- triangle --></div> <ul>   <li><a href="#">Home</a>   <li><a href="#">Projects</a>   <li><a href="#">Shop</a>   <li><a href="#">Contact</a>   <li><a href="#">Media</a> </ul>
div {   width: 0;   height: 0;   --d:  200px;   /* red triangle */   border-right: var(--d) solid transparent;   border-bottom: var(--d) solid transparent;   border-left: var(--d) solid red;   float: left;   /* triangle CSS shape */   shape-outside: polygon(0 0, var(--d) 0, 0 var(--d)); } ul {   list-style: none;   padding-top: 25px; }

A left-floated red triangle is created using border properties. To create a triangular CSS shape that matches the red triangle, we’re using the polygon function as a value for the shape-outside property. The value for the polygon() function is the three coordinates of the triangle, separated by commas. The links automatically align around the floated triangle, forming a slanted menu layout down the triangle’s hypotenuse.

As you can see, even for a simple diagonal layout of user controls, CSS Shapes do a nice job adding a little pizzazz to a design. Using CSS Shapes is a much better option than rotating a line of user controls — the alignment of the individual controls and text also rotate, creating layout weirdness. By contrast, a CSS Shape simply lays out the individual controls along the provided shape’s boundary.


The post Using CSS Shapes for Interesting User Controls and Navigation appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , , , ,
[Top]

How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji

Let’s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is to give the charts a shapely makeover 🪄

I’ll show you how to create charts with interesting shapes using glyphs, CSS shapes, and emojis with minimal effort.

Let’s start with a simple example.

Using glyphs

<div id="chart">   <div id="chart-shape">⬠</div>   <div id="chart-value"></div>  </div>
#chart {   width: 300px;    height: 300px;   display: grid;   background: white; } #chart * {   height: inherit;   grid-area: 1 / 1; }

We first give the chart some dimensions and stack the two div inside it by assigning them to the same grid cell. They can be stacked up using any other way, too — with position property, for instance.

Look at the HTML above one more time. One of the divs has a pentagon symbol — the chart shape we want. I added that symbol using the “Emoji and Symbols” keyboard, though it can also be done with the HTML entity value for pentagon, &#x2B20;, inside the div.

The div with the symbol is then styled with CSS font properties as well as a desired chart color. It’s large enough and centered.

#chart-shape {   font: 300px/300px serif;   text-align: center;    color: limegreen; }

To the second div in the HTML contains a conic gradient background image. The percentage of the gradient represents the visual value of the chart. The same div also has mix-blend-mode: screen;.

#chart-value {   background: conic-gradient(transparent 75%, darkseagreen 75%);   mix-blend-mode: screen; }

The mix-blend-mode property blends colors inside an element with its backdrop. The screen blend mode value causes a lighter blend to come through. A lighter green shows through the portion where the darkseagreen colored part of the conic gradient overlaps with the limegreen colored pentagram, while the rest of the darskseagreen gradient disappears against the white backdrop of the chart.

An alternative to adding the chart shape in the HTML is to add it as another background layer in CSS and use background-blend-mode instead of mix-blend-mode. However, the code for a chart shape inside the CSS can be less legible for a quick glance. So it’s up to you to see where it’ll be easier for you to add the chart shape in: HTML or CSS. You’ve both options.

#chart {   width: 300px;    height: 300px;   background:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><div xmlns='http://www.w3.org/1999/xhtml' style='font:300px/300px serif;color:limegreen;text-align: center;background:white'>⬠</div></foreignObject></svg>"),   conic-gradient(transparent 75%, darkseagreen 75%);   background-blend-mode: screen; }

The pentagon symbol is added as a background image in addition to the conic gradient. Then, finally, the property-value pair background-blend-mode: screen; kicks in and the result looks same as the previous demo.

The pentagon background image is created by embedding the HTML with the pentagon symbol () into an SVG that is embedded into a data URL.

<!-- Unwrapped SVG code from the Data URL --> <svg xmlns='http://www.w3.org/2000/svg'>   <foreignObject width='300px' height='100%'>     <div xmlns='http://www.w3.org/1999/xhtml'           style='           font:300px/300px serif;           color:limegreen;           text-align: center;           background:white;'>           ⬠     </div>   </foreignObject> </svg>

Which becomes this in CSS:

background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><div xmlns='http://www.w3.org/1999/xhtml' style='font:300px/300px serif;color:limegreen;text-align: center;background:white'>⬠</div></foreignObject></svg>");

Using CSS shapes

Next, let’s use CSS shapes in place of symbols. CSS shapes are primarily created with the use of border properties. We have a collection of CSS shapes in our archive for your reference.

Here’s a set of properties that can create a simple triangle shape in an element we’ll later add to the SVG, replacing the symbol:

border: 150px solid white;  border-bottom: 300px solid lime;  border-top: unset;

When combined with the conic gradient and the background blend, the result is:

<div id="chart"></div>
#chart {   width: 300px;   height: 300px;   background:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><html xmlns='http://www.w3.org/1999/xhtml'><div style='border:150px solid white; border-bottom:300px solid lime; border-top:unset'></div><div style='border:150px solid transparent; border-bottom:300px solid white; border-top:unset; transform:scale(0.8) translateY(-360px);'></div></html></foreignObject></svg>"),   conic-gradient(transparent 75%, darkseagreen 75%);   background-blend-mode: screen; }

To restrict the design to the border, a smaller white triangle was added to the design.

<!-- Unwrapped SVG code from the Data URL --> <svg xmlns='http://www.w3.org/2000/svg'>   <foreignObject width='300px' height='100%'>    <html xmlns='http://www.w3.org/1999/xhtml'>     /* green triangle */     <div style='          border: 150px solid white;           border-bottom: 300px solid lime;           border-top: unset'></div>     /* smaller white triangle */     <div style='          border: 150px solid transparent;           border-bottom: 300px solid white;           border-top: unset;           transform: scale(0.8) translateY(-360px);'></div>    </html>   </foreignObject> </svg>

Which, again, becomes this in CSS:

background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><html xmlns='http://www.w3.org/1999/xhtml'><div style='border:150px solid white; border-bottom:300px solid lime; border-top:unset'></div><div style='border:150px solid transparent; border-bottom:300px solid white; border-top:unset; transform:scale(0.8) translateY(-360px);'></div></html></foreignObject></svg>");

Using emojis

Will emojis work with this approach to charts? You bet it will! 🥳

A block-colored emoji is fed into the SVG image the same way the HTML symbols are. The block color of the emoji is created by giving it a transparent color value, followed by adding a desired color as text-shadow. I covered this technique in another post.

<div id="chart"></div>
#chart {   width: 300px;    height: 300px;   background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='300px'><body style='margin:0;text-align:center;color:transparent;' xmlns='http://www.w3.org/1999/xhtml'><div style='text-shadow: 0 0 limegreen;font:200px/300px serif;background:white;'>🍏</div><div style='text-shadow:0 0 white;font:170px/300px serif;position:relative;top:-300px;'>🍏</div></body></foreignObject></svg>"),   conic-gradient(transparent 64%, darkseagreen 64%);   background-blend-mode: screen; }

Just as with the last demo, a smaller white apple shape is added at the center to create the border design.

<!-- Unwrapped SVG code from the Data URL --> <svg xmlns='http://www.w3.org/2000/svg'>   <foreignObject width='300px' height='300px'>     <body xmlns='http://www.w3.org/1999/xhtml' style='           margin: 0;           text-align: center;           color:transparent;'>        /* green apple shape */        <div style='             text-shadow: 0 0 limegreen;              font-size: 200px;              background: white;'>🍏</div>        /* smaller white apple shape */        <div style='             text-shadow:0 0 white;              font-size: 170px;              position: relative;              top: -300px;'>🍏</div>     </body>   </foreignObject> </svg>

I added the two divs inside the <body> element so the repeating style properties of the divs are declared only once in the body element. The divs will then automatically inherit those properties.

Chris had the idea to animate the conic gradient — its percent value to be specific — using the CSS @property (supported in Chrome at the time of writing this article), and it just has the most beautiful effect on the design. @property is a CSS at-rule that explicitly defines a custom CSS property. In supported browsers, when a custom property is defined using @property it can be animated.

@property --n {   syntax: '<percentage>';   inherits: true;   initial-value: 30%; } #chart {   width: 300px;    height: 300px;   --n: 30%;  /*declaration for browsers with no @property support */   background:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='300px'><body style='margin:0;text-align:center;color:transparent;' xmlns='http://www.w3.org/1999/xhtml'><div style='text-shadow: 0 0 limegreen;font:200px/300px serif;background:white;'>🍏</div><div style='text-shadow:0 0 white;font:170px/300px serif;position:relative;top:-300px;'>🍏</div></body></foreignObject></svg>"),     conic-gradient(transparent var(--n), darkseagreen var(--n));   background-blend-mode: screen;   transition: --n 2s ease-in-out	 } #chart:hover { --n: 70%; }

The chart above will change its value on hover. In Chrome, the change will look animated.

And although it won’t be as smooth as CSS animation, you can also try animating the gradient using JavaScript. The following JavaScript will cause a somewhat similar animating effect as the above when the cursor moves over the chart.

const chart = document.querySelector('#chart') chart.onpointerover = ()=>{   var i = 30,       timer = setInterval(()=> {         if (i < 70)           chart.style.setProperty('--n', i++ + '%')         else clearInterval(timer)       }, 10) } chart.onpointerout = ()=>{   var i = 70,       timer = setInterval(()=> {         if (i >= 30)            chart.style.setProperty('--n', i-- + '%')         else clearInterval(timer)       }, 10) }

When trying your own designs, keep in mind how the different blend modes work. I used the screen blend mode in all my demos just to keep things simple. But with different blend modes, and different backdrop colors, you’ll get varying results. So, I recommend going deeper into blend modes if you haven’t already.

Also, if you want to exclude an element’s color from the final result, try isolation: isolate; on the element — the browser will ignore that backdrop color when applying the blend.

And even though there are all kinds of unusual and quirky shapes we can use in any wild colors we want, always be mindful of the legibility by making the chart value large and clear enough to read.


The post How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , , , ,
[Top]

Using for Menus and Dialogs is an Interesting Idea

One of the most empowering things you can learn as a new front-end developer who is starting to learn JavaScript is to change classes. If you can change classes, you can use your CSS skills to control a lot on a page. Toggle a class to one thing, style it this way, toggle to another class (or remove it) and style it another way.

But there is an HTML element that also does toggles! <details>! For example, it’s definitely the quickest way to build an accordion UI.

Extending that toggle-based thinking, what is a user menu if not for a single accordion? Same with modals. If we went that route, we could make JavaScript optional on those dynamic things. That’s exactly what GitHub did with their menu.

Inside the <details> element, GitHub uses some Web Components (that do require JavaScript) to do some bonus stuff, but they aren’t required for basic menu functionality. That means the menu is resilient and instantly interactive when the page is rendered.

Mu-An Chiou, a web systems engineer at GitHub who spearheaded this, has a presentation all about this!

The worst strike on <details> is its browser support in Edge, but I guess we won’t have to worry about that soon, as Edge will be using Chromium… soon? Does anyone know?

The post Using <details> for Menus and Dialogs is an Interesting Idea appeared first on CSS-Tricks.

CSS-Tricks

, , , ,
[Top]