Flat-n-Blur

Developer
Shak Daniel
Size
3,247 Kb
Views
52,624
  1. Flat-n-Blur Previews
  2. Flat-n-Blur HTML Codes
  3. Flat-n-Blur CSS Codes
  4. Flat-n-Blur JS Codes

How do I make an flat-n-blur?

Flat and Blur Experiment.. What is a flat-n-blur? How do you make a flat-n-blur? This script and codes were developed by Shak Daniel on 24 September 2022, Saturday.

Flat-n-Blur Previews
IQ Test

Flat-n-Blur - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat-n-Blur</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="icon"> <div class="gradient"></div> </div> <div class="shadow"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Flat-n-Blur - Script Codes CSS Codes

html,
body,
.container { width: 100%; height: 100%; margin: 0; padding: 0;
}
.container { position: absolute; background-image: -webkit-linear-gradient(#8b9da9, #fff6e4); background-image: linear-gradient(#8b9da9, #fff6e4); box-shadow: inset 0 0 100px rgba(0,0,0,0.3); font-family: sans-serif; text-align: center; overflow: hidden; padding-top: 5%;
}
.icon { position: relative; width: 350px; height: 350px; left: 50%; margin-left: -175px; border-radius: 60px; padding: 5px; cursor: pointer; background: -webkit-linear-gradient(315deg, #fff 25%, #ddd 50%, #eee 50%, #ccc 75%); background: linear-gradient(-225deg, #fff 25%, #ddd 50%, #eee 50%, #ccc 75%); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2), 5px 5px 5px 0px rgba(0,0,0,0.1); z-index: 9999;
}
.gradient { width: 350px; height: 350px; border-radius: 55px; background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.1) 75%, rgba(255,255,255,0.05) 75%), -webkit-linear-gradient(45deg, #3498db -50%, #2ecc71 50%, #f1c40f 150%); background: linear-gradient(45deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.1) 75%, rgba(255,255,255,0.05) 75%), linear-gradient(45deg, #3498db -50%, #2ecc71 50%, #f1c40f 150%);
}
content:" " { -webkit-transition: all 0.25s ease; transition: all 0.25s ease;
}
.gradient:hover { background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.05) 33%, rgba(255,255,255,0.1) 33%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0.05) 66%), -webkit-linear-gradient(45deg, #3498db 0%, #2ecc71 50%, #f1c40f 100%); background: linear-gradient(45deg, rgba(255,255,255,0.05) 33%, rgba(255,255,255,0.1) 33%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0.05) 66%), linear-gradient(45deg, #3498db 0%, #2ecc71 50%, #f1c40f 100%);
}
.shadow { position: relative; width: 460px; height: 460px; left: 50%; margin-top: -248px; margin-left: -63px; background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 66%); background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 66%); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
a { text-decoration: none; color: #fff; font-size: 50px; letter-spacing: 25px; margin-left: 25px; line-height: 100px; text-shadow: 0px 0px 3px rgba(0,0,0,0.1), 4px 2px 3px rgba(0,0,0,0.1), 6px 4px 3px rgba(0,0,0,0.1), 8px 6px 3px rgba(0,0,0,0.1), 10px 8px 3px rgba(0,0,0,0.1), 12px 10px 3px rgba(0,0,0,0.1), 14px 12px 3px rgba(0,0,0,0.1), 16px 14px 3px rgba(0,0,0,0.1), 18px 16px 3px rgba(0,0,0,0.1), 20px 18px 3px rgba(0,0,0,0.1); -webkit-transition: text-shadow 4s ease; transition: text-shadow 4s ease;
}
a:hover { text-shadow: 0px 0px 3px rgba(0,0,0,0.5); -webkit-transition: text-shadow 2s; transition: text-shadow 2s;
}

Flat-n-Blur - Script Codes JS Codes

/********************************
https://twitter.com/Shak_Dizzle
http://instagram.com/shak_dizzle
http://dribbble.com/shakdaniel
********************************/
Flat-n-Blur - Script Codes
Flat-n-Blur - Script Codes
Home Page Home
Developer Shak Daniel
Username shakdaniel
Uploaded September 24, 2022
Rating 3.5
Size 3,247 Kb
Views 52,624
Do you need developer help for Flat-n-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!

Shak Daniel (shakdaniel) Script Codes
Name
Fancy menu toggle
Pure CSS Terminal
Cute Loading
Ninja Zoom Nav
Plaid background
Animated Logo
My CSS Logo
Cool BackGround
A Pen by Shak Daniel
Drag -n- Blur
Create amazing Facebook ads 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!