CSS image filters

Developer
Diego Ponce
Size
2,077 Kb
Views
24,288
  1. CSS image filters Previews
  2. CSS image filters HTML Codes
  3. CSS image filters CSS Codes

How do I make an css image filters?

CSS3 filters on images, I will add the captions of each effect later.. What is a css image filters? How do you make a css image filters? This script and codes were developed by Diego Ponce on 21 November 2022, Monday.

CSS image filters Previews
IQ Test

CSS image filters - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS image filters</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>CSS3 Image Filters</p>
<img class="original" src="http://www.rienvirothon.org/pic-wildlife-600.jpg" align="middle">
<img class="brightness" src="http://www.rienvirothon.org/pic-wildlife-600.jpg" align="middle">
<img class="blur" src="http://www.rienvirothon.org/pic-wildlife-600.jpg" align="middle">
<img class="contrast" src="http://www.rienvirothon.org/pic-wildlife-600.jpg" align="middle">
<img class="grayscale" src="http://www.rienvirothon.org/pic-wildlife-600.jpg" align="middle">
<img class="hue_rotate" src="http://www.rienvirothon.org/pic-wildlife-600.jpg" align="middle">
<img class="invert" src="http://www.rienvirothon.org/pic-wildlife-600.jpg" align="middle">
<img class="sepia" src="http://www.rienvirothon.org/pic-wildlife-600.jpg" align="middle">
</body>
</html>

CSS image filters - Script Codes CSS Codes

@font-face { font-family: 'Cutive'; font-style: normal; font-weight: 400; src: local('Cutive'), local('Cutive-Regular'), url(http://themes.googleusercontent.com/static/fonts/cutive/v4/7pMILQtbblPmQbuabt3G-g.woff) format('woff');
}
body{ background:#cc6428; margin:0 auto;
}
p{ margin-left:30%; font-size:40px; font-family:'Cutive'; font-weight:bold; color:#e27a46; letter-spacing:5px; text-shadow:4px 4px 0px #aa420d, 3px 3px 0px #aa420d, 2px 2px 0px #aa420d, 1px 1px 0px #aa420d ;
}
img{ border: 4px solid #fff; width:30%; display: inline-block; margin-top:0px;	margin-left: auto;	margin-right: auto; margin-bottom:30px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
}
.original{margin-left:18%;}
.brightness{ margin-left:40px; /*Brightness*/
-webkit-filter: brightness(130%);
-moz-filter: brightness(130%);
-ms-filter: brightness(130%);
-o-filter: brightness(130%);
filter: brightness(130%);
}
.blur{ margin-left:18%; /*Blur*/
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
.contrast{ margin-left:40px; /*Contrast*/
-webkit-filter: contrast(130%);
}
.grayscale{ margin-left:18%;
/*Grayscale*/
-webkit-filter: grayscale(50%);
}
.hue_rotate{ margin-left:40px; /*Hue Rotate*/
-webkit-filter: hue-rotate(30deg);
}
.invert{ margin-left:18%; /*Invert*/
-webkit-filter: invert(100%);
}
.sepia{ margin-left:40px; /*Sepia*/
-webkit-filter: sepia(100%);
}
CSS image filters - Script Codes
CSS image filters - Script Codes
Home Page Home
Developer Diego Ponce
Username wifi
Uploaded November 21, 2022
Rating 3
Size 2,077 Kb
Views 24,288
Do you need developer help for CSS image filters?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Diego Ponce (wifi) Script Codes
Name
CSS3 Animated Pacman
Days until Christmas
Spinning Message
Retro Photo Effect
Animated text fill
Minimalist Mike Wazowski
Birthday message
Morphing animation
Grid animation
Minimalist Pokeball
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!