EDITS.WS

Tag: css

  • How to Add Drop Caps in WordPress Posts

    Are you looking for a way to add drop caps in WordPress?

    Drop caps are a great way to start a paragraph. By having a large first letter, they can help you to capture your reader’s attention and get them interested in reading your content.

    In this article, we’ll show you how to easily add drop caps in WordPress posts.

    How to add drop caps in WordPress posts

    What is a Drop Cap?

    A drop cap is a styling technique commonly used in print books and magazines that feature longer reads. The first letter of the starting paragraph in each chapter uses a large font size.

    Normally the large capital letter extends downwards to drop below the first few lines, which is why it’s called a “drop cap.”

    Drop cap

    Adding drop caps helps your content to stand out and catch your visitor’s attention. They add a more formal and traditional touch to your site’s design.

    There are several ways to add drop caps to a WordPress website. You can use the built-in option in the WordPress block editor or use a plugin.

    That being said, let’s see how you can easily add drop caps in WordPress posts using different methods.

    Feel free to click the links below to jump ahead to your preferred method:

    Method 1. Add Drop Caps Using the WordPress Block Editor

    This method is recommended for all users as it comes default in the WordPress block editor. While it works, you have to manually do it for each post. If you’re looking for automatic method, skip to method 2.

    First, head over to the Posts » Add New page from the WordPress admin dashboard.

    Now, simply click the ‘Add Block’ (+) button at the top left corner of the screen.

    After that, simply locate and click the paragraph block to add it to your post.

    add paragraph block to post

    Next, you need to open up the Block Settings Panel in the right column.

    Once you do that, head over to the ‘Typography’ section and click the three-dot icon beside it to open up typography options.

    Next, you need to select the ‘Drop Cap’ option from the list to add it to your ‘Typography’ section.

    Enable drop cap under Typography

    Once the drop cap feature has been added, simply toggle the switch next to the ‘Drop Cap’ option to show a large initial letter at the start of a paragraph.

    Don’t forget to click the ‘Save Draft’ or ‘Publish’ button at the top to save your changes.

    Toggle drop cap switch

    You have now successfully added a drop cap to your post.

    This is how it looked on our demo site.

    Drop cap preview

    Note that the built-in drop caps option in the block editor will use your WordPress theme’s styling for the color, font, and size of the first letter.

    If you want to change the style of your drop caps in the WordPress block editor, then you’ll have to use custom CSS code to style your drop cap.

    Method 2. Add Drop Caps Using CSS Code

    For this method, we will be adding custom CSS code to automatically add drop caps to the first paragraph of each post. You can either add the CSS code to your theme’s stylesheets or use a code snippet plugin.

    We recommend using WPCode, the #1 code snippet plugin used by over 1,000,000 sites across the globe. It makes it super easy to add code to your site without any hassle.

    First, you need to install and activate the free WPCode plugin. For more instructions, see our guide on how to install a WordPress plugin.

    Upon activation, you need to visit the Code Snippets » +Add Snippets page from the WordPress admin sidebar.

    From here, you need to hover your mouse over the ‘Add Your Custom Code (New Snippet)’ option.

    This will reveal the ‘Use Snippet’ button that you need to click.

    Add new snippet

    Now that you’re on the ‘Create Custom Snippet’ page, start by entering a title for your code snippet. It can be anything that will help you identify the snippet.

    After that, you need to select ‘CSS Snippet’ as the ‘Code Type’ from the dropdown menu on the right.

    Select CSS Snippet as code type

    Next, simply copy and paste the following code in the ‘Code Preview’ box.

    <style type="text/css">
