Free Frontend

Free Frontend

1626604975

11 CSS background-blend-mode Examples

11 CSS background-blend-mode Examples
Collection of free #CSS background-blend-mode code examples from #Codepen and other resources.
https://freefrontend.com/css-background-blend-mode-examples/

#html #css #codepen #webdesign

What is GEEK

Buddha Community

11 CSS background-blend-mode Examples

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

  • how to create a smooth animation using the CSS transform translate3d prop.
  • why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
  • how and why we use custom tags.
  • if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

How to Fake Opacity With a CSS Background

I came across an interesting bit while working on the hero section of my z-index guide. I needed a way to apply an opacity for the background.

Here is the final result I want to achieve…

At the first glance, it might be tempting to say that it’s easy. However, it’s a bit more detailed. Let’s dig into the details of it.

The Layers

  • Solid background
  • Pattern image
  • Oval blurred shape: to make it easier to read the text content.

For me, 3D is a good way to imagine how to stack the layers. I also made a video to make it more clear.

If you’re not into 3D, it’s totally fine. Here is a normal view of all the layers.

The Requirements

  • I need a dynamic way to fake an opacity for the pattern image.
  • I shouldn’t use an additional HTML element for this job.
  • It should be responsive.

To implement that, we can use multiple CSS gradients. Here is how I did it:

:root {
  --oval-w: 50%;
  --oval-h: 70%;
  --base-color: rgba(194, 236, 231, 0.8);
  --pattern: url("hero-bg.svg");
}

.hero {
  min-height: 400px;
  background: linear-gradient(var(--base-color), var(--base-color)),
    radial-gradient(#c2ece7 25%, transparent) center/50% 90% no-repeat, var(
        --pattern
      ) center/cover no-repeat;
}

Code Explanation

  • What comes later in the gradient is displayed the last (The opposite of the stacking order).
  • In CSS gradients, using the same value for a linear gradient will result in a solid color. I like using this method. The solid color with rgba() will fake the opacity for us.
  • The oval shape is created with a radial gradient.
  • I used percentages for the oval shape, so it can resize based on the screen size.

With that, I used the pattern image as it is without altering its opacity manually. I can change the background color the way I want without using a design program in case I changed the pattern.

#snippet #css background #css #background

CSS background image tutorial with examples

This article was originally published at: https://www.blog.duomly.com/css-background-image-tutorial-with-examples/


The background image is probably one of the CSS properties which all of us, front-end developers, used at least a few times in our careers. Most people think that there can’t be anything unusual about background-image, but after a quick research, I have a different conclusion.

There are lots of questions askes about CSS background image every day in Facebook groups and lots of unknown tricks which can help us to achieve amazing effects and make stunning apps and websites.

That’s the reason I decided to create this article to show you what magic can be done using such a simple CSS property. I gathered seven tips and tricks I believe will be the most useful and create some code examples where you can check what’s going on there for you.

And, if as usually if you don’t like reading, jump to our Youtube channel for a video version.

Let’s check what’s behind the background!

1. How to fit a background image perfectly to a viewport?

Let’s start from something that’s more tip than a trick. How often it happened to you that you had to struggle with your background image to make in perfectly fitted and not stretched and unattractive?

Let me show you the way how to make your background image always perfectly fitted to your browser window!

2. How to use multiple background images with CSS?

Hm, and what if I’d like to add more then one image in the background?

That’s possible and not very difficult, but can give a nice result while you’ve got an idea to mix two graphics into something beautiful.

I personally think that it’s super useful when we want to add a pattern on the top of a background image, so that’s what I will show you in this example.

Let’s see how it works!

3. How to create a triangular background image?

Another exciting CSS background image trick is a triangular background image. It creates a really beautiful effect, especially when we would like to show some totally different options like day and night, or winter and summer.

It is done by creating two divs, both for the full viewport, then it’s needed to add a background image to both of them, and next, the second div needs a clip-path property to create a triangle shape.

Let’s see the code and result!

4. How to add a gradient overlay to my background image?

The fourth trick I’d like to show you in this article is about overlay on the background image. It can be useful when you would like to put some text on the image, but it’s too light, and text is not visible, but it can also improve the image itself.

For example, sunset images can be strengthened by adding a pink-orange gradient or red to transparent gradient.

Let’s see how we can easily add a gradient overlay to the background image!

5. How to create a color-changing background image animation?

And what if you can decide which color is the best as an overlay for your background image? Then animations on background images are really useful.

Using an animated overlay can give your website a great final effect, and for sure, people will remember it.

Let’s see what we can do using background images and animations in CSS!

6. How to make a grid background image?

Sometimes it’s a great idea to go a little bit more crazy, especially if the project is about art or photography, then a nice background image can be created with CSS grid and CSS background image.

Oh, if you don't know what's CSS grid check it out here.

Let’s take a look!

7. How to set a background image as a text color?

Using background image with background-clip you can achieve a beautiful effect of the background image for text. In some cases, it may be very useful, especially when you’d like to create a big text header, but not as boring as a normal color.

Let’s see the stunning effect we can get!

Conclusion

In this article, you could see 7 different tips and tricks to make amazing things with the background image. I’m pretty sure those hints will be helpful and allow you to get amazing results on your layouts. If you’d like to check out some more interesting CSS tips and tricks, check out our latest CSS borders tips and tricks article and one of the previous CSS tips and tricks.

If you have ever used any customized solution for your background let me know in the comments, I will be happy to find out what more can be done with CSS background image property.

Thank you for reading,

Anna from Duomly

#css #background #background-image #html #coding

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics