my HTML Element Creator 2020
Make element with onclick?
include:
Debug Grid
|
include:
Debug
with this style?
z-index:0;
position:absolute;top:152px;left:728px;
position:absolute;top:152px;left:728px;width:100px;height:100px;background-color:black;
position:absolute;top:152px;left:728px;width:100px;height:100px;background-color:black;border-radius:20px;box-shadow:5px 5px 10px black;
position:absolute;top:152px;left:728px;width:100px;height:100px;background-color:black;border-radius:20px;box-shadow:5px 5px 10px black;color:white;text-shadow:5px 5px 10px green;text-align:center;
z-index:1;position:absolute;top:152px;left:728px;
padding:20px;background-color:red;font-size:50px;font-weight:bold;font-family:tahoma;
position:absolute;top:152px;left:728px;width:auto;height:auto;background-color:black;color:transparent;text-align:center;font-family:Luckiest Guy;font-size:25em;padding:20px 50px;background-image: linear-gradient(red, yellow);background-clip: text;-webkit-background-clip: text;outline:none;
///// php make_html_element_css_options.php insert ////////
Applying CSS blur to body
Applying CSS opacity to body
Standard Html page template
Site Irate Global Lockout
Screen Saver Script
420 Bong Rip
Notification Plugin
Adjusting for site irate display
Function iecompattest
Meta Tags
Debug Script
Capture Mobile Touch and Move
Php Redirect
Grid Overlay
Time Plugin
Bring Friends To Page
Include The Bugs to the Page
Console Header Colors
Goto Login
Goto upSTYLEdown
Goto TileBash
Goto To Do List
Goto Password Generator
Goto Create New Project
///// php make_html_element_css_options.php insert ////////
:active
::after
align-content:stretch;
align-content:center;
align-content:flex-start;
align-content:flex-end;
align-content:space-between;
align-content:initial;
align-content:inherit;
align-items:stretch;
align-items:center;
align-items:flex-start;
align-items:flex-end;
align-items:baseline;
align-items:initial;
align-items:inherit;
align-self:auto;
align-self:stretch;
align-self:center;
align-self:flex-start;
align-self:flex-end;
align-self:baseline;
align-self:initial;
align-self:inherit;
all:initial;
all:inherit;
all:unset;
animation:anim1 5s infinite;
animation-delay:2s;
animation-delay:initial;
animation-delay:inherit;
animation-direction:normal;
animation-direction:reverse;
animation-direction:alternate;
animation-direction:alternate-reverse;
animation-direction:initial;
animation-direction:inherit;
animation-duration:3s;
animation-duration:initial;
animation-duration:inherit;
animation-fill-mode:none;
animation-fill-mode:forwards;
animation-fill-mode:backwards;
animation-fill-mode:both;
animation-fill-mode:initial;
animation-fill-mode:inherit;
animation-iteration-count:2;
animation-iteration-count:infinite;
animation-iteration-count:initial;
animation-iteration-count:inherit;
animation-name:myname;
animation-name:none;
animation-name:initial;
animation-name:inherit;
animation-play-state:paused;
animation-play-state:running;
animation-play-state:initial;
animation-play-state:inherit;
animation-timing-function:linear;
animation-timing-function:ease;
animation-timing-function:ease-in;
animation-timing-function:ease-out;
animation-timing-function:ease-in-out;
animation-timing-function:step-start;
animation-timing-function:step-end;
animation-timing-function:steps(int,start|end);
animation-timing-function:cubic-bezier(10,100,100,200);
animation-timing-function:initial;
animation-timing-function:inherit;
backface-visibility:visible;
backface-visibility:hidden;
backface-visibility:initial;
backface-visibility:inherit;
background:yellow url("../images/tim.gif") no-repeat fixed center;
background-attachment:scroll;
background-attachment:fixed;
background-attachment:local;
background-attachment:initial;
background-attachment:inherit;
background-blend-mode:normal;
background-blend-mode:multiply;
background-blend-mode:screen;
background-blend-mode:overlay;
background-blend-mode:darken;
background-blend-mode:lighten;
background-blend-mode:color-dodge;
background-blend-mode:saturation;
background-blend-mode:color;
background-blend-mode:luminosity;
background-clip:border-box;
background-clip:padding-box;
background-clip:content-box;
background-clip:text;
-webkit-background-clip:text;
background-clip:initial;
background-clip:inherit;
background-color:tan;
background-color:transparent;
background-color:initial;
background-color:inherit;
background-image:url("../images/tim.gif");
background-image: url("img_tree.gif"), url("paper.gif");
background-origin:padding-box;
background-origin:border-box;
background-origin:content-box;
background-origin:initial;
background-origin:inherit;
background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:center top;
background-position:center center;
background-position:center bottom;
background-position:50% 50%;
background-position:100px 25px;
background-position:initial;
background-position:inherit;
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
background-repeat:initial;
background-repeat:inherit;
background-size:auto;
background-size:300px 100px;
background-size:30% 30%;
background-size:cover;
background-size:contain;
background-size:initial;
background-size:inherit;
border:4px dotted blue;
border-bottom:5px solid red;
border-bottom-color:coral;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
border-bottom-style:dotted;
border-bottom-width:thin;
border-collapse:separate;
border-color:red;
border-image:url(../images/tim.gif) 30 round;
border-image-outset:10px;
border-image-repeat:repeat;
border-image-slice:30%;
border-image-source:url(../images/tim.gif);
border-image-width:10px;
border-left:4px dotted blue;
border-left-color:coral;
border-left-style:dotted;
border-left-width:thin;
border-radius:50px 20px;
border-radius:50%;
border-right:4px dotted blue;
border-right-color:coral;
border-right-style:dotted;
border-right-width:thin;
border-spacing:15px 50px;
border-style:dotted;
border-top:5px solid red;
border-top-color:coral;
border-top-left-radius:50px 20px;
border-top-right-radius:50px 20px;
border-top-style:dotted;
border-top-width:thin;
border-width:thin;
bottom:10px;
box-decoration-break:clone;
box-shadow:5px 10px #888888;
box-sizing:border-box;
caption-side:bottom;
caret-color:red;
clear:left;
clip:rect(0px,60px,200px,0px);
color:rgb(0,0,255);
column-count:3;
column-fill:balance;
column-gap:40px;
column-rule:4px double #ff00ff;
column-rule-color:#ff0000;
column-rule-style:dotted;
column-rule-width:10px;
column-span:all;
column-width:100px;
columns:100px 3;
counter-increment:my-sec-counter;
counter-reset:my-sec-counter;
cursor:alias;
cursor:all-scroll;
cursor:auto;
cursor:cell;
cursor:context-menu;
cursor:col-resize;
cursor:copy;
cursor:crosshair;
cursor:default;
cursor:e-resize;
cursor:ew-resize;
cursor:grab;
cursor:grabbing;
cursor:help;
cursor:move;
cursor:n-resize;
cursor:ne-resize;
cursor:nesw-resize;
cursor:ns-resize;
cursor:nw-resize;
cursor:nwse-resize;
cursor:no-drop;
cursor:none;
cursor:not-allowed;
cursor:pointer;
cursor:progress;
cursor:row-resize;
cursor:s-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:text;
cursor:URL;
cursor:vertical-text;
cursor:w-resize;
cursor:wait;
cursor:zoom-in;
cursor:zoom-out;
cursor:initial;
cursor:inherit;
direction:ltr;
direction:rtl;
direction:initial;
direction:inherit;
display:inline;
display:block;
display:contents;
display:flex;
display:grid;
display:inline-block;
display:inline-flex;
display:inline-grid;
display:inline-table;
display:list-item;
display:run-in;
display:table;
display:table-caption;
display:table-column-group;
display:table-header-group;
display:table-footer-group;
display:table-row-group;
display:table-cell;
display:table-column;
display:table-row;
display:none;
display:initial;
display:inherit;
empty-cells:show;
empty-cells:hide;
empty-cells:initial;
empty-cells:inherit;
filter:blur(10px);
filter:brightness(10%);
filter:contrast(10%);
filter:drop-shadow(0px 0px 10px black);
filter:grayscale(100%);
filter: brightness(50%);
filter: contrast(50%);
filter:hue-rotate(10deq);
filter:invert(10%);
filter:opacity(.5);
filter:saturate(10%);
filter:sepia(10%);
filter:url();
flex:1;
flex-basis:100px;
flex-direction:row-reverse;
flex-flow:row-reverse wrap;
flex-grow:1;
flex-shrink:3;
flex-wrap:wrap;
float:right;
font:italic bold 12px/30px Georgia, serif;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-family: Arial, Helvetica, sans-serif;
font-family: 'Courier New', Courier, monospace;
font-family: cursive;
font-family:fantasy;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-family: Georgia, 'Times New Roman', Times, serif;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-family: Acme;
font-family: Blinker;
font-family: Syncopate;
font-family: Anton;
font-family: Bangers;
font-family: Black Han Sans;
font-family: Chewy;
font-family: Dancing Script;
font-family: Faster One;
font-family: Freckle Face;
font-family: Lato;
font-family: Londrina Solid;
font-family: Luckiest Guy;
font-family: Mouse Memoirs;
font-family: Nanum Pen Script;
font-family: Neucha;
font-family: Permanent Marker;
font-family: Righteous;
font-family: Sacramento;
font-family: Shadows Into Light;
font-family: Staatliches;
font-family: Vast Shadow;
font-family: Staatliches;
font-family: Odibee Sans;
font-family: Bigelow Rules;
font-family: Creepster;
font-family: Titan One;
font-family: Jolly Lodger;
font-family: Mansalva;
font-family:Arial, Helvetica, sans-serif;
font-kerning:normal;
font-size:150%;
font-size-adjust:0.58;
font-stretch:expanded;
font-style:oblique;
font-variant:small-caps;
font-weight:normal;
font-weight:bold;
font-weight:bolder;
font-weight:lighter;
font-weight:200;
font-weight:initial;
font-weight:inherit;
grid:150px / auto auto auto;
grid-area:2 / 1 / span 2 / span 3;
grid-auto-columns:50px;
grid-auto-flow:column;
grid-auto-rows:150px;
grid-auto-flow:column;
grid-auto-rows:150px;
grid-column:1 / span 2;
grid-column-end:span 3;
grid-column-gap:50px;
grid-column-start:2;
grid-gap:50px;
grid-row:1 / span 2;
grid-row-end:span 3;
grid-row-gap:50px;
grid-row-start:2;
grid-template:150px / auto auto auto;
grid-template-columns:auto auto auto auto;
grid-template-rows:100px 300px;
hanging-punctuation:first;
height:auto;
height:50px;
height:calc(100vh - 100px);
height:calc(50vh - 100px);
height:initial;
height:inherit;
hyphens:manual;
image-rendering:none;
@import:none;
isolation:isolate;
justify-content:flex-start;
justify-content:flex-end;
justify-content:center;
justify-content:space-between;
justify-content:space-around;
justify-content:initial;
justify-content:inherit;
@keyframes:none;
left:auto;
left:35px;
left:calc(100vw - 100px);
left:calc(50vw - 100px);
left:initial;
left:inherit;
letter-spacing:35px;
line-break:none;
line-height:1.6;
list-style:square inside url("images/tim.gif");
list-style-image:url('sqpurple.gif');
list-style-position:outside;
list-style-type:circle;
margin:10px 5px 15px 20px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
max-height:10px;
max-width:10px;
@media:none;
min-height:200px;
min-width:200px;
mix-blend-mode:darken;
object-fit:fill;
object-fit:contain;
object-fit:cover;
object-fit:scale-down;
object-fit:none;
object-fit:initial;
object-fit:inherit;
overscroll-behavior:auto;
overscroll-behavior:contain;
overscroll-behavior:none;
overscroll-behavior:auto contain;
object-position:5px 10%;
opacity:0.5;
order:1;
orphans:none;
outline:5px dotted green;
outline-color:green;
outline-offset:15px;
outline-style:dotted;
outline-width:thick;
overflow:visible;
overflow:hidden;
overflow:scroll;
overflow:auto;
overflow:initial;
overflow:inherit;
overflow-wrap:none;
overflow-x:visible;
overflow-x:hidden;
overflow-x:scroll;
overflow-x:auto;
overflow-x:initial;
overflow-x:inherit;
overflow-y:visible;
overflow-y:hidden;
overflow-y:scroll;
overflow-y:auto;
overflow-y:initial;
overflow-y:inherit;
padding:10px 5px 15px 20px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
page-break-after:always;
page-break-before:always;
page-break-inside:avoid;
perspective:100px;
perspective-origin:left;
pointer-events:none;
position:static;
position:relative;
position:absolute;
position:fixed;
position:relative;
position:sticky;
position:initial;
position:inherit;
pointer-events:none;
quotes:"'" "'";
resize:none;
resize:both;
resize:horizontal;
resize:vertical;
resize:initial;
resize:inherit;
right:auto;
right:100px;
right:initial;
right:inherit;
scroll-behavior:auto;
scroll-behavior:smooth;
scroll-behavior:initial;
scroll-behavior:inherit;
scroll-snap-type:none;
scroll-snap-type:x;
scroll-snap-type:y;
scroll-snap-type:block;
scroll-snap-type:inline;
scroll-snap-type:both;
scroll-snap-type:x mandatory;
scroll-snap-type:y proximity;
scroll-snap-type:both mandatory;
tab-size:tab-size: 16;
table-layout:auto;
text-align:center;
text-align-last:center;
text-combine-upright:none;
text-decoration:line-through;
text-decoration-color:red;
text-decoration-line:overline;
text-decoration-style:underline;
text-indent:50px;
text-justify:justify;
text-orientation:none;
text-overflow:ellipsis;
text-shadow:2px 2px #ff0000;
text-transform:uppercase;
text-underline-position:none;
text-overflow:ellipsis;
top:auto;
top:100px;
top:calc(100vh - 100px);
top:calc(50vh - 100px);
top:initial;
top:inherit;
transform:rotate(20deg);
transform-origin:20% 40%;
transform-style:preserve-3d;
transition:width 2s;
transition-delay:2s;
transition-duration:5s;
transition-property:width;
transition-timing-function:linear;
user-select:auto;
user-select:none;
user-select:text;
user-select:all;
vertical-align:baseline;
visibility:visible;
visibility:hidden;
visibility:collapse;
visibility:initial;
visibility:inherit;
white-space:nowrap;
width:auto;
width:100px;
width:calc(100vw - 100px);
width:calc(50vw - 100px);
width:initial;
width:inherit;
word-break:break-all;
word-spacing:30px;
word-wrap:break-word;
writing-mode:horizontal-tb;
z-index:auto;
z-index:-1;
z-index:100;
z-index:1000;
z-index:initial;
z-index:inherit;
animation:circle 10s infinite;
animation:m_blur 5s infinite;
animation:m_left_right 5s infinite;
animation:m_down 5s infinite;
animation:t_scale 5s infinite;
animation:m_width 5s infinite;
animation:m_scale 5s infinite;
animation:fade 5s infinite;
animation:fade2 5s infinite;
animation:m_rotate 5s infinite;
animation:test 5s infinite;
animation:test2 8s infinite;
animation:test3 5s infinite;
animation:anim1 5s infinite;
color:white;
color:black;
padding:50px;
margin:50px;
position:absolute;
position:relative;
top:100px;
left:100px;
width:100px;
height:100px;
background-color:black;
background-color:transparent;
border-radius:50%;
box-shadow:5px 5px 10px black;
transform: rotate(20deg);
transform: skewY(20deg);
transform: scaleY(1.5);
transform: translateX(-50%);
white-space: nowrap;
transform: scale(2);
filter:blur(4px);
background: linear-gradient(green, yellow);
background-image:url(../Live/background-images/background.jpg);
background-image:url(../Desktop2004/images/Greenstone.bmp);
background-image:url(background.png);
left: calc(100vw - 150px);
top: calc(100vh - 150px);
cursor: url("../images/cursor_1.png"),url("../images/cursor_1.cur"),default;
overscroll-behavior-y:none;
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: linear-gradient(red, yellow);
background-image: linear-gradient(to right, red , yellow);
background-image: linear-gradient(to bottom right, red, yellow);
background-image: linear-gradient(angle, color-stop1, color-stop2);
background-image: linear-gradient(-90deg, red, yellow);
background-image: linear-gradient(black, white, black);
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: radial-gradient(red, yellow, green);
background-image: radial-gradient(black 25%, white);
background-image: radial-gradient(white 25%, black);
background-image: radial-gradient(circle, red, yellow, green);
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
text-shadow: 2px 2px;
text-shadow: 2px 2px red;
text-shadow: 2px 2px 5px red;
text-shadow: 2px 2px 4px #000000;
text-shadow: 0 0 3px #FF0000;
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
box-shadow: 10px 10px;
box-shadow: 10px 10px grey;
box-shadow: 10px 10px 5px grey;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
left:calc(50vw - 25vw);
width:calc(50vw);
left:calc(50vw - 25vw);
height:calc(100vh - 20vh);
width:min(500px, 50%);
width:max(500px, 50%);
font-size:clamp(2rem, 5vw, 1.25rem);
-webkit-box-reflect:below 1px linear-gradient(transparent, blue);
box-shadow:0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
filter: drop-shadow(30px 10px 4px #000000);
clip-path: ellipse(115px 55px at 50% 40%);
clip-path: polygon(50% 20%, 90% 80%, 10% 80%);
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
transform: scaleX(-1);
transform: scaleY(-1);
background-image: linear-gradient(red, yellow);
background-clip:text;
-webkit-background-clip:text;
color: transparent;
font-size: 10em;
Clear Text
or
Usefull Tags
a
abbr
acronym
address
applet
area
article
aside
audio
b
base
basefont
bdi
bdo
big
blockquote
button
canvas
caption
center
cite
code
col
colgroup
data
datalist
dd
del
details
dfn
dialog
dir
div
dl
dt
em
embed
fieldset
figcaption
figure
font
footer
form
frame
frameset
h1
h2
h3
h4
h5
h6
head
header
hr
html
i
iframe
hr
img
input
ins
kbd
label
legend
li
link
main
map
mark
meta
meter
nav
noframes
noscript
object
ol
optgroup
option
output
p
param
picture
pre
progress
q
rp
rt
ruby
s
samp
script
select
section
small
source
span
strike
strong
style
sub
summary
sup
svg
table
tbody
td
template
textarea
tfoot
th
thead
time
title
tr
track
tt
u
ul
var
video
wbr
Create Element
Remove Element
Google on CSS Info:
X
0
:: element ::
:: code ::
@keyframes anim1{80% {transform: scale(2);}10%{transform: scale(3);}50% {background-color: red;}}
+
-
/
Total Bugs: 0
Usefull Tags
a
abbr
acronym
address
applet
area
article
aside
audio
b
base
basefont
bdi
bdo
big
blockquote
button
canvas
caption
center
cite
code
col
colgroup
data
datalist
dd
del
details
dfn
dialog
dir
div
dl
dt
em
embed
fieldset
figcaption
figure
font
footer
form
frame
frameset
h1
h2
h3
h4
h5
h6
head
header
hr
html
i
iframe
hr
img
input
ins
kbd
label
legend
li
link
main
map
mark
meta
meter
nav
noframes
noscript
object
ol
optgroup
option
output
p
param
picture
pre
progress
q
rp
rt
ruby
s
samp
script
select
section
small
source
span
strike
strong
style
sub
summary
sup
svg
table
tbody
td
template
textarea
tfoot
th
thead
time
title
tr
track
tt
u
ul
var
video
wbr
X