.entry-content p:first-child:first-of-type:first-letter {
    font-size: 85px;
    line-height: 1;
    padding-top: 0px;
    padding-right: 10px;
    padding-left: 4px;
    color: #000080;
    float: left;
    font-family: 'Tangerine', serif;
    text-shadow: 4px 4px 4px #aaa;
</style>
}

    This is how your code will look once you paste it into the ‘Code Preview’.

    Code preview for drop caps code

    Now, you need to scroll down to the insertion section and select the ‘Auto Insert’ method if you want to execute the code all over your site.

    You can use the ‘Shortcode’ method if you only want to add drop caps to specific posts.

    Once you save the snippet, you’ll be given a shortcode that you can paste into the block editor of the posts where you want to add drop caps.

    Choose an insertion method

    After that, head back to the top of the page and toggle the switch to ‘Active.

    Finally, click on the ‘Save Snippet’ button.

    Save Drop Caps snippet

    Your CSS code snippet will now be live on your site.

    This is how the drop caps looked on our demo site using the CSS snippet above.

    Custom code preview

    Method 3. Add Drop Caps Using a Plugin

    If you are hesitant to add custom CSS, then you can also add drop caps using the Initial Letter plugin.

    This plugin also allows you to change the size, color, and font of the drop caps.

    Note: Keep in mind that the Initial Letter plugin hasn’t been tested with the latest version of WordPress and is no longer maintained by the developer.

    However, we tested the plugin and it works fine. If you’re still unsure, take a look at our article on outdated plugins.

    That being said, first, you need to install and activate the Initial Letter plugin. For more instructions, check our guide on how to install a WordPress plugin.

    Upon activation, navigate to the Settings » Initial Letter page from the admin sidebar.

    From here, you need to configure settings for drop caps.

    First, you need to select if you want drop caps to be automatically applied to new posts.

    Simply choose ‘Yes’ or ‘No’ from the dropdown menu next to the ‘Default for Posts’ option.

    Next, you need to choose your preferred font, color, size, and padding for drop caps.

    Note: You may need to come back to the settings after previewing your website to adjust these styling options.

    Configure settings for the Initial Letter plugin

    After that, check the box next to the ‘Enable for excerpts’ option if you want drop caps to be enabled for post excerpts.

    You can also check the box next to the ‘First Paragraph Only’ option if you only want drop caps to be added to the first paragraph of your post.

    Click on Save Changes button

    Finally, don’t forget to click the ‘Save Changes’ button to store your settings.

    You can now visit any post on your website and you’ll see drop caps in action on the first paragraph of your post.

    Drop cap plugin preview

    If you want to remove drop caps for a post, you can also do that by opening the post in the block editor.

    Once there, scroll down to the ‘Initial Letter’ section and select the ‘No’ option from the dropdown menu.

    This will disable the drop caps for that post.

    Disable drop caps from a post

    We hope this article helped you learn how to add drop caps in WordPress posts. You may also want to check out our guide on how to check if your WordPress posts are ranking for the right keywords and our top picks for the best block-based WordPress themes for your site.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Add Drop Caps in WordPress Posts first appeared on WPBeginner.

  • How to Fade Images on Mouseover in WordPress (Simple & Easy)

    Do you want to fade images on mouseover in WordPress?

    A simple fade-in or fade-out animation when a user moves their mouse over an image can make your site more engaging. It also encourages visitors to interact with your content, which can keep them on your site for longer.

    In this article, we’ll show you how to add a fade image effect on mouseover in WordPress.

    How to fade images on mouseover in WordPress

    Why Fade Images on Mouseover in WordPress?

    Animations are an easy way to make your website more interesting, and can even draw the visitor’s attention toward your page’s most important content, such as your website logo or a call to action.

    There are lots of different ways to use CSS animations in WordPress, but adding a hover effect to images is particularly effective. The fade animation means your images will slowly appear or disappear when visitors hover over them.

    Adding a fade animation to WordPress

    This encourages people to interact with your images, and can even add a storytelling element to the page. For example, different images might fade in and out as the visitor moves around the page.

    Unlike some other animations, the fade image on mouseover effect is subtle so it won’t negatively impact the visitor’s reading experience or any image optimization you’ve done.

    With that said, let’s show you how to add a fade to your images on mouseover in WordPress.

    Adding Image Fade on Mouseover to all WordPress Images

    The easiest way to add a fade effect to all your images is by using WPCode. This free plugin allows you to easily add custom code in WordPress without having to edit your theme files.

    With WPCode, even beginners can edit their website’s code without risking mistakes and typos that can cause many common WordPress errors.

    The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Upon activation, head over to Code Snippets » Add Snippet.

    Adding custom code to your WordPress website with WPCode

    Here, simply hover your mouse over ‘Add Your Custom Code.’

    When it appears, click on ‘Use snippet.’

    Creating a custom CSS snippet on your WordPress website

    To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

    We need to add custom CSS to WordPress, so open the ‘Code Type’ dropdown and select ‘CSS Snippet.’

    Add a fade on mouseover animation to images using WPCode

    In the code editor, add the following code snippet:

    .post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

    This code snippet will fade each image for 2 seconds when the user hovers their mouse over it. To make the image fade slower, simply replace ‘2s ease’ with a higher number. If you want to make the picture fade faster, then use ‘1s ease’ or smaller.

    You can also make the ‘opacity’ higher or lower by changing the opacity:0.6 line.

    If you change any of these numbers then make sure you change them across all the properties (webkit, moz, ms, and o), so the fade effect looks the same on every browser.

    When you’re happy with the snippet, scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.

    To add a fade effect to all your images, click on ‘Auto Insert.’ Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

    Inserting custom CSS across your WordPress website

    After that, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle, so it changes to ‘Active.’

    Finally, click on ‘Save Snippet’ to make the CSS snippet live.

    Adding a fade effect to images using CSS

    Now, if you hover the mouse over any image on your WordPress website, you’ll see the fade effect in action.

    Adding Image Fade Animations to Individual Pages

    Using a fade effect for every single image can become distracting, especially if you’re running a photography website, a stock photo store, or any other site that has lots of images.

    With that in mind, you may want to use fade effects on a specific page or post only.

    The good news is that WPCode allows you to create custom shortcodes. You can place this shortcode on any page, and WordPress will show fade effects on that page only.

    To do this, simply create a custom code snippet and add the fade animation code following the same process described above. Then, click on the ‘Save snippet’ button.

    Fade images on mouseover in WordPress using custom code

    After that, scroll to the ‘Insertion’ section, but this time select ‘Shortcode.’

    This creates a shortcode that you can add to any page, post, or widget-ready area.

    Creating a shortcode in WPCode

    After that, go ahead and make the snippet live following the same process described above.

    You can now go to any page, post, or widget-ready area and create a new ‘Shortcode’ block. Then, simply paste the WPCode shortcode into that block.

    How to create fade animations for images using shortcode

    For more information on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

    With that done, either click on the ‘Update’ or ‘Publish’ button to make the shortcode live. You can then visit that page, page, or widget-ready area to see the fade on mouseover effect.

    Adding Image Fade Animations to Featured Images

    Another option is to add fade animations to your featured images or post thumbnails. These are the post’s primary image and they often appear next to the heading on your home page, archive pages, and other important areas of your website.

    By fading featured images on mouseover, you can make your site more eye-catching and engaging, without animating every single image across your WordPress blog or website.

    To add a fade animation to your post thumbnails, simply create a new custom code snippet following the same process described above.

    Adding a fade on mouseover effect to individual images

    However, this time add the following code to the editor: 

    img.wp-post-image:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

    After that, scroll to the ‘Insertion’ box and select ‘Auto Insert.’ Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

    Adding an animation to images on mouseover

    After that, you can go ahead and make the code snippet live using the same process described above.

    Now, you can hover the mouse over any featured image to see the fade animation in action.

    If you want to add even more image mouseover effects, then see our guide on how to add image hover effects in WordPress.

    Bonus: Animate Any Image, Text, Button, and More

    Fade effects are a fun way to make images more interesting, but there are lots more ways to use animations in WordPress. For example, you might use flipbox animations to reveal text when a visitor hovers over an image, or use zoom effects so users can explore a picture in more detail.

    If you want to try different effects, then SeedProd has over 40 animations that you can add to images, text, buttons, videos, and more. You can even animate entire sections and columns with just a few clicks.

    Inside the SeedProd editor, simply click on the content you want to animate, and then select the ‘Advanced’ tab in the left-hand menu.

    Adding fade animations using SeedProd

    You can then go ahead and click to expand the ‘Animation Effects’ section.

    After that, simply choose an animation from the ‘Entrance Animation’ dropdown, including a wide range of different fade effects.

    Adding animations to WordPress using SeedProd

    For more information, please see our guide on how to create a landing page with WordPress.

    We hope this article helped you learn how to fade images on mouseover in WordPress. You may also want to see our guide on how to choose the best web design software, and our expert picks of the best WordPress popup plugins.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Fade Images on Mouseover in WordPress (Simple & Easy) first appeared on WPBeginner.

  • CSS Hero the Live WordPress Theme Editor

    For any WordPress designer, CSS Hero has an enormous amount of value. Even if you know CSS like the back of your hand, using the CSS Hero editor will make your site editing amazingly efficient.

    The post “CSS Hero the Live WordPress Theme Editor” first appeared on WP Mayor.

  • How to Use CSS Breakpoints for Responsive Design, Most Common Media Breakpoints + Tips

    CSS breakpoints are values that determine how a website looks on different screen sizes. When visitors’ devices reach their breakpoints, the website content responds and adjusts accordingly.  These breakpoints, together with CSS media queries, are responsible for a responsive website design. In short, they make your website look proportional when viewed on a different screen […]

    Read More…

    The post How to Use CSS Breakpoints for Responsive Design, Most Common Media Breakpoints + Tips appeared first on Hostinger Tutorials.

  • How To Change Menu Font Size In WordPress

    To change the font size of the menu on a WordPress website using CSS, you can use the following steps:

    1. Log in to your WordPress dashboard.

    2. Go to Appearance > Customize.

    3. Click on Additional CSS.

    4. Add the following code to change the font size of the menu:

    #site-navigation a {
    font-size: 20px;
}

    5. Click on the Publish button to save the changes.

    Note that the CSS selector “#site-navigation a” targets the links within the element with an ID of “site-navigation”. You may need to adjust the CSS selector to target the specific menu on your website, you can use browser’s developer tools to inspect the menu and find the right selector.

  • Blending Modes: A Complete Guide for Graphic and Web Design

    Blending modes are a great way to digitally enhance your images and designs. There are several ways to use blend modes as a graphic designer (using design software) or as a web designer (using CSS or Divi). In this post, we’re going to cover everything you need to know about blend modes including a detailed breakdown of each, as well as how to use them in Photoshop and on your website.

    We’ll cover:

    How Blending Modes Work
    Blending Mode Descriptions
    How to Use Photoshop Blend Modes
    CSS Blend Modes for Web Design
    Blend Modes Using Divi

    And there’s more. Let’s jump in!

    What is a Blending Mode?

    A blending mode is a mathematical equation that defines how pixels will blend together when two or more layers of pixels are combined. Although the algorithms behind blend modes are complex, they are quite easy to work with using design tools or photo editing software like Photoshop. With this kind of software, designers are able to blend layers (photos, colors, text) together in creative ways for unique designs in a few clicks. You can blend together any number of layer combinations. But, at minimum, to accomplish a blend mode effect, you will need at least two layers: a base layer and a blend layer.

    How do Blending Modes Work?

    Blending modes combine a base layer with a blend layer to achieve different effects. Each effect (or mode) uses a mathematical equation that combines red, green, and blue (RGB) or cyan, magenta, yellow, and black (CMYK) color codes with levels of dark and light to create multi-layered effects. For most blend modes, opacity is needed to bring out the blending effect. You can use blending modes to apply color overlays to images, blend images together, manipulate color levels on photos, and much more.

    Blend layers explained

    As an example, let’s take a look at combining two layers and applying Multiply. Using a photo layer as the base layer, and a gradient with colors #ff0f0f and #4a00e8 as the blend layer, the resulting image appears darkened and takes on the appearance of the gradient colors.

    Gradient top layer with multiply

    For them to work, there have to be at least two layers. Each option produces different results depending on the mode chosen. It breaks down like this. First, the base layer is the original color or image. Next, the blend layer applies directly to the base layer using a specific mode. The result is a blend of the two layers, which alters the colors to reveal an image with a completely altered appearance.

    Introduction to Photoshop Blending Modes

    There are 27+ blend modes in Photoshop. Some are used to adjust opacity, while others darken the appearance of photos and designs. There are also blending modes that will lighten images, while others work simply to adjust contrast.

    Opacity vs. Fill with Blend Modes

    It’s important to note that while blending modes work mostly with adjusting opacity levels, there are 8 special blending modes that work best when adjusting the fill value (or percentage). For example, when combining a base photo layer with a solid color blend layer using Hard Mix, you can see that adjusting the fill value of the blend layer to 50% has a more pleasing effect than adjusting the opacity to 50%.

    hard mix examples

    In addition to hard mix, the remaining special eight blending modes are color burn, linear burn, color dodge, linear dodge (add), vivid light, linear light, and difference.

    Blending Mode Descriptions

    In Photoshop, each blending mode is categorized by type (normal, subtractive, additive, contrast, comparative and composite). Here is a list explaining each blending mode and how they can be used.

    Normal

    This category contains normal and dissolve blend modes. In this category, blend layer opacities will need to be adjusted for any effects to be noticeable.

    Normal

    Normal

    This is the default mode in Photoshop. It requires adjustments to opacity for any noticeable difference in your images. When 100% opacity is applied, the blend layer completely blocks the base layer. In our example, you can see that there is no visible image beneath our image, color, or gradient.

    Dissolve

    Dissolve blending mode

    Dissolve takes pixel colors from the base layer and paints over pixel colors in the blend layer (seemingly at random) to produce a uniquely pixelated blending result. As with the normal mode, adjusting opacity is the only way to achieve a visual difference in images and designs. In our example, we show the dissolve mode with 75% opacity applied to our blend layers to create a dither pattern.

    Additive

    As the name suggests, these blending modes will add dark tones to your images and designs. The additive category contains darken, multiply, color burn, and darker color.

    Darken

    Darken

    Darken compares the pixels of the base layer with the blend layer, then selects the darkest pixels to give the layer a darkened appearance. In our example, you can see the image darkens with a photo, color, or gradient overlay using this mode.

    Multiply

    Multiply blending mode

    This is one of the most commonly used blending modes in Photoshop. It works by multiplying the colors in the base layer with the blend layer. This results in an image with a darkened appearance. Any whites in the layers are untouched, while darker tones appear much darker than the original photo or design.

    Color Burn

    color burn

    Similar to multiply, Color Burn increases contrast to darken the base layer colors before blending it with blend layer colors. Blending with white colors doesn’t change the appearance of images at all. While color burn is similar to the multiply blending mode, it makes images much darker.

    Linear Burn

    linear burn blending mode

    Similar to Color Burn, this “burn” effect is created by lowering brightness of the base layer colors before blending with the blend layer colors. The results make the base layer much darker without affecting the white pixels in the layer.

    Darker Color

    darker color blending mode

    Darker Color compares the image layer’s pixels with the pixels of the blend layer, then it shows the lower value color. Unlike Darken, Darker Color doesn’t create a third color because it actually chooses the lowest color values from both base and blend layers. In our example, you can see that the browns from our image layer are the darkest, so it stands out much more than the blue color from our blend layer.

    Subtractive (Lighter Blend Modes):

    Subtractive blending modes will give your images and designs a lighter appearance because they subtract light (or light color tones) when blending the layers. The Subtractive category contains light, screen, color dodge, linear dodge (add), and lighter color.

    Lighten

    lighten

    This will select the lightest color of the two layers to replace pixels that are darker than the blend layer without changing pixels that are lighter than the blend layer.

    Screen

    This mode selects the inverse of the blend and base layers, then multiplies it to create a lighter appearance. Black and white colors stay the same.

    Color Dodge

    color dodge

    This mode brightens the base layer while decreasing contrast between both the base and blend layers. Black color stays the same.

    Linear Dodge (Add)

    linear dodge blending mode

    This will brighten the base layer to reflect the blend layer while increasing brightness. Black stays the same.

    Lighter Color

    Similar to lighten, lighter compares the base and blend layers, then keeps the lighter of the two. The difference between lighten and lighter color is the fact that lighter color looks at RGB channels as a whole, while lighten looks at the individual channels to complete the blend.

    Contrast

    These blending modes create different effects using contrast and are based on whether the base or blend layer has a color lighter than 50% gray. This category contains overlay, soft light, hard light, vivid light, linear light, pin light, and hard mix.

    Overlay

    overlay

    One of the most commonly used modes, overlay basically uses the screen mode at 50% strengh on colors brighter than gray. Basically, dark tones shift mid-tones to become darker, and light tones shift the mid-tones to create lighter colors.

    Soft Light

    soft light

    Similar to overlay, soft light applies either a darker or lighter effect depending on the light values in an image or color, but in a more subtle appearance.

    Hard Light

    hard light blending mode

    By combining multiply and screen, hard light uses brightness in the blend layer to calculate its result. Usually, it’s best to reduce the opacity of the blend layer when using hard light to get good results.

    Vivid Light

    vivid light blending mode

    50% gray gets darkened, yet anything lighter than 50% is lightened. Vivid light is one of the special 8, which makes it blend differently based on whether you adjust the fill or opacity.

    Linear Light

    linear light

    Another member of the special 8, linear light combines the effects of linear dodge (add) on lighter pixels, and linear burn on darker ones.

    Pin Light

    pin light

    This mode combines a dark and light blend at the same time. It will remove all mid-tones in your image. Adjusting the opacity can produce wildly different results.

    Hard Mix

    hard mix blending mode

    Hard mix works by adding the value of each RGB channel from the blend layer to the matching RGB layers of the base layer. The appearance of hard light results in loss of color with the exception of black, white, gray, or RGB and CMYK.

    Comparative

    These create variations in color based on the values of the blend layer and the base layer. Difference, exclusion, subtract, and divide are included.

    Difference

    difference

    The difference mode takes the information in each color channel and either subtracts the blend layer from the base layer or the base layer from the blend layer. The outcome depends on which of the two layers is brighter. Black colors produce no changes.

    Exclusion

    exclusion

    Exclusion is similar to the difference blending mode, but lowers contrast. If you blend with white, the base layer becomes inverted. However, black colors do not change.

    Subtract

    subtract

    This mode will look at all color channels, then remove the blend layer’s colors from the base layer.

    Divide

    divide blending mode

    This takes a look at all of the color channels, then divides the blend layer from the base layer.

    Composite Blend Modes:

    This category works to alter color quality. It uses a combination of white, along with primary colors such as red, green, blue (RGB), and cyan, magenta, yellow, and black (CMYK) to create the blending mode.

    Hue

    hue blending mode

    Hue works by forcing colors in the base layer to be recolored with the hue of the blend layer. Basically, it keeps all dark colors dark, and all light colors light, but only replaces the hue of the blend layer. In our example, you can see that the lightest colors in the image of trees (minus the whites) is turned into the hue of the blue in our blend color layer.

    Saturation

    saturation

    For saturation, the results are similar to hue except the saturation in images is affected. The lightest color and hue in the base layer stays the same, while the saturation is replaced with the blend color.

    Color

    color blending mode

    Color works much like hue except that it keeps only the lightest of the base layers colors. It then adds the hue and saturation of the blend layer. In our example, you can see that the solid colors lighter tones are replaced with the blue. Similarly, the lighter colors in our 3rd example are replaced with the red and blue gradient colors of the blend layer.

    Luminosity

    luminosity

    Luminosity is the opposite of color. It manages to maintain both the hue and saturation in the base photo layer of our example, while replacing it’s lightest colors (luminosity) with the blend layer’s colors.

    Other Blend Modes

    In addition to the 27 layer blend modes listed, there are a few additional ones available in certain situations, or with certain tools. For example, Behind can be used to edit or paint withing the transparent part of a layer. It will only work in layers where lock transparency isn’t selected. Clear is only available when using the shape, paint bucket, brush, pencil tools, as well as the fill and stroke commands. It’s used to edit or paint each pixel to make it transparent.

    How to Use Photoshop Blending Modes

    When working in Photoshop, blending modes can be located in two areas. The first is within the layers panel. To access blending modes, click the drop down menu under Layers.

    Photoshop layers panel

    From there you have layer 27 blending mode options to choose from.

    Photoshop layer blending modes

    The special 8 blending modes have an additional way to be accessed. In layer styles, you can uncheck the transparency shape layer checkbox. This gives you an additional level of blending capabilities. To access this, click the fx option at the bottom of the layers panel.

    Photoshop FX layers panel

    Next, choose blending options from the dropdown menu.

    blending options

    Finally, uncheck the transparency shapes layer.

    transparency shapes layer

    Creating a Simple Blend

    In order to demonstrate how to use them, we’ll provide a basic example using Photoshop so that you can understand how each one works.

    Step 1: Choose an Image

    The first step is to open a photograph as your base layer. We’ll use the photograph we’ve used in our other examples. Make sure this layer is set to normal.

    Photoshop base layer

    Step 2: Create a New Color Layer

    Navigate to Layer > New Fill Layer > Solid Color to create a new layer.

    create new fill layer

    Name the layer Blend Layer, assign blue as the mode, and click ok.

    name new layer

    Next, fill it with #8f42ec, then click ok to create the layer.

    apply color

    Step 3: Apply a Blend Mode

    Next, apply the pin light blending mode to the blend layer you just created.

    Apply pin-light blending mode

    Step 4: Adjust the Opacity

    Finally, adjust the opacity on your blend layer to 50%. The results should now show the purple color to be more muted and have a less strong appearance.

    adjust opacity of blend layer

    If you want a more detailed tutorial, check out our tutorial on how to use blend modes to combine images in Photoshop.

    CSS Blend Modes for Web Design

    CSS blend modes

    Blending modes work generally the same in web design (with CSS) as they do with video and graphic editors. That being said, you’ll need to use some CSS rules and code in order to use them on your website. There are 2 main CSS properties that allow you to add blend modes in web design:

    • background-blend-mode
    • mix-blend-mode

      • Let’s discuss what each does, and provide examples so you can better understand what they do.

      Background-Blend-Mode CSS Property

      Background-blend-mode is a CSS property used to add blend modes to multiple backgrounds of a single HTML element. In CSS, you can add a background to an element using the background, background-image, or background-color properties. If an element contains two or more background images, linear gradients, or colors, you can use the background-blend-mode property to assign a blending mode to those backgrounds.

      For example, here is a div element with three CSS classes (“element”, “backgrounds”, and “with-blend-mode”). 

      <div class="element backgrounds with-blend-mode"></div>

      As the names of the CSS classes suggest, this is an element that will have backgrounds with a blend mode. Using CSS, we can add our backgrounds and background blend mode by targeting these classes.

      In the example CSS below, you can see the “backgrounds” class adds three backgrounds to the element (a background image, a background gradient, and a background color. The “with-blend-mode” class applies the Screen blend mode to the three backgrounds of the element.

      .with-blend-mode {
  background-blend-mode: screen;
}

.backgrounds {
  background-image: url("/image.jpg"),
    linear-gradient(90deg, #ff0f0f 0%, #4a00e8 100%);
  background-color: darkblue;
}

.element {
  height: 400px;
  width: auto;
  max-width: 600px;
}

      This allows the element to display not just one background, but a blend of all three! Here is a before and after of the image with and without the background-blend-mode:

      background blend mode

      View the CodePen

      Mix-Blend-Mode CSS Property

      Mix-blend-mode is a CSS property used to add blend mode styling to multiple elements, not just to the backgrounds of a single element like background-blend-mode. It can blend an element with its parent element or with other overlapping sibling elements.

      For example, below we have a div element inside a parent div element. 

      <div class="parent">
  <div class="element with-mix-blend"></div>
</div>

      Using CSS, we can add a background gradient to the parent element and a background image to the child element. Then we target the child element using the “with-mix-blend” class to add the Screen mix-blend-mode.

      .with-mix-blend {
  mix-blend-mode: screen;
}

.parent {
  background-image: linear-gradient(90deg, #ff0f0f 0%, #4a00e8 100%);
}

.element {
  background-image: url("/image.jpg");
}

      The result is a blending of the backgrounds of both elements for a unique effect!

      Mix blend mode example

      View the CodePen

      CSS Blend Modes Using Divi (An Easy No-Code Solution)

      If you don’t want to take the time to code CSS for your WordPress site but still want to use blending modes, then Divi is the best option for you. Divi is the most powerful design tool you’ll ever need in a theme or page builder. In many ways, Divi is a website builder and a photo editor all wrapped up into one. Using the example above, we can apply the same blending mode effects without the need for any coding.

      Divi has 16 built-in blending modes that allow you to blend layers of web elements (colors, background images, shapes, and multiple images) to achieve stunning designs. You can blend text into images, background images within rows and sections, and much more. Take a look at some of the tutorials offered on our blog in order to get a better idea of how you can incorporate blending modes into your designs.

      Design Tools that Use Blending Modes

      There are variety of powerful design tools out there that allow you to use blending modes. The most popular are those from Adobe, but there are others that you might find useful (including some for video and web design). Here’s a list of some helpful blending mode design tools at your disposal.

      1. Photoshop: As a long standing photo editing giant, Photoshop basically put blending modes on the map. As already mentioned, there are 27 blending modes in Photoshop that allow for a variety of effects when editing photos.
      2. Illustrator: Illustrator is one of the most popular solutions for graphic design. There are 15 blending modes available in Illustrator for applying effects to vector files other design elements.
      3. Premiere ProPremiere Pro is one the go-to video editing software on the market. Blending modes are available in the timeline to blend clips together to create different effects. Similar to Photoshop, Premiere Pro offers 27 blending modes.
      4. After Effects: The options in After Effects are identical to those used in Photoshop and Premiere Pro with one exception, which is dancing dissolve. Modes are used to blend layers containing animations. Also, these After Effects plugins can take your videos to a whole new level of creativity.
      5. Corel: Corel offers several programs that use blending modes including Paintshop Pro, Pinnacle Studio, and Corel Draw. There are 18 blending modes available.
      6. Figma There 16 options in Figma for blending layers to achieve varying effects. Figma is a web-based program used for web and user interface design.
      7. Divi: As a full site editing WordPress theme, Divi has 16 blend modes included in the Divi Builder and additional filter effects that can be used in any element with color and background options.

      Blending Mode Tips & Best Practices

      Using blending modes is a great way to add interest to your photos and designs. That being said, there are some things you should consider when using them.

      Adjust Fill and/or Opacity

      Most of the blending modes work best when adjusting the opacity of the blending layer. However, there are a few that require adjusting the fill instead. As previously mentioned, there is a group of modes called the special 8. They are color burn, linear burn, color dodge, linear dodge (add), vivid light, linear light, hard mix, and difference. While you can adjust the opacity for the special 8, you’ll notice a radical difference when adjusting the fill.

      Understand the Blend Mode Types

      When using blending modes, get to know the categories. For example, if you are editing a photo that is too light, you will want to use a mode from the darken category. Using multiply to darken your photo will be better suited for that use, rather than the darken. On the other hand, if you have an image that is too dark, use a mode from the lighten category. Modes such as overlay may add too many light tones, so you might want to use pin light instead because it is more subtle. The point is that you should take the time to experiment with each mode to gain better knowledge of what each one does.

      Use Filters with Blend Modes for Better Results

      Use a High Pass Filter to Sharpen Images

      high pass filter

      While high pass is not a blending mode, you can combine it with the overlay mode to sharpen images. Start off with your chosen image as the background layer. Next, duplicate the layer. From there, select filter > other > high pass. Adjust the slider to choose your desired sharpness. Finally, set the top layer with the high pass filter applied to overlay. This is a quick and easy way to add sharpness to photos that may be a bit blurry.

      Use the Lens Flare filter as a Focal Point

      lens flare filter

      Another great filter to use is lens flare. When combined with divide at a reduced opacity, it can provide a focal point on your image. Add a layer over the top of your photo layer. Fill it with black. Next navigate to filter > render > lens flare. Adjust the location of your lens flare then click apply. Next, set the blending mode of the lens flare layer to divide, then adjust the opacity to 50%.

      When to Use CSS Blend Modes instead of Photoshop Images in Web Design

      Blending modes are most commonly used in Photoshop to design images that are later uploaded to a web page. CSS blend modes work using CSS code that your browser uses to display the styles using the pixels on your monitor. This allows you to apply these designs to any element on the page in ways that you can’t do with images pre-designed in Photoshop. Here are few ways to consider.

      For Text Design

      Important website content (especially text) should always be readable by search engines (for SEO). CSS blend modes allow you to add blending styles to text elements (like headings) to create beautiful text designs with much better quality.

      For Hover Effects

      CSS blend modes are also great for adding interactive hover effects using blend modes. For example, you can add a blend style to images on hover to boost the design of your photo gallery with a few lines of CSS.

      For Effeciency and Performance

      CSS blend modes make it easier change the design of elements dynamically with a small adjustment to the code. This allows you to change the design of your website without having to go through the trouble of creating new images in Photoshop. Plus, in many cases, designs generated via CSS will load faster than large images.

      Conclusion

      Blending modes are great for adding special effects to images and designs in graphic and video editors, as well as web applications. Knowing how each one works is helpful for exploring new and exciting design possibilities. Plus, Photoshop isn’t the only design tool that uses them. When it comes the web, CSS blend modes allow you to skip Photoshop altogether to apply blend modes directly to your website. And, with Divi, you don’t even need to know CSS to create stunning designs using blend modes. Hopefully, this guide will help you along your design journey, wherever that may be.

      Which tool do you use to apply blending effects to your designs? Let us know in the comments section below.

      h2 {scroll-margin-top: 80px;}

      The post Blending Modes: A Complete Guide for Graphic and Web Design appeared first on Elegant Themes Blog.