Live CSS Blur

Developer
Anthony Adamski
Size
2,648 Kb
Views
80,960
  1. Live CSS Blur Previews
  2. Live CSS Blur HTML Codes
  3. Live CSS Blur CSS Codes

How do I make an live css blur?

Resize your window!Works best in Firefox. Doesn't seem to work in safari, havent troubleshooted it yet. . What is a live css blur? How do you make a live css blur? This script and codes were developed by Anthony Adamski on 21 August 2022, Sunday.

Live CSS Blur Previews
IQ Test

Live CSS Blur - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Live CSS Blur</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed; background-size: cover;
}
.blur { background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed; background-size: cover; overflow: hidden; filter: blur(13px); position:absolute; height:300px; top:-50px; left:-50px; right:-50px; bottom:-50px; z-index:-1;
}
.widget { border-top: 2px solid rgba(255,255,255,.5); border-bottom: 2px solid rgba(255,255,255,.5); height: 200px; width: 100%; overflow: hidden;
}
.center { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;
}
/* NOT REQUIRED */
.text { height: 200px; width: 340px;
}
.text h1 { text-align: center; text-shadow: 1px 1px rgba(0, 0, 0, .1); color: #ffffff; margin-top: 57px; font-family: 'Lora', serif; font-weight: 700; font-size: 38px;
}
.text p { text-align: center; color: #ffffff; text-shadow: 1px 1px rgba(0, 0, 0, .1); margin-top: 0px; font-family: 'Lato', serif; font-weight: 400; font-size: 22px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="widget center"> <div class="text center"> <h1 class="">Live CSS Blur</h1> <p>Go ahead, resize me.</p> </div> <div class="blur"> </div>
</div>
<link href='http://fonts.googleapis.com/css?family=Lora:400,700|Lato:400,500' rel='stylesheet' type='text/css'>
</body>
</html>

Live CSS Blur - Script Codes CSS Codes

body { background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed; background-size: cover;
}
.blur { background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed; background-size: cover; overflow: hidden; filter: blur(13px); position:absolute; height:300px; top:-50px; left:-50px; right:-50px; bottom:-50px; z-index:-1;
}
.widget { border-top: 2px solid rgba(255,255,255,.5); border-bottom: 2px solid rgba(255,255,255,.5); height: 200px; width: 100%; overflow: hidden;
}
.center { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;
}
/* NOT REQUIRED */
.text { height: 200px; width: 340px;
}
.text h1 { text-align: center; text-shadow: 1px 1px rgba(0, 0, 0, .1); color: #ffffff; margin-top: 57px; font-family: 'Lora', serif; font-weight: 700; font-size: 38px;
}
.text p { text-align: center; color: #ffffff; text-shadow: 1px 1px rgba(0, 0, 0, .1); margin-top: 0px; font-family: 'Lato', serif; font-weight: 400; font-size: 22px;
}
Live CSS Blur - Script Codes
Live CSS Blur - Script Codes
Home Page Home
Developer Anthony Adamski
Username anthonyadamski
Uploaded August 21, 2022
Rating 4.5
Size 2,648 Kb
Views 80,960
Do you need developer help for Live CSS Blur?

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!

Anthony Adamski (anthonyadamski) Script Codes
Name
Work In Progress
Cropped Background Images
Jquery Snippets
Single page concept
Live resume concept
Image Hover Effect
Responsive Email Template
Full Viewport Background Scroll
Less Utility Classes
A Pen by Anthony Adamski
Create amazing art & images 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!