Materoid
How do I make an materoid?
What is a materoid? How do you make a materoid? This script and codes were developed by Keyon on 10 January 2023, Tuesday.
Materoid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Materoid</title> <link href='https://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,100,300|Open+Sans:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="P-Frame"> <div id="P-img"> </div> <p id="P-Text"></p>
</div>
<form> <p>Custom Image ( Insert URL )</p> <input id="CIU" placeholder="URL Here"> <br /><br /> <p>Bottom Frame Text</p> <input id="BFT" maxlength="18" placeholder="Try to write something">
</form>
<div class="Title"> <p style="color:#455A64;"><span class="p-m">M</span>ateroid</p> <p style="font-size:17px; font-weight:400; margin-top:-7px; color:#455A64;">Material Design + Polaroid</p>
</div>
<div class="Subtitle"> <p>Keyon - <a style="color:#00897B; text-decoration:none;" href="http://www.uplabs.com/Keyon" target="_Blank">UpLabs</a></p>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/531144/html2canvas.js'></script> <script src="js/index.js"></script>
</body>
</html>
Materoid - Script Codes CSS Codes
body { background:#ECEFF1; margin:0px; position: fixed;
}
#P-Frame { height:350px; width:300px; background:#FAFAFA; border-radius:3px; position: fixed; left:calc(50% - 150px); top:calc(50% - 175px); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); transition: box-shadow 0.3s ease, transform 0.3s ease; /*Cursor*/ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;
}
#P-Frame:Active { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); transform: scale(1.025); /*Cursor*/ cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing;
}
#P-img { width:275px; height:275px; position: absolute; left:calc(50% - 137.5px); top:13px; border-radius:1.5px; background-image:url(http://s1.favim.com/610/150730/background-feed-hipster-mountains-Favim.com-3029741.jpg); background-size: cover; background-position: center; box-shadow: inset 0 3px 6px rgba(0,0,0,0.09), inset 0 3px 6px rgba(0,0,0,0.05); -webkit-filter: contrast(110%) grayscale(5%); filter: contrast(105%) sepia(25%) grayscale(5%);
}
#P-Text { position: absolute; margin: 0px; bottom:7px; left:17px; width:265px; font-size:27px; font-family:Coming Soon; opacity:0.75;
}
form { position: fixed; width:250px; left:calc(100% - 295px); top: 20px;
}
input { width:100%; height:25px; padding-left:5px; border:0px; outline: none; border-radius:2px; font-family:Open Sans; background:transparent; border-bottom:1px solid rgba(0,0,0,0.20); transition: all 0.3s ease;
}
input:Focus { border-bottom:1px solid #009688;
}
p { margin:0px; font-family: Open Sans; color:#263238;
}
/* Title and Subtitle*/
.Title { position:fixed; width:350px; font-size:27px; font-family:Open Sans; text-align:left; left:30px; top:20px;
}
.STl { font-size:17px; opacity:0.85;
}
.Subtitle { position: fixed; text-align: center; bottom: 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; color: #607D8B; z-index: 999; font-family: Roboto; font-size: 19px;
}
.p-m { background: -webkit-linear-gradient(left, #E53935, #FFA000, #43A047, #039BE5); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
Materoid - Script Codes JS Codes
$(function() { $("#P-Frame").draggable({ helper: function() { // Create an invisible div as the helper. It will move and // follow the cursor as usual. return $('<div></div>').css('opacity', 0); }, drag: function(event, ui) { // During dragging, animate the original object to // follow the invisible helper with custom easing. var p = ui.helper.position(); $(this).stop().animate({ top: p.top, left: p.left }, 0750, 'easeOutCirc'); } })
});
$("#BFT") .keyup(function() { var value = $(this).val(); $("#P-Text").text(value); }) .keyup();
$("#CIU").keyup(function() { $("#P-img").css("background-Image", "url('" + $("#CIU").val() + "')");
});
$("#CIU").on('keyup', function(e) { var ccType = $(this).val(); if (ccType == "") { $('#P-img').css('background-image', 'url(http://s1.favim.com/610/150730/background-feed-hipster-mountains-Favim.com-3029741.jpg)'); }
})
Developer | Keyon |
Username | Keyon |
Uploaded | January 10, 2023 |
Rating | 3 |
Size | 3,342 Kb |
Views | 4,048 |
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 |
Gooey Eclipse | 2,073 Kb |
Marco, the angry rectangle | 2,672 Kb |
Notepad Project Neon | 5,072 Kb |
Profile Box | 3,090 Kb |
The IT Crowd Window | 3,188 Kb |
Heart Beat | 3,505 Kb |
Presentation - Material Design and Parallax | 6,536 Kb |
Polaroid Snap Realistic | 4,845 Kb |
MEMOREYES | 2,914 Kb |
Play of the Game | 2,781 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 |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
Template | Indra_z85 | 2,323 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
SVG Hover Animations | Kjbrum | 10,557 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!