A CSS-Only Star Rating Component and More! (Part 1) - Related to transitions, toe, embeddings, a, into

A CSS-Only Star Rating Component and More! (Part 1)

Creating a star rating component is a classic exercise in web development. It has been done and re-done many times using different techniques. We usually need a small amount of JavaScript to pull it together, but what about a CSS-only implementation? Yes, it is possible!

Cool, right? In addition to being CSS-only, the HTML code is nothing but a single element:

An input range element is the perfect candidate here since it allows a user to select a numeric value between two boundaries (the min and max ). Our goal is to style that native element and transform it into a star rating component without additional markup or any script! We will also create more components at the end, so follow along.

Note: This article will only focus on the CSS part. While I try my best to consider UI, UX, and accessibility aspects, my component is not perfect. It may have some drawbacks (bugs, accessibility issues, etc), so please use it with caution.

You probably know it but styling native elements such as inputs is a bit tricky due to all the default browser styles and also the different internal structures. If, for example, you inspect the code of an input range you will see a different HTML between Chrome (or Safari, or Edge) and Firefox.

Luckily, we have some common parts that I will rely on. I will target two different elements: the main element (the input itself) and the thumb element (the one you slide with your mouse to revision the value).

input[type="range"] { /* styling the main element */ } input[type="range" i]::-webkit-slider-thumb { /* styling the thumb for Chrome, Safari and Edge */ } input[type="range"]::-moz-range-thumb { /* styling the thumb for Firefox */ }.

The only drawback is that we need to repeat the styles of the thumb element twice. Don’t try to do the following:

input[type="range" i]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb { /* styling the thumb */ }.

This doesn’t work because the whole selector is invalid. Chrome & Co. don’t understand the ::-moz-* part and Firefox doesn’t understand the ::-webkit-* part. For the sake of simplicity, I will use the following selector for this article:

input[type="range"]::thumb { /* styling the thumb */ }.

But the demo contains the real selectors with the duplicated styles. Enough introduction, let’s start coding!

Styling the main element (the star shape).

input[type="range"] { --s: 100px; /* control the size*/ height: var(--s); aspect-ratio: 5; appearance: none; /* remove the default browser styles */ }.

If we consider that each star is placed within a square area, then for a 5-star rating we need a width equal to five times the height, hence the use of aspect-ratio: 5 .

That 5 value is also the value defined as the max attribute for the input element.

So, we can rely on the newly enhanced attr() function (Chrome-only at the moment) to read that value instead of manually defining it!

input[type="range"] { --s: 100px; /* control the size*/ height: var(--s); aspect-ratio: attr(max type()); appearance: none; /* remove the default browser styles */ }.

Now you can control the number of stars by simply adjusting the max attribute. This is great because the max attribute is also used by the browser internally, so updating that value will control our implementation as well as the browser’s behavior.

This enhanced version of attr() is only available in Chrome for now so all my demos will contain a fallback to help with unsupported browsers.

The next step is to use a CSS mask to create the stars. We need the shape to repeat five times (or more depending on the max value) so the mask size should be equal to var(--s) var(--s) or var(--s) 100% or simply var(--s) since by default the height will be equal to 100% .

input[type="range"] { --s: 100px; /* control the size*/ height: var(--s); aspect-ratio: attr(max type()); appearance: none; /* remove the default browser styles */ mask-image: /* ... */; mask-size: var(--s); }.

What about the mask-image property you might ask? I think it’s no surprise that I tell you it will require a few gradients, but it could also be SVG instead. This article is about creating a star-rating component but I would like to keep the star part kind of generic so you can easily replace it with any shape you want. That’s why I say “and more” in the title of this post. We will see later how using the same code structure we can get a variety of different variations.

Here is a demo showing two different implementations for the star. One is using gradients and the other is using an SVG.

In this case, the SVG implementation looks cleaner and the code is also shorter but keep both approaches in your back pocket because a gradient implementation can do a advanced job in some situations.

The good thing is that the thumb is always within the area of a given star for all the values (from min to max ), but the position is different for each star. It would be good if the position is always the same, regardless of the value. Ideally, the thumb should always be at the center of the stars for consistency.

Here is a figure to illustrate the position and how to modification it.

