Gooey Menu CSS no SVG

Developer
Alex Coven
Size
3,719 Kb
Views
38,456
  1. Gooey Menu CSS no SVG Previews
  2. Gooey Menu CSS no SVG HTML Codes
  3. Gooey Menu CSS no SVG CSS Codes

How do I make an gooey menu css no svg?

Used a blur to achieve this optical merge of shapes. Just a test. Have been trying to emulate this gooey effect without SVG or JS for a while now. Finally making headway.. What is a gooey menu css no svg? How do you make a gooey menu css no svg? This script and codes were developed by Alex Coven on 12 June 2022, Sunday.

Gooey Menu CSS no SVG Previews
IQ Test

Gooey Menu CSS no SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gooey Menu CSS no SVG</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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:#000;
}
div { color:#fff; border: 0px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; width: 400px; height: 200px; margin: auto;
}
i { position:absolute; top:77px; left:177px; z-index:2; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
img { width:30px; position:absolute; bottom:20px; right:20px;
}
div:hover i { top:0px; -webkit-transition: all 700ms ease-in-out; transition: all 700ms ease-in-out; cursor:pointer;
}
div:hover a { background-size:40%;
}
div:hover i span { background:#fff; top:10px; width:15px; margin-left:3px; -webkit-transition: all 1s ease-in-out,top 0.5s ease-in-out,margin 0.5s ease-in-out; transition: all 1s ease-in-out,top 0.5s ease-in-out,margin 0.5s ease-in-out;
}
div:hover i span:first-child { -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); transform:rotate(135deg);
}
div:hover i span:nth-child(2) { width:0px; background:#000; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
}
div:hover i span:last-child { -webkit-transform:rotate(-135deg); -ms-transform:rotate(-135deg); transform:rotate(-135deg);
}
span { height:3px; width:20px; background:#000; display:block; margin:4px 0; position:absolute;
}
span:nth-child(2) { top:6px;
}
span:last-child { top:12px;
}
button { border: 0px; background: #000; width: 400px; height: 200px; -webkit-filter: blur(20px) contrast(30); filter: blur(20px) contrast(30); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
div:hover button { -webkit-filter: blur(0) contrast(1); filter: blur(0) contrast(1); -webkit-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out;
}
button:focus { outline: 0px;
}
a { background: url("http://i.imgur.com/2pPxvki.png") white no-repeat center center; background-size:0%; width: 75px; height: 75px; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; border-radius: 100%; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; color:#000; text-decoration:none;
}
a:nth-child(1):hover { background: url("http://i.imgur.com/POSj5xS.png") white no-repeat center center; background-size:50%;
}
a:nth-child(3) { background: url("http://i.imgur.com/hOqtYj1.png") white no-repeat center center; background-size:0%;
}
a:nth-child(3):hover { background: url("http://i.imgur.com/5DZxCkB.png") white no-repeat center center; background-size:50%;
}
a:nth-child(2) { background: url("http://imgur.com/jZ8HrKD.png") white no-repeat center center; background-size:0%;
}
a:nth-child(2):hover { background: url("http://i.imgur.com/7QoxG0X.png") white no-repeat center center; background-size:50%;
}
a.logo { background:transparent; width: auto; height: auto; position: inherit;
}
a.logo:after { display:none;
}
a:after { content: ''; color: #fff; position: absolute; width: 60px; bottom: 0px; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; opacity: 0; left:10px; -webkit-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; -webkit-filter: blur(20px) contrast(30); filter: blur(20px) contrast(30);
}
a:hover:after{ opacity:1; bottom: -25px; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; -webkit-filter: blur(0px) contrast(1); filter: blur(0px) contrast(1);
}
a:first-child:hover:after{ content:'contact';
}
a:nth-child(2):hover:after{ content:'about';
}
a:last-child:hover:after { content:'home';
}
div:hover a:first-child { -webkit-transform: translateX(85px); -ms-transform: translateX(85px); transform: translateX(85px);
}
div:hover a:last-child { -webkit-transform: translateX(-85px); -ms-transform: translateX(-85px); transform: translateX(-85px); /*transition-delay:200ms;*/
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div> <i> <span></span> <span></span> <span></span> </i> <button> <a href="http://www.dribbble.com/alexcoven" target="_blank"></a> <a href="http://www.instagram.com/alcoven" target="_blank"></a> <a href="http://www.alexcoven.com" target="_blank"></a> </button>
</div>
<a class="logo" target="_blank" href="https://dribbble.com/Alexcoven"><img src="http://i.imgur.com/kF8rP6D.png"></a>
</body>
</html>

Gooey Menu CSS no SVG - Script Codes CSS Codes

body { background:#000;
}
div { color:#fff; border: 0px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; width: 400px; height: 200px; margin: auto;
}
i { position:absolute; top:77px; left:177px; z-index:2; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
img { width:30px; position:absolute; bottom:20px; right:20px;
}
div:hover i { top:0px; -webkit-transition: all 700ms ease-in-out; transition: all 700ms ease-in-out; cursor:pointer;
}
div:hover a { background-size:40%;
}
div:hover i span { background:#fff; top:10px; width:15px; margin-left:3px; -webkit-transition: all 1s ease-in-out,top 0.5s ease-in-out,margin 0.5s ease-in-out; transition: all 1s ease-in-out,top 0.5s ease-in-out,margin 0.5s ease-in-out;
}
div:hover i span:first-child { -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); transform:rotate(135deg);
}
div:hover i span:nth-child(2) { width:0px; background:#000; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
}
div:hover i span:last-child { -webkit-transform:rotate(-135deg); -ms-transform:rotate(-135deg); transform:rotate(-135deg);
}
span { height:3px; width:20px; background:#000; display:block; margin:4px 0; position:absolute;
}
span:nth-child(2) { top:6px;
}
span:last-child { top:12px;
}
button { border: 0px; background: #000; width: 400px; height: 200px; -webkit-filter: blur(20px) contrast(30); filter: blur(20px) contrast(30); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
div:hover button { -webkit-filter: blur(0) contrast(1); filter: blur(0) contrast(1); -webkit-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out;
}
button:focus { outline: 0px;
}
a { background: url("http://i.imgur.com/2pPxvki.png") white no-repeat center center; background-size:0%; width: 75px; height: 75px; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; border-radius: 100%; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; color:#000; text-decoration:none;
}
a:nth-child(1):hover { background: url("http://i.imgur.com/POSj5xS.png") white no-repeat center center; background-size:50%;
}
a:nth-child(3) { background: url("http://i.imgur.com/hOqtYj1.png") white no-repeat center center; background-size:0%;
}
a:nth-child(3):hover { background: url("http://i.imgur.com/5DZxCkB.png") white no-repeat center center; background-size:50%;
}
a:nth-child(2) { background: url("http://imgur.com/jZ8HrKD.png") white no-repeat center center; background-size:0%;
}
a:nth-child(2):hover { background: url("http://i.imgur.com/7QoxG0X.png") white no-repeat center center; background-size:50%;
}
a.logo { background:transparent; width: auto; height: auto; position: inherit;
}
a.logo:after { display:none;
}
a:after { content: ''; color: #fff; position: absolute; width: 60px; bottom: 0px; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; opacity: 0; left:10px; -webkit-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; -webkit-filter: blur(20px) contrast(30); filter: blur(20px) contrast(30);
}
a:hover:after{ opacity:1; bottom: -25px; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; -webkit-filter: blur(0px) contrast(1); filter: blur(0px) contrast(1);
}
a:first-child:hover:after{ content:'contact';
}
a:nth-child(2):hover:after{ content:'about';
}
a:last-child:hover:after { content:'home';
}
div:hover a:first-child { -webkit-transform: translateX(85px); -ms-transform: translateX(85px); transform: translateX(85px);
}
div:hover a:last-child { -webkit-transform: translateX(-85px); -ms-transform: translateX(-85px); transform: translateX(-85px); /*transition-delay:200ms;*/
}
Gooey Menu CSS no SVG - Script Codes
Gooey Menu CSS no SVG - Script Codes
Home Page Home
Developer Alex Coven
Username alcoven
Uploaded June 12, 2022
Rating 4.5
Size 3,719 Kb
Views 38,456
Do you need developer help for Gooey Menu CSS no SVG?

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!

Alex Coven (alcoven) Script Codes
Name
Alex Coven .COM
Charging Battery CSS
Squid Swimming Spinning SVG Animation
Atomic Menu
Stackoverflow nth-child answer
Menu Shelf
Lucro Assets
For Brian
Atomic Hamburger Menu CSS
Hover triangle wipe css
Create amazing marketing copy 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!