Tag: Styles

How to put variable fonts to work in WordPress

Variable fonts make it easier to design websites. After all, they offer a more flexible and efficient way to handle typography. And with the introduction of WordPress 6.5, leveraging these fonts has become easier than ever thanks to the new Font Library feature.  Whether you’re a professional developer or a DIY website owner, understanding how… Continue reading How to put variable fonts to work in WordPress

Affinity Designer Quick Start Course

What is Affinity Designer? It’s an award-winning graphics application with tons of possibilities. Learn how to use Affinity Designer in this quick start course. Watch the Full Affinity Designer Quick Start Course What You’ll Learn What is Affinity Designer? How to use Affinity Designer Features like Affinity Designer brushes, tools, shapes, and more… Continue reading Affinity Designer Quick Start Course

Create Beautiful Scrolling Animations With the CSS Clip-Path Property

In a previous tutorial, we learned how to create a grayscale-to-color effect on scroll. To implement it, we took advantage of modern front-end features like CSS Grid, the clip-path property, and the Intersection Observer API. Today, we’ll use these tools and the knowledge gained from that tutorial to build another cool scroll effect. As we scroll, page… Continue reading Create Beautiful Scrolling Animations With the CSS Clip-Path Property

26 Best Annual Report Brochure Templates For 2020

28 Shares Creative 2020 Annual Report Templates brochures for business profile, annual report 2020, agency brochure or company brief. Annual report brochure templates are very clean and elegant. Create your company’s documentation quick and easy. These templates comes with paragraph and character styles, swatches, styles for your spreadsheet / financial info, block quotes, key figures… Continue reading 26 Best Annual Report Brochure Templates For 2020

17 Open Source Fonts You’ll Actually Love

The right typeface can make or break your website. As designers, we will always be naturally drawn towards the premium fonts such as Circular, DIN, or Maison Neue; Before you know it, your website is racking up a font bill larger than your hosting bill. We’ve put together a list of open-source fonts that will… Continue reading 17 Open Source Fonts You’ll Actually Love

How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)

In this new tutorial, we’ll start with some grayscale images and learn how to smoothly reveal their colored variants on scroll. To achieve the desired effect, we’re going to take advantage of different modern front-end features like CSS Grid, the clip-path property, and the Intersection Observer API. Our Grayscale to Color Effect Without further intro, let’s check… Continue reading How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)

How to Build a Simple Toggle Switch Component With the CSS Checkbox Hack

In this short tutorial, we’ll learn how to build a CSS-only switch component by taking advantage of the “CSS checkbox hack technique”. Along the way, we’ll also look at other switch implementations on Codepen. Sound like a good challenge? Our Switch Component Here’s what we’ll be building during this tutorial–a simple todo checklist: For design… Continue reading How to Build a Simple Toggle Switch Component With the CSS Checkbox Hack

Create a Contact Form in WordPress Using a Free Plugin

Today, we’re going to discuss the Formidable Forms plugin for WordPress, which allows you to create different kinds of forms easily. Specifically, we’ll look at how you could use this plugin to build a contact form for your site. We’ll start by exploring the basic settings provided by this plugin, and later on, we’ll go… Continue reading Create a Contact Form in WordPress Using a Free Plugin

WordPress Gutenberg Block API: Creating Custom Blocks

The new WordPress editor (codenamed Gutenberg) is due for release in version 5.0. Now is the perfect time to get to grips with it before it lands in WordPress core. In this series, I’m showing you how to work with the Block API and create your very own content blocks which you can use to build… Continue reading WordPress Gutenberg Block API: Creating Custom Blocks

Getting Started with Chrome Developer Tools: Inspect Element

Google Chrome is one of the best consumer browsers on the market, but it also contains a number of powerful developer tools. We can reveal some of these tools with Chrome’s Inspect Element (or “Inspect”) tool. This developer tool provides insight into how websites are constructed and styled, and it can help you debug your own… Continue reading Getting Started with Chrome Developer Tools: Inspect Element

10 Fresh Icon Designs For Free Download

  ADVERTISEMENT Another amazing and creative collection of 10 latest, trendy and stylish icon designs are presented here only for your inspiration and free download. All these wonderful and superb icon designs are presented in high quality and are free so you can easily download your favorite icon design without paying any cost. Now you do… Continue reading 10 Fresh Icon Designs For Free Download

Add Gold/Silver Effects in One Click

Add Gold/Silver Effects in One Click 5.00/5 (100.00%) 3 votes Download this free set of Gold and Silver textures by SparkleStock. These Photoshop styles let you add gold/silver/rose-gold textures to your layer in one click. They’re a great way to make text look fancy without doing much. Examples How to Use After downloading the file, extract the… Continue reading Add Gold/Silver Effects in One Click

Notification Styles with CSS Animations for Inspirations

There are some simple ideas and effects for unobtrusive website notifications. There are a lot of ways to show an unobtrusive message to a user: from the classic growl-like notification to a bar at the top of the viewport. There’s really no limit to making creative notification styles and effects but you should keep in… Continue reading Notification Styles with CSS Animations for Inspirations

Quick Tip: How to Create a Metallic Text Effect Using Layer Styles in Photoshop

In this tutorial, we will explain how to create a metallic text effect using layer styles in Photoshop. Let’s get started! Tutorial Assets The following assets were used during the production of this tutorial. Strasua Font Black Pattern Step 1 First of all install the .pat file named black_pattern_by_fluctuemos-d5mermc.pat. You have to double click the… Continue reading Quick Tip: How to Create a Metallic Text Effect Using Layer Styles in Photoshop