The lines are the position of the thumb for each value. On the left, we have the default positions where the thumb goes from the left edge to the right edge of the main element. On the right, if we restrict the position of the thumb to a smaller area by adding some spaces on the sides, we get much improved alignment. That space is equal to half the size of one star, or var(--s)/2 . We can use padding for this:

input[type="range"] { --s: 100px; /* control the size */ height: var(--s); aspect-ratio: attr(max type()); padding-inline: calc(var(--s) / 2); box-sizing: border-box; appearance: none; /* remove the default browser styles */ mask-image: ...; mask-size: var(--s); }.

It’s more effective but not perfect because I am not accounting for the thumb size, which means we don’t have true centering. It’s not an issue because I will make the size of the thumb very small with a width equal to 1px .

input[type="range"]::thumb { width: 1px; height: var(--s); appearance: none; /* remove the default browser styles */ }.

The thumb is now a thin line placed at the center of the stars. I am using a red color to highlight the position but in reality, I don’t need any color because it will be transparent.

You may think we are still far from the final result but we are almost done! One property is missing to complete the puzzle: border-image .

The border-image property allows us to draw decorations outside an element thanks to its outset feature. For this reason, I made the thumb small and transparent. The coloration will be done using border-image . I will use a gradient with two solid colors as the source:

linear-gradient(90deg, gold 50%, grey 0);

border-image: linear-gradient(90deg, gold 50%, grey 0) fill 0 // 0 100px;

The above means that we extend the area of the border-image from each side of the element by 100px and the gradient will fill that area. In other words, each color of the gradient will cover half of that area, which is 100px .

Now instead of 100px let’s use a very big value:

We are getting close! The coloration is filling all the stars but we don’t want it to be in the middle but rather across the entire selected star. For this, we revision the gradient a bit and instead of using 50% , we use 50% + var(--s)/2 . We add an offset equal to half the width of a star which means the first color will take more space and our star rating component is perfect!

We can still optimize the code a little where instead of defining a height for the thumb, we keep it 0 and we consider the vertical outset of border-image to spread the coloration.

