Retro Photo Effect
How do I make an retro photo effect?
CSS filter to make your images retro. What is a retro photo effect? How do you make a retro photo effect? This script and codes were developed by Diego Ponce on 21 November 2022, Monday.
Retro Photo Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Retro Photo Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="retro"> <img src="http://www.layoverguide.com/wp-content/uploads/2010/12/Chinatown-in-San-Francisco-California.jpg" alt="Retro is cool!" />
</div>
</body>
</html>
Retro Photo Effect - Script Codes CSS Codes
body{background-color:#ECECEC;}
.retro { margin:50px auto; -webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1); background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%); display: table;
}
.retro img { width:700px; -webkit-filter: sepia(20%) brightness(50%) contrast(112%); position: relative; z-index: -1;
}
| Developer | Diego Ponce |
| Username | wifi |
| Uploaded | November 21, 2022 |
| Rating | 3 |
| Size | 1,747 Kb |
| Views | 20,240 |
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!
| Name | Size |
| Minimalist Mike Wazowski | 2,401 Kb |
| Text Fill | 1,674 Kb |
| Spinning Message | 2,722 Kb |
| CSS3 Animated Pacman | 2,935 Kb |
| Animated text dots | 1,867 Kb |
| CSS image filters | 2,077 Kb |
| Minimalist Minion | 2,521 Kb |
| Morphing animation | 2,134 Kb |
| Animated text fill | 1,910 Kb |
| Birthday message | 4,285 Kb |
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!
| Name | Username | Size |
| A Pen by boilzzz | Boilzzz | 2,761 Kb |
| Promodoro | Bencarp | 1,712 Kb |
| Navcube | Wbarlow | 4,775 Kb |
| CSS eye follow | Pedrocampos | 2,592 Kb |
| Twinkling Stars | Ripley6811 | 2,750 Kb |
| Twitch API | Coderpilot | 3,412 Kb |
| Button fills | Zubfatal | 5,205 Kb |
| PNotify Demo | Adittmar | 1,731 Kb |
| Weather App | Kw7oe | 3,162 Kb |
| We Simplify animation | Meodai | 48,169 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!