CSS Image Effects and Filters

Images play a crucial role in web design, and with CSS, we can enhance their appearance and add effects to them to make them look more attractive. CSS provides a variety of image effects and filters that can be used to manipulate images in different ways.

In this article, we’ll explore some of the most common CSS image effects and filters, with examples of each.

Blur Effect

The blur effect is used to blur the image and make it look slightly out of focus. The CSS blur function can be used to create a blur effect on an image. The function accepts a length value that represents the amount of blur.

img {
  filter: blur(5px);
}

Grayscale Effect

The grayscale effect is used to convert the image to a grayscale image, where all the colors in the image are represented in different shades of gray. The CSS grayscale function can be used to create a grayscale effect on an image. The function accepts a value between 0 and 1, where 0 is the original image and 1 is the fully grayscale image.

img {
  filter: grayscale(1);
}

Brightness Effect

The brightness effect is used to change the brightness of an image. The CSS brightness function can be used to create a brightness effect on an image. The function accepts a value between 0 and 1, where 0 is the darkest and 1 is the original brightness.

img {
  filter: brightness(0.5);
}

Contrast Effect

The contrast effect is used to change the contrast of an image. The CSS contrast function can be used to create a contrast effect on an image. The function accepts a value between 0 and 1, where 0 is the lowest contrast and 1 is the original contrast.

img {
  filter: contrast(1.5);
}

Saturate Effect

The saturate effect is used to change the saturation of an image. The CSS saturate function can be used to create a saturation effect on an image. The function accepts a value between 0 and 1, where 0 is the least saturated and 1 is the original saturation.

img {
  filter: saturate(0.5);
}

Hue-Rotate Effect

The hue-rotate effect is used to change the hue of an image. The CSS hue-rotate function can be used to create a hue-rotate effect on an image. The function accepts a degree value that represents the amount of hue rotation.

img {
  filter: hue-rotate(90deg);
}

Invert Effect

The invert effect is used to invert the colors of an image. The CSS invert function can be used to create an invert effect on an image. The function accepts a value between 0 and 1, where 0 is the original image and 1 is the fully inverted image.

img {
  filter: invert(1);
}

Opacity Effect

The opacity effect is used to change the opacity of an image. The CSS opacity property can be used to create an opacity effect on an image. The property accepts a value between 0 and 1, where 0 is fully transparent and 1 is fully opaque.

img {
  opacity: 0.5;
}

Drop Shadow Effect

The drop shadow effect is used to add a shadow to an image. The CSS box-shadow property can be used to create a drop shadow effect on an image. The property accepts several values that determine the shadow’s position, size, and color.

img {
  box-shadow: 10px 10px 5px #888888;
}

Border Effect

The border effect is used to add a border to an image. The CSS border property can be used to create a border effect on an image. The property accepts several values that determine the border’s width, style, and color.

img {
  border: 5px solid #000000;
}

Demo

Codepen of all css effects together.

In conclusion, CSS provides a wide range of image effects and filters that can be used to enhance the appearance of images in a website. By combining these effects and filters, you can create unique and eye-catching images that will enhance the overall look and feel of your website.

I hope this article helps you understand the basics of CSS image effects and filters. Try experimenting with these effects and filters and see how you can incorporate them into your web design projects.

Advertisement

Creating a Todo Application using Next.js

Next.js is a framework for building server-rendered React applications. It provides a powerful set of features for web development such as automatic code splitting, server-side rendering, and static site generation. In this blog post, we will be creating a simple Todo application using Next.js.

Setting up the project

To get started, you will need to have Node.js and npm (or yarn) installed on your machine. Once you have these dependencies set up, you can create a new Next.js project using the following command:

npx create-next-app my-todo-app

This will create a new directory called “my-todo-app” with the basic file structure and dependencies for a Next.js app.

Creating the Todo List component

In this step, we will create a TodoList component that will display a list of todo items. Create a new file called TodoList.js in the components folder and add the following code:

import React from 'react';

const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <span>{todo.text}</span>
          <button>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

In this code, we are rendering an unordered list and mapping over the todos prop to create a list item for each todo item. We also added a button to delete the todo item.

Adding the Todo Form

Now that we have the TodoList component, we need to create a form to add new todo items. Create a new file called TodoForm.js in the components folder and add the following code:

Copy code
import React, { useState } from 'react';

const TodoForm = ({ addTodo }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text) return;
    addTodo(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add Todo..."
      />
    </form>
  );
};

export default TodoForm;


In this code, we are creating a form with an input that allows the user to enter a new todo item. When the form is submitted, it calls the addTodo function with the text of the input as an argument. We are also reset the text state after adding the todo item.

Creating the TodoPage

Create a new file called TodoPage.js in the pages folder and add the following code:

Copy code
import React, { useState } from 'react';
import TodoList from '../components/TodoList';
import TodoForm from '../components/TodoForm';

const TodoPage = () => {
const [todos, setTodos] = useState([]);

const addTodo = (text) => {
setTodos([...todos, { id: todos.length + 1, text }]);
};

const deleteTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
};

return (
<div>
<TodoForm addTodo={addTodo} />
<TodoList todos={todos} deleteTodo={deleteTodo} />
</div>
);
};

export default TodoPage;


In this file, we are creating a TodoPage component that contains the TodoForm and TodoList components. We are also using React’s useState hook to manage the state of the todo items. The addTodo function is passed down to the TodoForm component as a prop and is called when a new todo item is added. The deleteTodo function is passed down to the TodoList component as a prop and is called when a todo item is deleted.

Adding Routing

Add the following code in your pages/index.js file to redirect users to the TodoPage by default

import TodoPage from './TodoPage';

export default function Home() {
  return <TodoPage />;
}

Now the user will be able to access the TodoPage by visiting the root of your application.

That’s it! You now have a working Todo application built with Next.js. You can customize the application further by adding styles, saving the todo items to a database, or adding more features.

Adding Styles

You can add styles to your Todo application using a CSS preprocessor like SASS or using CSS-in-JS libraries like styled-components.

If you decide to use a CSS preprocessor, you will need to install the necessary dependencies and configure Next.js to use it. You can add the CSS files to the styles directory in the root of your project.

If you prefer to use styled-components, you can install it using npm or yarn by running the following command:

npm install styled-components

And then you can import it in your TodoForm.js and TodoList.js and add styles to your components.

import styled from 'styled-components';

const TodoForm = ({ addTodo }) => {
  // ...
  return (
    <Form onSubmit={handleSubmit}>
      <Input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add Todo..."
      />
    </Form>
  );
};

const Form = styled.form`
  display: flex;
  margin-bottom: 16px;
`;

const Input = styled.input`
  flex: 1;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
`;


Saving Todo items to a database

To save the todo items to a database, you will need to create a backend service that the Next.js app can communicate with. You can use a variety of technologies to build the backend, such as Node.js with Express, Python with Flask or Ruby on Rails.

In your backend service, you will need to create a REST API that the frontend can send requests to for creating, reading, updating, and deleting todo items.

Then you need to call the API in the TodoPage component’s functions like addTodo, deleteTodo to perform the CRUD operations on todo items.

Additionally, you can also use a library like axios or fetch to communicate with the backend service.

In summary, creating a Todo application using Next.js is a straightforward process, but you can also add further functionality like styles, routing, and saving the data to a database. It’s a great way to learn more about building web applications with React and Next.js and you can use the concepts you learn to build more advanced applications in the future.