input[type="range"]::thumb{ width: 1px; border-image: linear-gradient(90deg, gold calc(50% + var(--s) / 2), grey 0) fill 0 // var(--s) 500px; appearance: none; }.

We can also write the gradient differently using a conic gradient instead:

input[type="range"]::thumb{ width: 1px; border-image: conic-gradient(at calc(50% + var(--s) / 2), grey 50%, gold 0) fill 0 // var(--s) 500px; appearance: none; }.

I know that the syntax of border-image is not easy to grasp and I went a bit fast with the explanation. But I have a very detailed article over at Smashing Magazine where I dissect that property with a lot of examples that I invite you to read for a deeper dive into how the property works.

input[type="range"] { --s: 100px; /* control the size*/ height: var(--s); aspect-ratio: attr(max type()); padding-inline: calc(var(--s) / 2); box-sizing: border-box; appearance: none; mask-image: /* ... */; /* either an SVG or gradients */ mask-size: var(--s); } input[type="range"]::thumb { width: 1px; border-image: conic-gradient(at calc(50% + var(--s) / 2), grey 50%, gold 0) fill 0//var(--s) 500px; appearance: none; }.

That’s all! A few lines of CSS code and we have a nice rating star component!

What about having a granularity of half a star as a rating? It’s something common and we can do it with the previous code by making a few adjustments.

First, we upgrade the input element to increment in half step s instead of full steps:

By default, the step is equal to 1 but we can upgrade it to .5 (or any value) then we upgrade the min value to .5 as well. On the CSS side, we change the padding from var(--s)/2 to var(--s)/4 , and we do the same for the offset inside the gradient.

input[type="range"] { --s: 100px; /* control the size*/ height: var(--s); aspect-ratio: attr(max type()); padding-inline: calc(var(--s) / 4); box-sizing: border-box; appearance: none; mask-image: ...; /* either SVG or gradients */ mask-size: var(--s); } input[type="range"]::thumb{ width: 1px; border-image: conic-gradient(at calc(50% + var(--s) / 4),grey 50%, gold 0) fill 0 // var(--s) 500px; appearance: none; }.

The difference between the two implementations is a factor of one-half which is also the step value. That means we can use attr() and create a generic code that works for both cases.

input[type="range"] { --s: 100px; /* control the size*/ --_s: calc(attr(step type(),1) * var(--s) / 2); height: var(--s); aspect-ratio: attr(max type()); padding-inline: var(--_s); box-sizing: border-box; appearance: none; mask-image: ...; /* either an SVG or gradients */ mask-size: var(--s); } input[type="range"]::thumb{ width: 1px; border-image: conic-gradient(at calc(50% + var(--_s)),gold 50%,grey 0) fill 0//var(--s) 500px; appearance: none; }.

Here is a demo where modifying the step is all that you need to do to control the granularity. Don’t forget that you can also control the number of stars using the max attribute.

As you may know, we can adjust the value of an input range slider using a keyboard, so we can control the rating using the keyboard as well. That’s a good thing but there is a caveat. Due to the use of the mask property, we no longer have the default outline that indicates keyboard focus which is an accessibility concern for those who rely on keyboard input.

For a superior user experience and to make the component more accessible, it’s good to display an outline on focus. The easiest solution is to add an extra wrapper:

That will have an outline when the input inside has focus:

span:has(:focus-visible) { outline: 2px solid; }.

Try to use your keyboard in the below example to adjust both ratings:

Another idea is to consider a more complex mask configuration that keeps a small area around the element visible to show the outline:

mask: /* ... */ 0/var(--s), conic-gradient(from 90deg at 2px 2px,#0000 25%,#000 0) 0 0/calc(100% - 2px) calc(100% - 2px);

I prefer using this last method because it maintains the single-element implementation but maybe your HTML structure allows you to add focus on an upper element and you can keep the mask configuration simple. It totally depends!

As I presented earlier, what we are making is more than a star rating component. You can easily modification the mask value to use any shape you want.

Here is an example where I am using an SVG of a heart instead of a star.

This time I am using a PNG image as a mask. If you are not comfortable using SVG or gradients you can use a transparent image instead. As long as you have an SVG, a PNG, or gradients, there is no limit on what you can do with this as far as shapes go.

We can go even further into the customization and create a volume control component like below:

I am not repeating a specific shape in that last example, but am using a complex mask configuration to create a signal shape.

We started with a star rating component and ended with a bunch of cool examples. The title could have been “How to style an input range element” because this is what we did. We upgraded a native component without any script or extra markup, and with only a few lines of CSS.

What about you? Can you think about another fancy component using the same code structure? Share your example in the comment section!

Modern web development often involves multiple JavaScript files, dependencies from npm, and the need for efficient perform......

Google Cloud organise Build with Gemini, une journée immersive dédiée aux développeurs, pour explorer les dernières avancées en matière d’IA et de Clo......

The TC39 committee, which oversees JavaScript standards, advanced three JavaScript proposals to Stage 4 at its February meeting. Evolving to stage fou......

Exploring Embeddings API With Java and Spring AI

This is my second article in a series of introductions to Spring AI. You may find the first one, where I explained how to generate images using Spring AI and OpenAI DALL-E 3 models, here. Today, we will create simple applications using embeddings API and Spring AI.

In this article, I’ll skip the explanation of some basic Spring concepts like bean management, starters, etc, as the main goal of this article is to discover Spring AI capabilities. For the same reason, I’ll not create detailed instructions on generating the OpenAI API Key. In case you don’t have one, follow the links in Step 0, which should give you enough context on how to create one.

The code I will share in this article will also be available in the GitHub repo. You may find this repo useful because to make this article shorter, I’ll not paste here some precalculated values and simple POJOs.

Before we start code implementation, let's discuss what embeddings are.

In the Spring AI documentation, we can find the following definition of embeddings:

Embeddings are numerical representations of text, images, or videos that capture relationships between inputs.

Embeddings convert text, images, and video into arrays of floating-point numbers called vectors. These vectors are designed to capture the meaning of the text, images, and videos. The length of the embedding array is called the vector’s dimensionality.

Numerical representation of text (also applicable for images and videos, but let’s focus just on texts in this article) Embeddings are vectors. And as every vector has coordinates for each dimension it exists, we should think about embeddings as a coordinate of our input in “Text Universe”.

As with every other vector, we can find the distance between two embeddings. The closer the two embeddings are to each other, the more similar their context. We will use this approach in our application.

Determining the Scope of Our Future Application.

Let’s imagine that we have an online shop with different electronics. Every single item has its ID and description. We need to create a module that will receive customers' input describing the item the user wants to find or buy and return five of the most relevant products to this query.

We will achieve this goal using embeddings. The following are steps we need to implement:

We will fetch embeddings (vector representation) of our existing products and store them. I’ll not show this step in this article, because it will be similar to one we will explore later. But you can find precalculated embeddings to use in your code in the GitHub repo I previously shared. We will call the embeddings API for each user input. We will be comparing user input embeddings with precalculated embeddings of our item description. We will leverage the Cosine Similarity approach to find the closest vectors.

If you don’t have an active OpenAI API key, do the following steps:

Create an account on the OpenAI signup page Generate the token on the API Keys page.

To quickly generate a project template with all necessary dependencies, one may use [website].

In my example, I’ll be using Java 17 and Spring Boot [website] Also, we need to include the following dependency:

This dependency provides us with smooth integration with OpenAI just by writing a couple lines of code and a few lines of configurations.

XML [website] spring-ai-openai-spring-boot-starter [website] spring-ai-bom [website] pom import.

At the moment of writing this article, Spring AI version [website] has not yet been . That’s why we need to add a link to that repo in our [website] as well:

XML spring-milestones Spring Milestones [website] false.

As a next step, we need to configure our property file. By default, Spring uses [website] or application.properties file. In this example, I’m using the YAML format. You may reformat code into .properties if you feel more comfortable working with this format.

Here are all the configs we need to add to the [website] file:

YAML spring: application: name: aiembeddings ai: openai: api-key: [your OpenAI api key] embedding: options: model: text-embedding-ada-002.

The model to use. We will be using text-embedding-ada-002 . There are other options: text-embedding-3-large , text-embedding-3-small . You may learn more about the differences in models in OpenAI docs.

As the main purpose of this article is to show the ease of Spring AI integration with embedding models, we will not go deeper into other configurations. You may find more config options in the Spring docs.

Let’s create two files in the resource folder.

The first one is the JSON-formatted “database” of items in our shop. Every Item will have the following parameters: Id, Name, and Description. I named this file [website] and saved it in the resource folder.

JSON [ { "id": 1, "name": "Smartphone A", "description": "5G smartphone with AMOLED display and 128GB storage." }, { "id": 2, "name": "Smartphone B", "description": "4G smartphone with IPS screen and 64GB storage." }, { "id": 3, "name": "Wireless Headphones", "description": "Bluetooth headphones with active noise cancellation." }, { "id": 4, "name": "Smartwatch X", "description": "Fitness smartwatch with heart rate monitor and AMOLED display." }, { "id": 5, "name": "Tablet Pro", "description": "10-inch tablet with 4GB RAM and 64GB storage." }, { "id": 6, "name": "Bluetooth Speaker", "description": "Portable speaker with 12-hour battery life and waterproof design." }, { "id": 7, "name": "Gaming Laptop", "description": "High-performance laptop with RTX 3060 GPU and 16GB RAM." }, { "id": 8, "name": "External SSD", "description": "1TB external SSD with USB-C for fast data transfer." }, { "id": 9, "name": "4K Monitor", "description": "27-inch monitor with 4K resolution and HDR support." }, { "id": 10, "name": "Wireless Mouse", "description": "Ergonomic wireless mouse with adjustable DPI." } ].

The second one is a list of embeddings of the product description. I executed embeddings API in a separate application and saved responses for every single product into a separate file, [website] . I’ll not share the whole file here, as it will make the article unreadable, but you still can download it from the GitHub repo of this project I shared at the beginning of the article.

Now, let’s create the main service of our application -> embedding service.

To integrate our application with the embeddings API, we need to autowire EmbeddingModel . We have already configured OpenAI embeddings in the [website] . Spring Boot will automatically create and configure the instance (Bean) of EmbeddingModel .

To fetch embeddings for a particular String or text, we just need to write one line of code:

Java EmbeddingResponse embeddingResponse = embeddingModel.embedForResponse([website];

Let’s see what the whole service looks like:

Java @Service public class EmbeddingsService { private static List productList = new ArrayList<>(); private static Map embeddings = new HashMap<>(); @Autowired private EmbeddingModel embeddingModel; @Autowired private SimilarityCalculator similarityCalculator; @PostConstruct public void initProducts() throws IOException { ObjectMapper objectMapper = new ObjectMapper(); InputStream inputStream = getClass().getClassLoader().getResourceAsStream("[website]"); if (inputStream != null) { // map JSON into List productList = objectMapper.readValue(inputStream, new TypeReference>() { }); [website]"Products loaded: List size = " + [website]; } else { [website]"File [website] not found in resources."); } embeddings = loadEmbeddingsFromFile(); } public Map loadEmbeddingsFromFile() { try { InputStream inputStream = getClass().getClassLoader().getResourceAsStream("[website]"); ObjectMapper objectMapper = new ObjectMapper(); return objectMapper.readValue(inputStream, new TypeReference>() { }); } catch (Exception e) { [website]"Error loading embeddings from file: " + e.getMessage()); return null; } } public void getSimilarProducts(String query) { EmbeddingResponse embeddingResponse = embeddingModel.embedForResponse([website]; List topSimilarProducts = similarityCalculator.findTopSimilarProducts(embeddingResponse.getResult().getOutput(), embeddings, productList, 5); for (ProductSimilarity ps : topSimilarProducts) { [website]"Product ID: %d, Name: %s, Description: %s, Similarity: [website]", ps.getProduct().getId(), ps.getProduct().getName(), ps.getProduct().getDescription(), ps.getSimilarity()); } } }.

In the @postconstruct method, we are loading our resources into collections. The list of Products reads our products from [website] . The product is a POJO with ID, name, and description fields. We also load precalculated embeddings of our products from another file [website] . We will need these embeddings later when we look for the most similar product. The most significant method in our service is getSimilarProducts which will receive user queries, fetch its embeddings using embeddingModel, and calculate similarities with our existing products. We will take a closer look at similarityCalculator.findTopSimilarProducts a little bit later in this article. After receiving a list of similarities, we will print the top N similar products in the following format: Product ID, Name, Description, Similarity (a number between 0 and 1).

To calculate similarities, we introduced SimilarityCalculator Service. Let’s take a deeper look at its implementation.

Java @Service public class SimilarityCalculator { public float calculateCosineSimilarity(float[] vectorA, float[] vectorB) { float dotProduct = [website]; float normA = [website]; float normB = [website]; for (int i = 0; i < [website]; i++) { dotProduct += vectorA[i] * vectorB[i]; normA += [website][i], 2); normB += [website][i], 2); } return (float) (dotProduct / ([website] * [website]; } public List findTopSimilarProducts( float[] queryEmbedding, Map embeddings, List products, int topN) { List similarities = new ArrayList<>(); for (Product product : products) { float[] productEmbedding = [website]; if (productEmbedding != null) { float similarity = calculateCosineSimilarity(queryEmbedding, productEmbedding); [website] ProductSimilarity(product, similarity)); } } return [website] .sorted((p1, p2) -> Double.compare(p2.getSimilarity(), p1.getSimilarity())) .limit(topN) .toList(); } }.

ProductSimilarity is a POJO class containing Product and similarity fields. You can find the code for this class in the GitHub repo. calculateCosineSimilarity is the method used to find the most similar descriptions to user queries. Cosine similarity is one of the most popular ways to measure the similarity between embeddings. Explaining the exact workings of cosine similarity is beyond the scope of this article. findTopSimilarProducts is a method called from our embedding service. It calculates similarities with all products, sorts them, and returns the top N products with the highest similarity.

We will execute this application directly from the code, without using REST controllers or making API calls. You may use an approach similar to the one I used in the first article, when I created a separate endpoint to make execution smoother.

Java @SpringBootApplication public class AiEmbeddingsApplication { public static void main(String[] args) { ConfigurableApplicationContext run = new SpringApplicationBuilder([website] .web([website] .run(args); run.getBean([website]"5G Phone. IPS"); } }.

We are executing our code in the last line of the method, fetching the bean from the context, and executing the getSimilarProducts method with a provided query.

In my query, I’ve included three keywords: 5G, Phone, and IPS. We should receive quite a high similarity with Product 1 and Product 2. Both products are smartphones, but Product 1 is a 5G smartphone, while Product 2 has an IPS screen.

To start our application, we need to run the following command:

In a couple of seconds after executing, we may see the following result in the console:

Shell Product ID: 2, Name: Smartphone B, Description: 4G smartphone with IPS screen and 64GB storage., Similarity: 0,9129 Product ID: 1, Name: Smartphone A, Description: 5G smartphone with AMOLED display and 128GB storage., Similarity: 0,8843 Product ID: 9, Name: 4K Monitor, Description: 27-inch monitor with 4K resolution and HDR support., Similarity: 0,8156 Product ID: 5, Name: Tablet Pro, Description: 10-inch tablet with 4GB RAM and 64GB storage., Similarity: 0,8156 Product ID: 4, Name: Smartwatch X, Description: Fitness smartwatch with heart rate monitor and AMOLED display., Similarity: 0,8037.

We can see that Product 2 and Product 1 have the biggest similarities. What’s also interesting is that as we included the IPS keyword, our top five similar products all are products with displays.

Spring AI is a great tool that helps developers smoothly integrate with different AI models. At the moment of writing this article, Spring AI supports 10 embedding models, including but not limited to Ollama and Amazon Bedrock.

I hope you found this article helpful and that it will inspire you to explore Spring AI deeper.

Minha experiência com programação mudou completamente no dia em que eu descobri e aprendi a usar o Docker. Conseguir subir e gerenciar serviços na min......

How Would You Design a Scalable and Maintainable Event Ticketing API?

I’m working on designing a mock event ticketing API, and I want ......

Pinecone showcased Tuesday the next generation version of its serverless architecture, which the business says is designed to improved support a wide var......

Toe Dipping Into View Transitions

I’ll be honest and say that the View Transition API intimidates me more than a smidge. There are plenty of tutorials with the most impressive demos showing how we can animate the transition between two pages, and they usually start with the simplest of all examples.

That’s usually where the simplicity ends and the tutorials venture deep into JavaScript territory. There’s nothing wrong with that, of course, except that it’s a mental leap for someone like me who learns by building up rather than leaping through. So, I was darned inspired when I saw Uncle Dave and Jim Neilsen trading tips on a super practical transition: post titles.

This is the perfect sort of toe-dipping experiment I like for trying new things. And it starts with the same little @view-transition snippet which is used to opt both pages into the View Transitions API: the page we’re on and the page we’re navigating to. From here on out, we can think of those as the “new” page and the “old” page, respectively.

I was able to get the same effect going on my personal blog:

Perfect little exercise for a blog, right? It starts by setting the view-transition-name on the elements we want to participate in the transition which, in this case, is the post title on the “old” page and the post title on the “new” page.

…we can give them the same view-transition-name in CSS:

.post-title { view-transition-name: post-title; } .post-link { view-transition-name: post-title; }.

Dave is quick to point out that we can make sure we respect consumers who prefer reduced motion and only apply this if their system preferences allow for motion:

@media not (prefers-reduced-motion: reduce) { .post-title { view-transition-name: post-title; } .post-link { view-transition-name: post-title; } }.

If those were the only two elements on the page, then this would work fine. But what we have is a list of post links and all of them have to have their own unique view-transition-name . This is where Jim got a little stuck in his work because how in the heck do you accomplish that when new blog posts are ? Do you have to edit your CSS and come up with a new transition name each and every time you want to post new content? Nah, there’s got to be a improved way.

And there is. Or, at least there will be. It’s just not standard yet. Bramus, in fact, wrote about it very in the recent past when discussing Chrome’s work on the attr() function which will be able to generate a series of unique identifiers in a single declaration. Check out this CSS from the future:

Daaaaa-aaaang that is going to be handy! I want it now, darn it! Gotta have to wait not only for Chrome to develop it, but for other browsers to adopt and implement it as well, so who knows when we’ll actually get it. For now, the best bet is to use a little programmatic logic directly in the template. My site runs on WordPress, so I’ve got access to PHP and can generate an inline style that sets the view-transition-name on both elements.

The post title is in the template for my individual blog posts. That’s the [website] file in WordPress parlance.

The post links are in the template for post archives. That’s typically [website] in WordPress:

See what’s happening there? The view-transition-name property is set on both transition elements directly inline, using PHP to generate the name based on the post’s assigned ID in WordPress. Another way to do it is to drop a.