But animating these grid properties only recently gained supported by all three major browsers. Shall we take a look at a few examples to get the creative juices flowing?
A simple two-column grid. Now, before, you might not have built this using CSS Grid because animations and transitions weren’t supported, but what if you wanted the left column — perhaps a sidebar navigation — to expand on hover? Well, now that’s possible.
I know what you’re thinking: “Animating a CSS property? Easy peasy, I’ve been doing it for years!” Me too. However, I ran into an interesting snag while experimenting with a particular use case.
So, we want to transition the grid itself (specifically grid-template-columns, which is set on the .grid class in the example). But the left column (.left) is the selector that requires the :hover pseudo-class. While JavaScript can solve this conundrum easily — thanks, but no thanks — we can accomplish it with CSS alone.
Let’s walk through the whole thing, starting with the HTML. Pretty standard stuff really… a grid with two columns.
Putting the cosmetic CSS aside, you’ll first need to set display: grid on the parent container (.grid).
.grid {
display: grid;
}
Next, we can define and size the two columns using the grid-template-columns property. We’ll make the left column super narrow, and later increase its width on hover. The right column takes up the rest of the remaining space, thanks to the auto keyword.
We know we’re going to animate this thing, so let’s go ahead and throw a transition in there while we’re at it so the change between states is smooth and noticeable.
That’s it for the .grid! All that’s left is to apply the hover state. Specifically, we’re going to override the grid-template-columns property so that the left column takes up a greater amount of space on hover.
This alone isn’t all that interesting, although it’s awesome that animations and transitions are supported now in CSS Grid. What’s more interesting is that we can use the relatively new :has()pseudo-class to style the parent container (.grid) while the child (.left) is hovered.
.grid:has(.left:hover) {
/* Hover styles */
}
In plain English this is saying, “Do something to the .grid container if it contains an element named .left inside of it that is in a hover state.” That’s why :has() is often referred to as a “parent” selector. We can finally select a parent based on the children it contains — no JavaScript required!
So, let’s increase the width of the .left column to 30% when it is hovered. The .right column will continue to take up all the leftover space:
We could use CSS variables as well, which may or may not look cleaner depending on your personal preferences (or you might be using CSS variables in your project anyway):
I love that CSS grids can be animated now, but the fact that we can build this particular example with just nine lines of CSS is even more astounding.
Here’s another example by Olivia Ng — similar concept, but with content (click on the nav icon):
CodePen Embed Fallback
Example 2: Expanding Panels
CodePen Embed Fallback
This example transitions the grid container (the column widths) but also the individual columns (their background colors). It’s ideal for providing more content on hover.
It’s worth remembering that the repeat() function sometimes produces buggy transitions, which is why I set the width of each column individually (i.e. grid-template-columns: 1fr 1fr 1fr).
Example 3: Adding Rows and Columns
CodePen Embed Fallback
This example animatedly “adds” a column to the grid. However — you guessed it — this scenario has a pitfall too. The requirement is that the “new” column mustn’t be hidden (i.e. set to display: none), and CSS Grid must acknowledge its existence while setting its width to 0fr.
So, for a three-column grid — grid-template-columns: 1fr 1fr 0fr (yes, the unit must be declared even though the value is 0!) transitions into grid-template-columns: 1fr 1fr 1fr correctly, but grid-template-columns: 1fr 1fr doesn’t. In hindsight, this actually makes perfect sense considering what we know about how transitions work.
Here’s another example by Michelle Barker — same concept, but with an extra column and lot more pizzazz. Make sure to run this one in full-screen mode because it’s actually responsive (no trickery, just good design!).
CodePen Embed Fallback
A few more examples
Because why not?
This “Animated Mondrian” is the original proof of concept for animated CSS grids by Chrome DevRel. The grid-row‘s and grid-column‘s utilize the span keyword to create the layout you see before you, and then the grid-template-row’s and grid-template-column‘s are animated using a CSS animation. It’s nowhere near as complex as it looks!
CodePen Embed Fallback
Same concept, but with more of that Michelle Barker pizzazz. Could make a nice loading spinner?
CodePen Embed Fallback
Wrapping up with a bit of nostalgia (showing my age here), the not-very-griddy animated CSS grid by Andrew Harvard. Again — same concept — it’s just that you can’t see the other grid items. But don’t worry, they’re there.
SvelteKit is the latest of what I’d call next-gen application frameworks. It, of course, scaffolds an application for you, with the file-based routing, deployment, and server-side rendering that Next has done forever. But SvelteKit also supports nested layouts, server mutations that sync up the data on your page, and some other niceties we’ll get into.
This post is meant to be a high-level introduction to hopefully build some excitement for anyone who’s never used SvelteKit. It’ll be a relaxed tour. If you like what you see, the full docs are here.
In some ways this is a challenging post to write. SvelteKit is an application framework. It exists to help you build… well, applications. That makes it hard to demo. It’s not feasible to build an entire application in a blog post. So instead, we’ll use our imaginations a bit. We’ll build the skeleton of an application, have some empty UI placeholders, and hard-coded static data. The goal isn’t to build an actual application, but instead to show you how SvelteKit’s moving pieces work so you can build an application of your own.
To that end, we’ll build the tried and true To-Do application as an example. But don’t worry, this will be much, much more about seeing how SvelteKit works than creating yet another To-Do app.
Spinning up a new SvelteKit project is simple enough. Run npm create svelte@latest your-app-name in the terminal and answer the question prompts. Be sure to pick “Skeleton Project” but otherwise make whatever selections you want for TypeScript, ESLint, etc.
Once the project is created, run npm i and npm run dev and a dev server should start running. Fire up localhost:5173 in the browser and you’ll get the placeholder page for the skeleton app.
Basic routing
Notice the routes folder under src. That holds code for all of our routes. There’s already a +page.svelte file in there with content for the root / route. No matter where in the file hierarchy you are, the actual page for that path always has the name +page.svelte. With that in mind, let’s create pages for /list, /details, /admin/user-settings and admin/paid-status, and also add some text placeholders for each page.
Your file layout should look something like this:
You should be able to navigate around by changing URL paths in the browser address bar.
Layouts
We’ll want navigation links in our app, but we certainly don’t want to copy the markup for them on each page we create. So, let’s create a +layout.svelte file in the root of our routes folder, which SvelteKit will treat as a global template for all pages. Let’s and add some content to it:
Some rudimentary navigation with some basic styles. Of particular importance is the <slot /> tag. This is notthe slot you use with web components and shadow DOM, but rather a Svelte feature indicating where to put our content. When a page renders, the page content will slide in where the slot is.
And now we have some navigation! We won’t win any design competitions, but we’re not trying to.
Nested layouts
What if we wanted all our admin pages to inherit the normal layout we just built but also share some things common to all admin pages (but only admin pages)? No problem, we add another +layout.svelte file in our root admin directory, which will be inherited by everything underneath it. Let’s do that and add this content:
<div>This is an admin page</div>
<slot />
<style>
div {
padding: 15px;
margin: 10px 0;
background-color: red;
color: white;
}
</style>
We add a red banner indicating this is an admin page and then, like before, a <slot /> denoting where we want our page content to go.
Our root layout from before renders. Inside of the root layout is a <slot /> tag. The nested layout’s content goes into the root layout’s <slot />. And finally, the nested layout defines its own <slot />, into which the page content renders.
If you navigate to the admin pages, you should see the new red banner:
Defining our data
OK, let’s render some actual data — or at least, see how we can render some actual data. There’s a hundred ways to create and connect to a database. This post is about SvelteKit though, not managing DynamoDB, so we’ll “load” some static data instead. But, we’ll use all the same machinery to read and update it that you’d use for real data. For a real web app, swap out the functions returning static data with functions connecting and querying to whatever database you happen to use.
Let’s create a dirt-simple module in lib/data/todoData.ts that returns some static data along with artificial delays to simulate real queries. You’ll see this lib folder imported elsewhere via $lib. This is a SvelteKit feature for that particular folder, and you can even add your own aliases.
A function to return a flat array of our to-do items, a lookup of our tags, and a function to fetch a single to-do (we’ll use that last one in our Details page).
Loading our data
How do we get that data into our Svelte pages? There’s a number of ways, but for now, let’s create a +page.server.js file in our list folder, and put this content in it:
import { getTodos, getTags } from "$lib/data/todoData";
export function load() {
const todos = getTodos();
const tags = getTags();
return {
todos,
tags,
};
}
We’ve defined a load() function that pulls in the data needed for the page. Notice that we are notawait-ing calls to our getTodos and getTags async functions. Doing so would create a data loading waterfall as we wait for our to-do items to come in before loading our tags. Instead, we return the raw promises from load, and SvelteKit does the necessary work to await them.
So, how do we access this data from our page component? SvelteKit provides a data prop for our component with data on it. We’ll access our to-do items and tags from it using a reactive assignment.
Before we move on to the Details page and mutate data, let’s take a peek at a really neat SvelteKit feature: layout groups. We’ve already seen nested layouts for all admin pages, but what if we wanted to share a layout between arbitrary pages at the same level of our file system? In particular, what if we wanted to share a layout between only our List page and our Details page? We already have a global layout at that level. Instead, we can create a new directory, but with a name that’s in parenthesis, like this:
We now have a layout group that covers our List and Details pages. I named it (todo-management) but you can name it anything you like. To be clear, this name will not affect the URLs of the pages inside of the layout group. The URLs will remain the same; layout groups allow you to add shared layouts to pages without them all comprising the entirety of a directory in routes.
We could add a +layout.svelte file and some silly <div> banner saying, “Hey we’re managing to-dos”. But let’s do something more interesting. Layouts can define load() functions in order to provide data for all routes underneath them. Let’s use this functionality to load our tags — since we’ll be using our tags in our details page — in addition to the list page we already have.
In reality, forcing a layout group just to provide a single piece of data is almost certainly not worth it; it’s better to duplicate that data in the load() function for each page. But for this post, it’ll provide the excuse we need to see a new SvelteKit feature!
First, let’s go into our list page’s +page.server.js file and remove the tags from it.
import { getTodos, getTags } from "$lib/data/todoData";
export function load() {
const todos = getTodos();
return {
todos,
};
}
Our List page should now produce an error since there is no tags object. Let’s fix this by adding a +layout.server.js file in our layout group, then define a load() function that loads our tags.
import { getTags } from "$lib/data/todoData";
export function load() {
const tags = getTags();
return {
tags,
};
}
And, just like that, our List page is rendering again!
We’re loading data from multiple locations
Let’s put a fine point on what’s happening here:
We defined a load() function for our layout group, which we put in +layout.server.js.
This provides data for all of the pages the layout serves — which in this case means our List and Details pages.
Our List page also defines a load() function that goes in its +page.server.js file.
SvelteKit does the grunt work of taking the results of these data sources, merging them together, and making both available in data.
Our Details page
We’ll use our Details page to edit a to-do item. First, let’s add a column to the table in our List page that links to the Details page with the to-do item’s ID in the query string.
<td><a href="/details?id={t.id}">Edit</a></td>
Now let’s build out our Details page. First, we’ll add a loader to grab the to-do item we’re editing. Create a +page.server.js in /details, with this content:
import { getTodo, updateTodo, wait } from "$lib/data/todoData";
export function load({ url }) {
const id = url.searchParams.get("id");
console.log(id);
const todo = getTodo(id);
return {
todo,
};
}
Our loader comes with a url property from which we can pull query string values. This makes it easy to look up the to-do item we’re editing. Let’s render that to-do, along with functionality to edit it.
SvelteKit has wonderful built-in mutation capabilities, so long as you use forms. Remember forms? Here’s our Details page. I’ve elided the styles for brevity.
We’re grabbing the tags as before from our layout group’s loader and the to-do item from our page’s loader. We’re grabbing the actual tag objects from the to-do’s list of tag IDs and then rendering everything. We create a form with a hidden input for the ID and a real input for the title. We display the tags and then provide a button to submit the form.
If you noticed the use:enhance, that simply tells SvelteKit to use progressive enhancement and Ajax to submit our form. You’ll likely always use that.
How do we save our edits?
Notice the action="?/editTodo" attribute on the form itself? This tells us where we want to submit our edited data. For our case, we want to submit to an editTodo “action.”
Let’s create it by adding the following to the +page.server.js file we already have for Details (which currently has a load() function, to grab our to-do):
Form actions give us a request object, which provides access to our formData, which has a get method for our various form fields. We added that hidden input for the ID value so we could grab it here in order to look up the to-do item we’re editing. We simulate a delay, call a new updateTodo() method, then redirect the user back to the /list page. The updateTodo() method merely updates our static data; in real life you’d run some sort of update in whatever datastore you’re using.
export async function updateTodo(id, newTitle) {
const todo = todos.find(t => t.id == id);
Object.assign(todo, { title: newTitle });
}
Let’s try it out. We’ll go to the List page first:
Now let’s click the Edit button for one of the to-do items to bring up the editing page in /details.
We’re going to add a new title:
Now, click Save. That should get us back to our /list page, with the new to-do title applied.
How did the new title show up like that? It was automatic. Once we redirected to the /list page, SvelteKit automatically re-ran all of our loaders just like it would have done regardless. This is the key advancement that next-gen application frameworks, like SvelteKit, Remix, and Next 13 provide. Rather than giving you a convenient way to render pages then wishing you the best of luck fetching whatever endpoints you might have to update data, they integrate data mutation alongside data loading, allowing the two to work in tandem.
A few things you might be wondering…
This mutation update doesn’t seem too impressive. The loaders will re-run whenever you navigate. What if we hadn’t added a redirect in our form action, but stayed on the current page? SvelteKit would perform the update in the form action, like before, but would still re-run all of the loaders for the current page, including the loaders in the page layout(s).
Can we have more targeted means of invalidating our data? For example, our tags were not edited, so in real life we wouldn’t want to re-query them. Yes, what I showed you is just the default forms behavior in SvelteKit. You can turn the default behavior off by providing a callback to use:enhance. Then SvelteKit provides manual invalidation functions.
Loading data on every navigation is potentially expensive, and unnecessary. Can I cache this data like I do with tools like react-query? Yes, just differently. SvelteKit lets you set (and then respect) the cache-control headers the web already provides. And I’ll be covering cache invalidation mechanisms in a follow-on post.
Everything we’ve done throughout this article uses static data and modifies values in memory. If you need to revert everything and start over, stop and restart the npm run dev Node process.
Wrapping up
We’ve barely scratched the surface of SvelteKit, but hopefully you’ve seen enough to get excited about it. I can’t remember the last time I’ve found web development this much fun. With things like bundling, routing, SSR, and deployment all handled out of the box, I get to spend more time coding than configuring.
Here are a few more resources you can use as next steps learning SvelteKit:
This article is not a definitive guide to :has(). It’s also not here to regurgitate what’s already been said. It’s just me (hi 👋) jumping on the bandwagon for a moment to share some of the ways I’m most likely to use :has() in my day-to-day work… that is, once browser support is good enough. (Firefox is the last holdout, but will support it, which is imminent.)
When that does happen, you can bet I’ll start using :has() all over the place. Here are some real-world examples of things I’ve built recently and thought to myself, “Gee, this’ll be so much nicer once :has() is fully supported.”
Avoid having to reach outside your JavaScript component
Have you ever built an interactive component that sometimes needs to affect styles somewhere else on the page? Take the following example, where <nav> is a mega menu, and opening it changes the colors of the <header> content above it.
I feel like I need to do this kind of thing all the time.
This particular example is a React component I made for a site. I had to “reach outside” the React part of the page with document.querySelector(...) and toggle a class on the <body>, <header>, or another component. That’s not the end of the world, but it sure feels a bit yuck. Even in a fully React site (a Next.js site, say), I’d have to choose between managing a menuIsOpen state way higher up the component tree, or do the same DOM element selection — which isn’t very React-y.
With :has(), the problem goes away:
header:has(.megamenu--open) {
/* style the header differently if it contains
an element with the class ".megamenu--open"
*/
}
No more fiddling with other parts of the DOM in my JavaScript components!
Better table striping UX
Adding alternate row “stripes” to your tables can be a nice UX improvement. They help your eyes keep track of which row you’re on as you scan the table.
But in my experience, this doesn’t work great on tables with just two or three rows. If you have, for example, a table with three rows in the <tbody> and you’re “striping” every “even” row, you could end up with just one stripe. That’s not really worth a pattern and might have users wondering what’s so special about that one highlighted row.
What to get fancier? You could also decide to only do this if the table has at least a certain number of columns, too:
table:has(:is(td, th):nth-child(3)) {
/* only do stuff if there are three or more columns */
}
Remove conditional class logic from templates
I often need to change a page layout depending on what’s on the page. Take the following Grid layout, where the placement of the main content changes grid areas depending on whether there’s a sidebar present.
That’s something that might depend on whether there are sibling pages set in the CMS. I’d normally do this with template logic to conditionally add BEM modifier classes to the layout wrapper to account for both layouts. That CSS might look something like this (responsive rules and other stuff omitted for brevity):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar {
grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar {
grid-template-areas: '. m m m m m m m m m . .';
}
CSS-wise, this is totally fine, of course. But it does make the template code a little messy. Depending on your templating language it can get pretty ugly to conditionally add a bunch of classes, especially if you have to do this with lots of child elements too.
Contrast that with a :has()-based approach:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) {
grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) {
grid-template-areas: '. m m m m m m m m m . .';
}
Honestly, that’s not a whole lot better CSS-wise. But removing the conditional modifier classes from the HTML template is a nice win if you ask me.
It’s easy to think of micro design decisions for :has() — like a card when it has an image in it — but I think it’ll be really useful for these macro layout changes too.
Better specificity management
If you read my previous article, you’ll know I’m a stickler for specificity. If, like me, you don’t want your specificity scores blowing out when adding :has() and :not() throughout your styles, be sure to use :where().
That’s because the specificity of :has() is based on the most specific element in its argument list. So, if you have something like an ID in there (why, I’m not sure!), your selector is going to be tough to override in the cascade.
/* specificity score: 0,1,0.
Same as a .standard-page--with-sidebar
modifier class
*/
.standard-page:where(:has(.sidebar)) {
/* etc */
}
The future’s bright
These are just a few things I can’t wait to be able to use in production. The CSS-Tricks Almanac has a bunch of examples, too. What are you looking forward to doing with :has()? What sort of some real-world examples have you run into where :has() would have been the perfect solution?
While I am not a regular Chrome extension programmer, I have certainly coded enough extensions and have a wide enough web development portfolio to know my way around the task. However, just recently, I had a client reject one of my extensions as I received feedback that my extension was “outdated”.
As I was scrambling to figure out what was wrong, I swept my embarrassment under the carpet and immediately began my deep dive back into the world of Chrome Extensions. Unfortunately, information on Manifest V3 was scarce and it was difficult for me to understand quickly what this transition was all about.
Needless to say, with a pending job, I had to painstakingly navigate my way around Google’s Chrome Developer Documentation and figure things out for myself. While I got the job done, I did not want my knowledge and research in this area to go to waste and decided to share what I wish I could have had easy access to in my learning journey.
Why the transition to Manifest 3 is important
Manifest V3 is an API that Google will use in its Chrome browser. It is the successor to the current API, Manifest V2, and governs how Chrome extensions interact with the browser. Manifest V3 introduces significant changes to the rules for extensions, some of which will be the new mainstay from V2 we were used to.
Manifest V3 will officially begin rolling out in January 2023.
By June 2023, extensions that run Manifest V2 will no longer be available on the Chrome Web Store.
Extensions that do not comply with the new rules introduced in Manifest V3 will eventually be removed from the Chrome Web Store.
One of the main goals of Manifest V3 is to make users safer and improve the overall browser experience. Previously, many browser extensions relied on code in the cloud, meaning it could be difficult to assess whether an extension was risky. Manifest V3 aims to address this by requiring extensions to contain all the code they will run, allowing Google to scan them and detect potential risks. It also forces extensions to request permission from Google for the changes they can implement on the browser.
Staying up-to-date with Google’s transition to Manifest V3 is important because it introduces new rules for extensions that aim to improve user safety and the overall browser experience, and extensions that do not comply with these rules will eventually be removed from the Chrome Web Store.
In short, all of your hard work in creating extensions that used Manifest V2 could be for naught if you do not make this transition in the coming months.
January 2023
June 2023
January 2024
Support for Manifest V2 extensions will be turned off in Chrome’s Canary, Dev, and Beta channels.
The Chrome Web Store will no longer allow Manifest V2 extensions to be published with visibility set to Public.
The Chrome Web Store will remove all remaining Manifest V2 extensions.
Manifest V3 will be required for the Featured badge in the Chrome Web Store.
Existing Manifest V2 extensions that are published and publically visible will become unlisted.
Support for Manifest 2 will end for all of Chrome’s channels, including the Stable channel, unless the Enterprise channel is extended.
The key differences between Manifest V2 and V3
There are many differences between the two, and while I highly recommend that you read up on Chrome’s “Migrating to Manifest V3” guide, here is a short and sweet summary of key points:
Network request modification is handled with the new declarativeNetRequest API in Manifest V3.
In Manifest V3, extensions can only execute JavaScript that is included within their package and cannot use remotely-hosted code.
Manifest V3 introduces promise support to many methods, though callbacks are still supported as an alternative.
Host permissions in Manifest V3 are a separate element and must be specified in the "host_permissions" field.
The content security policy in Manifest V3 is an object with members representing alternative content security policy (CSP) contexts, rather than a string as it was in Manifest V2.
In a simple Chrome Extension’s Manifest that alters a webpage’s background, that might look like this:
// Manifest V2
{
"manifest_version": 2,
"name": "Shane's Extension",
"version": "1.0",
"description": "A simple extension that changes the background of a webpage to Shane's face.",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [ "activeTab", ],
"optional_permissions": ["<all_urls>"]
}
// Manifest V3
{
"manifest_version": 3,
"name": "Shane's Extension",
"version": "1.0",
"description": "A simple extension that changes the background of a webpage to Shane's face.",
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"permissions": [ "activeTab", ],
"host_permissions": [ "<all_urls>" ]
}
If you find some of the tags above seem foreign to you, keep reading to find out exactly what you need to know.
How to smoothly transition to Manifest V3
I have summarized the transition to Manifest V3 in four key areas. Of course, while there are many bells and whistles in the new Manifest V3 that need to be implemented from the old Manifest V2, implementing changes in these four areas will get your Chrome Extension well on the right track for the eventual transition.
The four key areas are:
Updating your Manifest’s basic structure.
Modify your host permissions.
Update the content security policy.
Modify your network request handling.
With these four areas, your Manifest’s fundamentals will be ready for the transition to Manifest V3. Let’s look at each of these key aspects in detail and see how we can work towards future-proofing your Chrome Extension from this transition.
Updating your Manifest’s basic structure
Updating your manifest’s basic structure is the first step in transitioning to Manifest V3. The most important change you will need to make is changing the value of the "manifest_version" element to 3, which determines that you are using the Manifest V3 feature set.
One of the major differences between Manifest V2 and V3 is the replacement of background pages with a single extension service worker in Manifest V3. You will need to register the service worker under the "background" field, using the "service_worker" key and specify a single JavaScript file. Even though Manifest V3 does not support multiple background scripts, you can optionally declare the service worker as an ES Module by specifying "type": "module", which allows you to import further code.
In Manifest V3, the "browser_action" and "page_action" properties are unified into a single "action" property. You will need to replace these properties with "action" in your manifest. Similarly, the "chrome.browserAction" and "chrome.pageAction" APIs are unified into a single “Action” API in Manifest V3, and you will need to migrate to this API.
Overall, updating your manifest’s basic structure is a crucial step in the process of transitioning to Manifest V3, as it allows you to take advantage of the new features and changes introduced in this version of the API.
Modify your host permissions
The second step in transitioning to Manifest V3 is modifying your host permissions. In Manifest V2, you specify host permissions in the "permissions" field in the manifest file. In Manifest V3, host permissions are a separate element, and you should specify them in the "host_permissions" field in the manifest file.
Here is an example of how to modify your host permissions:
In order to update the CSP of your Manifest V2 extension to be compliant with Manifest V3, you will need to make some changes to your manifest file. In Manifest V2, the CSP was specified as a string in the "content_security_policy" field of the manifest.
In Manifest V3, the CSP is now an object with different members representing alternative CSP contexts. Instead of a single "content_security_policy" field, you will now have to specify separate fields for "content_security_policy.extension_pages" and "content_security_policy.sandbox", depending on the type of extension pages you are using.
You should also remove any references to external domains in the "script-src", "worker-src", "object-src", and "style-src" directives if they are present. It is important to make these updates to your CSP in order to ensure the security and stability of your extension in Manifest V3.
The final step in transitioning to Manifest V3 is modifying your network request handling. In Manifest V2, you would have used the chrome.webRequest API to modify network requests. However, this API is replaced in Manifest V3 by the declarativeNetRequest API.
To use this new API, you will need to specify the declarativeNetRequest permission in your manifest and update your code to use the new API. One key difference between the two APIs is that the declarativeNetRequest API requires you to specify a list of predetermined addresses to block, rather than being able to block entire categories of HTTP requests as you could with the chrome.webRequest API.
It is important to make these changes in your code to ensure that your extension continues to function properly under Manifest V3. Here is an example of how you would modify your manifest to use the declarativeNetRequest API in Manifest V3:
You will also need to update your extension code to use the declarativeNetRequest API instead of the chrome.webRequest API.
Other aspects you need to check
What I have covered is just the tip of the iceberg. Of course, if I wanted to cover everything, I could be here for days and there would be no point in having Google’s Chrome Developers guides. While what I covered will have you future-proofed enough to arm your Chrome extensions in this transition, here are some other things you might want to look at to ensure your extensions are functioning at the top of their game.
Migrating background scripts to the service worker execution context: As mentioned earlier, Manifest V3 replaces background pages with a single extension service worker, so it may be necessary to update background scripts to adapt to the service worker execution context.
Unifying the**chrome.browserAction**and**chrome.pageAction**APIs: These two equivalent APIs are unified into a single API in Manifest V3, so it may be necessary to migrate to the Action API.
Migrating functions that expect a Manifest V2 background context: The adoption of service workers in Manifest V3 is not compatible with methods like chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), and chrome.extension.getViews(). It may be necessary to migrate to a design that passes messages between other contexts and the background service worker.
Moving CORS requests in content scripts to the background service worker: It may be necessary to move CORS requests in content scripts to the background service worker in order to comply with Manifest V3.
Migrating away from executing external code or arbitrary strings: Manifest V3 no longer allows the execution of external logic using chrome.scripting.executeScript({code: '...'}), eval(), and new Function(). It may be necessary to move all external code (JavaScript, WebAssembly, CSS) into the extension bundle, update script and style references to load resources from the extension bundle, and use chrome.runtime.getURL() to build resource URLs at runtime.
Updating certain scripting and CSS methods in the Tabs API: As mentioned earlier, several methods move from the Tabs API to the Scripting API in Manifest V3. It may be necessary to update any calls to these methods to use the correct Manifest V3 API.
And many more!
Feel free to take some time to get yourself up to date on all the changes. After all, this change is inevitable and if you do not want your Manifest V2 extensions to be lost due to avoiding this transition, then spend some time arming yourself with the necessary knowledge.
On the other hand, if you are new to programming Chrome extensions and looking to get started, a great way to go about it is to dive into the world of Chrome’s Web Developer tools. I did so through a course on Linkedin Learning, which got me up to speed pretty quickly. Once you have that base knowledge, come back to this article and translate what you know to Manifest V3!
So, how will I be using the features in the new Manifest V3 going forward?
Well, to me, the transition to Manifest V3 and the removal of the chrome.webRequest API seems to be shifting extensions away from data-centric use cases (such as ad blockers) to more functional and application-based uses. I have been staying away from application development lately as it can get quite resource-intensive at times. However, this shift might be what brings me back!
The rise of AI tools in recent times, many with available-to-use APIs, has sparked tons of new and fresh SaaS applications. Personally, I think that it’s coming at a perfect time with the shift to more application-based Chrome extensions! While many of the older extensions may be wiped out from this transition, plenty of new ones built around novel SaaS ideas will come to take their place.
Hence, this is an exciting update to hop on and revamp old extensions or build new ones! Personally, I see many possibilities in using APIs that involve AI being used in extensions to enhance a user’s browsing experience. But that’s really just the tip of the iceberg. If you’re looking to really get into things with your own professional extensions or reaching out to companies to build/update extensions for them, I would recommend upgrading your Gmail account for the benefits it gives in collaborating, developing, and publishing extensions to the Chrome Web Store.
However, remember that every developer’s requirements are different, so learn what you need to keep your current extensions afloat, or your new ones going!
Learn how to get started with Affinity Photo in this beginner-friendly course! We’ll cover all the essential tools you need to know to create different photo and text effects.
Jump straight to the Affinity Photo skill you want to learn:
What are adjustment and live filter layers in Affinity Photo?
What are live filter layers in Affinity Photo?
How to remove a background in Affinity Photo
How to create a text effect in Affinity Photo
About Your Instructor
Abbey Esparza
I’m a mixed media artist and freelancer with over ten years of experience in digital art. In the last five years of my career, I have found a passion for sharing my knowledge and creating educational content showing that anyone can be a successful artist.
There’s no better place to start than with our user interface, known as the „Studio” in Affinity Photo. We’ll be covering how to best set up your Preferences for max performance, as well as customizing your studio.
Have you ever wondered what Personas are in Affinity Photo? They are less complicated than they sound. We’ll cover what Personas are, how to switch between them, and when you might use one over another.
Now that we know how to move and adjust our layers, it’s time to learn about adjustment layers and layer masks. An Adjustment Layer is exactly what it sounds like: an image adjustment that is on its own layer.
Below we can see all of the different adjustments that Affinity Photo has. We’ll be using the Recolor layer as our beginning example, before we move on to bigger photo effects.
We will then learn about layer masks, how to create them and how they work. A layer mask is used to hide a portion of a layer, while still giving us the option to bring back what we hid at any time.
Quick Tip! How to Use LUTs
2.3 How to Use Layer Modes & Live Filter Layers in Affinity Photo
Layer modes change how a layer will interact with all the layers below it. We’ll be using them to create both photo and text effects, but first we have to cover the basics.
Last but not least, some of the most powerful features in Affinity Photo are Live Layers. They’re the last layer type we’ll be covering. To start, we’ll use a single Motion Blur live layer to create a vibrant lens flare effect.
Quick Tip! How to Create a Halftone Effect
2.4 How to Create a Hand-Drawn Pencil Effect in Affinity Photo
If you can’t find a premade brush, then Affinity Photo makes it easier than ever to create your own. We’ll take a look at how to create both an Image brush and Intensity brush.
3.3 How to Create an Easy Watercolor Effect in Affinity Photo
Removing backgrounds is something all photo editors have to do at some point. We’ll be using the Selection Brush tool combined with layer masks to quickly remove a subject from their background.
4.2 How to Refine Masks & Extract Hair in Affinity Photo
But what about shadows? There’s a neat trick we can use for images on studio backdrops using Layer ModesAdjustments and Layer Masks. This technique will let us use the original background of a photo for an accurate shadow.
Always try to use the original shadows in a photo. When extracting or creating shadows, the Multiply layer mode is going to be the best tool for the job.
Now, it’s time to combine everything we’ve learned to turn this image into a proper photo manipulation. First, we’ll cover simple color correction using a Brightness/Contrast adjustmentlayer to blend the initial two images together.
Next, we’ll shift the hues of the image to be much more creative and eye-catching. We’ll do this by targeting the greens of both the background and the subject with an HSL adjustment layer.
Lastly, we’ll use a global Clarity live filter and a Curves adjustment to tie the two images together and give everything a consistent style.
Quick Tip! How to Create a Glow Effect
5. How to Create Text & Edit Type in Affinity Photo
Custom fonts are a must for any designer or artist. In order to create a holographic text effect, we’ll first need to download and install the Devant Horgen font.
When it comes to Affinity Photo, it’s all about slowly learning how to mix and match tools to create what you want to make. In this final video, I tell you why I chose the basics that I did, explain why I might have left out certain tools, and tell you where you might want to go from here.
Want even more assets to follow along with? Get unlimited downloads of photos, fonts, and add-ons on Envato Elements! Choose from thousands of Affinity Photo assets, with no daily download limits.
Learn More About Affinity Photo
Still want to learn more about Affinity Photo? Here are a few videos you’ll love:
Or if you prefer written tutorials, try our huge library of free Affinity tutorials. Here are a few to get started with:
In this article, you’ll learn the best font to pair with Times New Roman to bring a modern look to your designs.
Times New Roman is a classic serif typeface dating back to the 1930s. This is most likely the first font you ever saw installed on a desktop computer. In this article, I’ll show you some good sans serif fonts to pair with Times New Roman.
More Fonts to Pair With Times New Roman at Envato Elements
If you’ve been wondering what font to pair with Times New Roman, hands down, sans serif fonts are the best. So when you need good sans serif fonts to pair with Times New Roman, Envato Elements should be your go-to resource. Elements offers thousands of premium mockups, graphic templates, logos, photos, fonts, and much more. And you can download as many of these digital assets as you like, as often as you like, for one low monthly fee.
Devina Rodent is a classic humanist sans serif font. This Times New Roman font pairing is classic and legible. Neither font competes with the other in terms of design. This pairing is suitable for branding, packaging design, and editorial design.
This grotesk style sans serif, Brulia Display, is an amazing variable font inspired by brutalist architecture. This is a good font to pair with Times New Roman due to its sophisticated personality.
Gayaku is a sans serif with a modern feel. The strokes have no contrast, and it has quite a corporate look. This is a good font to pair with Times New Roman if you’re looking for a unique solution.
This ultra-modern display font, Bermont, is bold, heavy, and has a strong character. This Times New Roman font pairing can look contemporary on an editorial design piece or for branding projects and flyers.
Monospace typefaces are good sans serif fonts to pair with Times New Roman. Bergen Sans is a clean monospace font with post-Bauhaus aesthetics. This pairing has high contrast in its shapes, making it look contemporary.
Bolgart is a geometric sans serif with a heavy setting. This stunning font creates a great variation against a serif font like Times New Roman. These are two fonts that complement each other due to their very different anatomy.
Bionzhe is similar to the previous example, but this font has more letterspace, and it’s slightly less heavy. This font pairing with Times New Roman can look strong and powerful. Bionzhe is a great balance to make Times New Roman less serious.
Sans serif fonts come in different widths and shapes. Fraset is slightly wider, and that makes it look like a fun and playful font. This is one of the best fonts to pair with Times New Roman due to its quirkiness.
Mathelo has a good balance between a geometric and humanist font. The characters have a less serious quality to them. If you’re looking for a font pairing with Times New Roman for a younger audience, Mathelo is a good option.
Argon is a new modern grotesk font based on 1950s Swiss minimalism. The characters possess a combination of sharp and rounded curves. For a functional look, Argon is a good sans serif font to pair with Times New Roman.
Arkibal Mono is inspired by old store signs from the 1830s. It’s the perfect balance of classic fonts with a modern twist. While this font is classified as a slab serif, it’s very different from a classic serif font. This Times New Roman font pairing is edgy and cool.
The best fonts to pair with Times New Roman are variable fonts, the ones that allow you to experiment more to get different looks. Agharti is a large family of almost 50 fonts with 7 different widths and weights. By mixing and matching all these options, you can get anything ranging from classic looks to something more edgy and contemporary.
Another versatile font pairing with Times New Roman is Neuething. This clean and simple font has been meticulously designed and refined. This font pairing can look modern and cool on branding and social media posts.
A modern look isn’t hard to create with Times New Roman. Montras is a modern sans serif font with bold strokes and fun details. This font pairing with Times New Roman is great for branding anything youth-related.
Ritola Sans is a sans serif font that pairs perfectly with Times New Roman. The font has heavy strokes that sometimes are contrasted with thin details for a fun look. This pairing is modern, legible, and can look powerful.
That’s It!
In this article, you learned about the best fonts to pair with Times New Roman. This classic font has been around for many, many decades. It’s the default font for many applications on desktop computers and one that we’ve seen on plenty of printed materials.
There are lots of sans serif fonts to pair with Times New Roman. Depending on the different sans serif fonts that complement each other, we can make the Times New Roman combo look classic, edgy, or contemporary. It’s such a versatile font! Which one was your favorite sans serif?
When you need fonts that complement each other in a ready-made combo, Envato Elements should be your go-to resource. Elements offers thousands of premium mockups, graphic templates, logos, photos, fonts, and much more. And you can download as many of these digital assets as you like, as often as you like, for one low monthly fee.
So you’re learning how to use Photoshop, you’re testing the tools, and suddenly „marching ants” appear—tiny lines moving rhythmically over the screen. They can be pretty annoying because after they’ve appeared, nothing works the way it used to. So you may be wondering how to get rid of marching ants in Photoshop.
You may also know very well what these moving lines are, and you have a different problem with them—how to hide marching ants in Photoshop, so that you can benefit from their presence without them covering a part of your picture.
In this short tutorial, I’ll answer both of these questions!
What You’ll Learn in This Marching Ants Photoshop Tutorial
What are marching ants in Photoshop?
How to get rid of marching ants in Photoshop
How to hide marching ants in Photoshop
What You’ll Need
You can use any photo for this tutorial, but if you like the picture of a cute ant that I’ve used, you can find it here:
In Photoshop, you may often want to select one area of the image and edit it separately from the rest—or remove that part, copy it to a different layer, etc. Marching ants indicate the border of that selected area. So to bring the ants onto the screen for the purpose of this tutorial, you can use any of the selection tools:
Here, I’ve used the Lasso Tool (L) to outline the head of the ant:
Now, I can use the Move Tool (V) to move the selected area somewhere else:
Or change the color of the head with the Hue/Saturation (Control-U) adjustment:
2. How to Get Rid of Marching Ants in Photoshop
OK, so you’ve edited your selected area, and now you want to get rid of the marching ants. How can you do it?
It’s very simple: go to Select > Deselect, or use the Control-D shortcut.
3. How to Hide Marching Ants in Photoshop
As you can see, the marching ants are very useful because they’re showing you which area has been selected. However, if you want to see what the image will look like after editing, these ants may stand in the way. So if you want to hide the marching ants without removing the selection, use the Control-H shortcut.
By hiding the borders of the selection area, you get a direct preview of your edits
Caution: always remember to deselect (Control-D) after editing, or make the ants come back by pressing Control-H again. Otherwise, the invisible selection will stay there, leading to a lot of confusion later.
Good Job!
Now you know how to get rid of marching ants in Photoshop, as well as how to temporarily hide them when needed.
Recommended Tutorials
If you liked this marching ants Photoshop tutorial, you may also enjoy our other tutorials for beginners:
Did you know that you can create multi-layered artwork in Adobe Illustrator, and then turn layers on and off in InDesign? Importing Illustrator files into InDesign isn’t as hard as you think. Learn how in this quick tutorial.
Work with multi-layered illustrations like this one on InDesign.
If you’re constantly working on Illustrator and InDesign projects, Envato Elements could be a great source of creative resources for you. You’ll find all kinds of graphic templates, vector illustrations, logos, and more. Once you learn how to convert your designs from Illustrator to InDesign, you’ll have more template alternatives to work with.
What You’ll Learn in This Tutorial on Multi-Layered Illustrator Artwork in InDesign
Wondering how to import Illustrator files into InDesign? You’ll discover that importing Illustrator files into InDesign is quite easy! Here’s what we’ll cover in this tutorial:
How to create artwork with multiple layers
How to open Illustrator files in InDesign
How to turn layers on and off to customize the illustration to match your design
Let’s get started!
1. How to Create Artwork With Multiple Layers
Step 1
Create some artwork in Adobe Illustrator that contains multiple layers. I’ve created a map that contains nine layers. Note that these are top-level layers. You cannot manipulate Illustrator sublayers in InDesign. The layers that are visible here are the layers that will be visible when the Illustrator file is placed in InDesign.
Be sure that all of your artwork fits on the Illustrator artboard. Any artwork that extends off the artboard will be cropped when the artwork is placed in InDesign.
Step 2
Adobe Illustrator AI format is the preferred format for importing Illustrator artwork into InDesign. AI format works better than EPS for a variety of reasons. You must use AI format if you wish to manipulate the Illustrator layers in InDesign.
Choose File > Save As. Choose Adobe Illustrator (AI) for the file format, and then click the Save button.
Fill in the Illustrator Options dialog as shown below, and then click the OK button. You can choose a later version of Illustrator, of course, but the Create PDF Compatible File option must be selected.
2. How to Open Illustrator Files in InDesign
Now, open an Illustrator file in InDesign. Choose File > Place. In the Place dialog box, check Show Import Options, then select the Illustrator file you saved in Step 2, and click the Open button.
A Place PDF dialog will appear on your screen. You may think, „Huh? I’m not placing a PDF, I’m placing an Illustrator (AI) file.” Actually, InDesign sees this AI file as a PDF file.
There are many powerful options for placing Illustrator artwork in the Place PDF dialog boxes. You can use the page selector to choose which page of an Illustrator file with multiple artboards should be placed. You can choose how to crop the image, and whether or not you want the image to have a transparent background.
For this tutorial, we’re primarily concerned with the Layers section of the dialog. In this section, you can choose which layers in the Illustrator file you’d like to have displayed or hidden in the InDesign file. Click on the eyeball icon to hide or display a layer. Click the OK button when you’re finished.
When you see the loaded graphics cursor in InDesign, click to place the Illustrator artwork in your InDesign layout. The Illustrator artwork should look just like it did in Illustrator, unless you changed the layer visibility above.
What if you want to change the visibility of Illustrator layers after the artwork is already on the page? You can do that too!
Use the Selection Tool (black arrow) in InDesign to select the placed Illustrator file, and choose Object > Object Layer Options. In the dialog box that appears, click on the eyeball icon next to a layer name to hide or display a layer.
Click the OK button, and the appearance of the artwork will change on the InDesign page.
You’re all set! Now you know how to import Illustrator files into InDesign. You could even convert your designs from Illustrator to InDesign.
Want to Learn More?
Are you just getting started with InDesign? Learning how to import files from Illustrator into InDesign is a good trick to have. Get some pro tutorials, tips, and tricks from the Envato Tuts+ YouTube channel. We highly recommend going for this InDesign for Beginners free course to get you started:
We also have useful tutorials and articles for you to dive into—not only Illustrator to InDesign tricks, but also a variety of beginner and advanced content. Take a look at this selection we’ve made for you:
This Illustrator into InDesign technique is extremely valuable for using several variations of artwork in different places, all by placing a single file.
Take your company logo, for example. You may have many variations, all stored as separate files: color, grayscale, with tagline, without tagline, etc. Instead, you could have all these variations as separate layers in a single Illustrator file. Then you can convert from Illustrator to InDesign and design more efficiently. Think about how this might affect your workflow…I’m convinced you will find a use for it!
Editorial Note: This post has been updated with contributions from Janila Castañeda. Janila is a staff writer with Envato Tuts+.
Check out the best cursive calligraphy fonts inspired by handwriting, calligraphy brushes, and much more.
In this article, we’ll answer the questions „What is a cursive font?” and „What is a calligraphy font?” These two words are often used interchangeably, and while there are similarities between these two styles, it’s important to know what they’re all about. Let’s take a look at their definitions and see some examples of awesome calligraphy cursive fonts!
The cursive style of font resembles the style that some of us learned in school. The purpose of this style is to write quickly and as legibly as possible, without lifting the pen off the paper. Therefore, all the letters are connected. Cursive fonts are simpler than calligraphy since there’s no stroke contrast.
What Is a Calligraphy Font?
The calligraphy style of fonts contains characters that use specific strokes. Both of these styles of fonts are usually based on real handwriting, but the pen and the construction of the calligraphic character are different. The purpose of calligraphy is different to the cursive style because in calligraphy, lifting up the pen is not a problem, and many different pens can be used. Fonts can be cursive and calligraphic at the same time, and vice versa.
Unlimited Cursive & Calligraphy Fonts at Envato Elements
When you need amazing calligraphy fonts, Envato Elements should be your go-to resource. Elements offers thousands of premium mockups, graphic templates, logos, photos, fonts, and much more. And you can download as many of these digital assets as you like, as often as you like, for one low monthly fee.
Vendetta is a cursive calligraphy font with an authentic handwritten style. The end strokes of the characters have a good balance of movement and a relaxed feel. This is a great font for branding, logos, and social media designs.
Saltacrus is a signature style font that’s modern, and you can sense the flow of the ink in each character. This calligraphy cursive font is great to enhance a photography studio’s branding or to use as a signature for a wedding invitation or a logo. It’s unique and full of energy.
This handwritten font can be used as a cursive calligraphy tattoo font, and it is legible and distinctive. The pack contains a large number of ligatures and punctuation. Use this sophisticated font for branding, wedding invitations, or cards.
If you’re looking for an energetic font, Southland letter is a great option. This calligraphy cursive alphabet font has signature-style ascendants, very tall and slim. The pack contains uppercase, lowercase, and numeral characters.
Add a modern touch to your design with Randelion. This calligraphy feminine cursive tattoo font is vibrant and loud. This font is suitable for social media posts, branding, and apparel design.
Cursive handwriting calligraphy fonts with high-quality line work are hard to come by. Edinburgh is a modern script font perfect for projects that need a feminine touch. Suitable for social media posts, branding, and posters.
This monoline font has cursive calligraphy font traits. Cursive fonts are based on pen strokes: a single line with no contrast. Falcon has a good balance of cursive and calligraphy style fonts.
Famtterna is a modern calligraphy cursive font. It has the intricacies of the calligraphy style and the fluidity of cursives. This font is suitable for wedding invitations, headers, and branding.
Winston Heyvante is a calligraphy cursive alphabet font with a decorative flair. It is suitable for wedding invitations, blog branding, and book covers. The pack contains multiple stylistic alternatives to elevate your designs.
This cursive handwriting calligraphy font is energetic but extremely legible. While it’s expressive, the characters have a high contrast in the strokes, which makes it look more elegant. Summit Foxes includes ligatures and alternates to mix up different characters and get different looks.
Pueriel is a vintage cursive calligraphy font with a traditional flair. If you’re looking at vintage-inspired fonts that can help you recreate objects and letters from that era, this is a great choice. Pueriel comes with over 200 glyphs that can help you create a natural vintage look.
Fragmentix is a font with very little contrast between the characters. Packed with tons of ligatures and alternates, this font is suitable for anything from book covers to movie titles. Mix it up with a serif or sans serif font to achieve an edgy look.
Butter Milky has plenty of calligraphy cursive alphabet font alternates that make it suitable for multiple design projects. This handwritten style is very vintage from the 50s and 60s. It can add a nice touch to vintage-inspired projects.
If you’re looking for an expressive cursive calligraphy font, Maistoray is a stunning choice. This font is suitable for brand design, book covers, and social media. The strokes resemble a flat ribbon moving in the air, and the font has a beautiful air of elegance.
Herittage is a signature-style cursive font. It’s versatile and suitable for a wide range of projects, from posters to wedding invitations and branding. The strokes on the font have a relaxed look, perfect for vacation-themed projects.
Asterika is a handwritten cursive calligraphy font with elegant curves. The font has a heavy ink look, and the curves flow nicely. This script font is suitable for wedding invitations, social media, and packaging.
If you’re looking for a looser and more organic font, Matterlyse can get the job done. This font is suitable for print projects as well as websites. Use it for branding, social media posts, and book covers.
Ronatalia is a romantic font that resembles cursive calligraphy fonts. The characters have a high contrast between the strokes and look expertly crafted. This font is suitable for social media posts, branding, and personal projects.
If you’re looking for the ultimate high-end elegance, Blanchard is a regal option. This font is calligraphy oriented, expertly made, and looks expensive. It’s suitable for brand design for high-end brands, social media, and invitation cards.
Gillbert Hittola is an easygoing font that communicates fun and stability. It’s one of the fonts that, regardless of its application, can be classic and confident. Gillbert Hittola is suitable for printed designs, branding, and posters.
Ametta is an elegant and fashionable cursive calligraphy font. The energetic characters are great for projects that require a great deal of personality. The pack comes with alternate characters and ligatures to make every word special.
If you’re looking for a sharp, elegant, and all-around regal font, Ranlikha is all that. The characters have beautiful swirls that also look romantic. Mix this font with a serif to get a classic look suitable for restaurant branding.
Malliandra is a calligraphy feminine cursive tattoo font inspired by handwriting. This font is also suitable for wedding invitations, packaging design, labels, and book covers. The pack contains multilingual options and many beautiful swashes and ligatures.
If you’re looking for a more formal old style of calligraphic cursive font, Ofinitti is inspired by real brush strokes. The brush strokes look realistic, and the character shapes are clean. This font is suitable for branding and quotes.
Mattinha is a font with strokes that look heavily inked. This is a nice touch if you’re going for a handmade look in your design projects. Pair it with a sans serif font for a modern look in your wedding invitations.
Fonts created with a flat pen can give off a very classic look. Kidnatting is a good-looking font with characters that look energetic. The strokes change in thickness the same way real handwriting does.
Sellicite is a modern handwritten font using a thin stroke that almost looks monoline. The low contrast in the strokes keeps the font subdued and classic. Sellicite is suitable for enhancing and accompanying sans serif fonts.
Another monoline font that comes in a signature style is Breaket. This font is wider than it is tall, and the counters inside some of the vowels are non-existent. This last feature helps enhance that signature style. Breaket is suitable for invitations, brand design, and quote posters.
Hellow Script is a feminine-style cursive calligraphy font. The characters feature elegant swirly strokes that enhance the girly look. This font is suitable for brand design, packaging, and book covers.
If you’re looking for a true handwritten cursive font, Marina Bullock is a great option. This authentic handwriting font is great for projects that need a human touch and an organic look. The pack comes with a variation of glyphs to achieve an even more natural look.
Lenteras is a thick monoline cursive font that resembles the style of middle-school handwriting. Since the stroke is thicker than most monoline fonts, Lenteras looks fun, laidback, and young. This font is suitable for book covers, movie posters, and social media.
This cursive calligraphic font, Qitamesa, is inspired by brushes, with a slight contrast between the strokes. Use this modern script font on business cards, brand design, and posters.
Kaytha is a romantic monoline font with simple strokes. This cursive calligraphy style font features swirls at the end of each character, which makes it look modern and stylish. The pack comes with many stylistic sets, swashes, and ligatures to customize the characters as much as you would like.
Questario is a stylish script font inspired by brush calligraphy. The font is edgy, modern, and gives out a confident personality. Questario is suitable for branding, social media, and posters.
If you’re looking for a classic yet impactful font, Kiramba brings those two attributes to the table. The contrast between the strokes is high, and the swashes on the strokes have a tear-shaped end, which adds a contemporary feel. The font is suitable for stationery, invitations, and logos.
Brush pen calligraphy has been around for a while, but never in the high quality in which Azkia is presented. This script font was based on real analog sketches and later redrawn on a computer. The pack contains 1,200 glyphs, more than enough to bring variation and uniqueness to your design projects.
If you’re looking for an elementary school feel, Lazy Ride is a cool font for that. This cursive calligraphy font started out as a logo and is now extended into a font. With more than 670 glyphs, Lazy Ride can cover anything from brand design to quotes and posters.
Fanland is a cursive calligraphy font with an elegant touch. It’s romantic, classy, and beautiful, perfect for a wedding invitation. The pack comes with multiple stylistic sets to make the characters just different enough that they look handwritten.
A feminine font like Ashfall is perfect for projects that need a feminine touch. Suitable for branding for restaurants, flower shops, and skincare brands, Ashfall features a smooth texture and beautifully balanced characters.
If you’re on the lookout for an elegant font, Moranhill is the perfect cursive calligraphy font. It has a low contrast in the strokes and gives off stability and class. The pack contains many ligatures and stylistic alternates.
Raffiator is a modern, smooth, and classic font, with simple lines. The font features a high contrast in the strokes and slightly open counters, making it look handwritten. Raffiator is suitable for wedding invitations, newsletters, and book covers.
Metalurdo is an elegant cursive calligraphy font with style. This font has a classic look that can make any project travel back in time. Metalurdo is suitable for product labels, wedding invitations, and social media posts.
Donatellia is a font that exudes luxury, perfect for high-end branding projects. The font features beautiful lines that make it look like a true handwritten font. The tear shape at the end of the strokes resembles pooling ink, enhancing the handwritten effect even more.
Playlist is an energetic, dramatic, and stylish font. Made with modern calligraphy in mind, this handwritten style font features characters that look true to real handwriting. Playlist is suitable for any music-related projects, band logos, merchandising, and poster design.
Bellanaisa is a modern calligraphic font featuring a high contrast in the strokes. Dramatic, classic, and fresh, this font is great for book cover designs, wedding invitations, and letterpress style posters. The pack contains multiple language support and many stylistic alternates.
That’s It!
Now that you know the differences and similarities between cursive and calligraphy fonts, you’re ready to explore. Which one of these fonts was your favorite?
And remember, when you need cursive handwriting calligraphy fonts, Envato Elements should be your go-to resource. Elements offers thousands of premium mockups, graphic templates, logos, photos, fonts, and much more. And you can download as many of these digital assets as you like, as often as you like, for one low monthly fee.
