Shiny Plastic Text

Developer
Bookcasey
Size
3,547 Kb
Views
26,312
  1. Shiny Plastic Text Previews
  2. Shiny Plastic Text HTML Codes
  3. Shiny Plastic Text CSS Codes
  4. Shiny Plastic Text JS Codes

How do I make an shiny plastic text?

Shiny Plastic Text using filter() and -webkit-background-clip—no images!. What is a shiny plastic text? How do you make a shiny plastic text? This script and codes were developed by Bookcasey on 13 September 2022, Tuesday.

Shiny Plastic Text Previews
IQ Test

Shiny Plastic Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shiny Plastic Text </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> <header> <h1>Shiny Plastic</h1>
</header>
<div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shiny Plastic Text - Script Codes CSS Codes

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
html, body { width: 100%; height: 100%;
}
header { width: 100%; height: 15em; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3ODY0M2MiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzMyMTkiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -moz-radial-gradient(center 100%, #78643c, #3c3219); background: -webkit-radial-gradient(center 100%, #78643c, #3c3219); background: radial-gradient(center 100%, #78643c, #3c3219); box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.2); text-align: center;
}
h1 { display: inline-block; font-family: Futura, sans-serif; font-size: 5em; text-transform: uppercase; padding-top: 1em; color: #e6c864; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjQ1JSIgY3k9IjUwJSIgcj0iNzUlIj48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2VjZDY4YyIvPjxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjZTZjODY0Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-radial-gradient(45% 50%, 75% 40%, #ecd68c 75%, #e6c864 75%); background: -webkit-radial-gradient(45% 50%, 75% 40%, #ecd68c 75%, #e6c864 75%); background: radial-gradient(75% 40% at 45% 50%, #ecd68c 75%, #e6c864 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-filter: drop-shadow(0 -1px 0 white) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0 -1px 0 white) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}
div { width: 100%; height: 20em; background: #e6c864; border-top: 1px solid rgba(255, 255, 255, 0.5);
}

Shiny Plastic Text - Script Codes JS Codes

/* Only works in Webkit, but degrades gracefully */
Shiny Plastic Text - Script Codes
Shiny Plastic Text - Script Codes
Home Page Home
Developer Bookcasey
Username bookcasey
Uploaded September 13, 2022
Rating 3
Size 3,547 Kb
Views 26,312
Do you need developer help for Shiny Plastic Text?

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!

Bookcasey (bookcasey) Script Codes
Name
Full bleed background images with CSS3 filter
Fittext for Sass
Scandinavian Sweater Pattern
Trendy Shadow in CSS
Just a few lines of Sass...
Zero Element SMPTE color bars
A Pen by bookcasey
Pure CSS one-element printer paper
English words that are also Hex colors
A Pen by bookcasey
Create amazing captions 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!