3c3,16 < Apply a Mask - RJM Programming - June, 2025 ... thanks to https://www.w3schools.com/cssref/playdemo.php?filename=playcss_clip-path --- > Background Position Various - RJM Programming - June, 2025 > > > > > > AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial | Robert James Metcalfe Blog > > > > > > > 5,6c18,400 < .circle40 { < clip-path: circle(40%); --- > /* Thanks to https://www.sitepoint.com/css3-shuffled-paper/#:~:text=Creating%20a%20crumpled%20paper%20effect,add%20texture%20to%20the%20paper. */ > .papXers, .papXers:before, .papXers:after { > background-color: #fff; > border: 1px solid #ccc; > box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); > } > > .papXers { > position: relative; > width: 50%; > padding: 2em; > margin: 50px auto; > } > > .papXers:before, .papXers:after { > content: ""; > position: absolute; > left: 0; > top: 0; > /* width: 100%; > height: 100%; */ > -webkit-transform: rotateZ(2.5deg); > -o-transform: rotate(2.5deg); > transform: rotateZ(2.5deg); > z-index: -1; > } > > .storybook { > border-image: url('data:image/svg+xml,☌'); > border-image-slice: 0 0 0 100; > border-image-width: 20px; > border-image-outset: 1px; > border-image-repeat: repeat; > padding-left: 20px; > } > > .papers { > background-color: #fefefe; > background-image: linear-gradient( > 30deg, > rgba(83,148,253,0.05) 12%, > transparent 12.5%, > transparent 87%, > rgba(83,148,253,0.05) 87.5%, > rgba(83,148,253,0.05) > ), > linear-gradient( > 150deg, > rgba(83,148,253,0.05) 12%, > transparent 12.5%, > transparent 87%, > rgba(83,148,253,0.05) 87.5%, > rgba(83,148,253,0.05) > ), > linear-gradient( > 30deg, > rgba(83,148,253,0.05) 12%, > transparent 12.5%, > transparent 87%, > rgba(83,148,253,0.05) 87.5%, > rgba(83,148,253,0.05) > ), > linear-gradient( > 150deg, > rgba(83,148,253,0.05) 12%, > transparent 12.5%, > transparent 87%, > rgba(83,148,253,0.05) 87.5%, > rgba(83,148,253,0.05) > ), > linear-gradient( > 60deg, > rgba(83,148,253,0.05) 25%, > transparent 25.5%, > transparent 75%, > rgba(83,148,253,0.05) 75%, > rgba(83,148,253,0.05) > ), > linear-gradient( > 60deg, > rgba(83,148,253,0.05) 25%, > transparent 25.5%, > transparent 75%, > rgba(83,148,253,0.05) 75%, > rgba(83,148,253,0.05) > ); > background-size: 48px 84px; > background-position: > 0 0, > 0 0, > 24px 42px, > 24px 42px, > 0 0, > 24px 42px; > } > > > > @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: portrait) { > .nav-previous a { z-index:187; font-size:24px; opacity:0.6; font-stretch:condensed; background-color:rgba(250,218,221,0.7); } > .nav-next a { z-index:187; font-size:24px; opacity:0.6; font-stretch:condensed; background-color:rgba(184,188,134,0.7); } > } > > @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: landscape) { > .nav-previous a { z-index:187; font-size:24px; opacity:0.6; font-stretch:condensed; background-color:rgba(250,218,221,0.7); } > .nav-next a { z-index:187; font-size:24px; opacity:0.6; font-stretch:condensed; background-color:rgba(184,188,134,0.7); } > } > > td code { overflow-x:scroll; } > > .linkhints { > -webkit-animation: glow 1s ease-in-out infinite alternate; > -moz-animation: glow 1s ease-in-out infinite alternate; > animation: glow 1s ease-in-out infinite alternate; > margin-top:10px; > } > > > .zglow { > -webkit-animation: xglow 1s ease-in-out infinite alternate; > -moz-animation: xglow 1s ease-in-out infinite alternate; > animation: xglow 1s ease-in-out infinite alternate; > margin-top:10px; > } > > > .custom-alert { > display: inline-block; > visibility: visible; > background-color: rgba(102,102,102,0.8); > color: #fff; > text-align: enter; > margin: 5% auto; > padding: 12px 28px; > position: fixed; > z-index: 123; > top: 50px; > left: 100px; > } > > /* Portrait and Landscape ... thanks to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */ > @media only screen > and (min-device-width: 768px) > and (max-device-width: 1024px) > and (-webkit-min-device-pixel-ratio: 1) { > .alignnone { width: 98% !important; } > .alignnone > img { width: 98% !important; } > } > > > /* Portrait and Landscape iPhone */ > @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: portrait) { > div.entry-content > div.wp-caption.alignnone { width: 98% !important; } > div.entry-content > div.wp-caption.alignnone > a > img { width: 98% !important; } > } > > @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: landscape) { > div.entry-content > div.wp-caption.alignnone { width: 98% !important; } > div.entry-content > div.wp-caption.alignnone > a > img { width: 98% !important; } > } > > > /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */ > > @-webkit-keyframes glow { > from { > box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073; > } > > to { > box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6; > } > } > > > @keyframes xglow { > from { > box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073; > } > > to { > box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6; > } > } > > @-webkit-keyframes xglow { > from { > box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073; > } > > to { > box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6; > } > } > > > ol { counter-reset: item; } > ol>li { display: block; } > ol>li:before { content: " " counter(item) " "; counter-increment: item; color: #1f1f1f; background-color: #f0f0f0; border:1px solid olive; } > ol li:not(ul>li):nth-of-type(1) { list-style: none; } > ol li:not(ul>li):nth-of-type(2) { list-style: none; } > ol li:not(ul>li):nth-of-type(3) { list-style: none; } > ol li:not(ul>li):nth-of-type(4) { list-style: none; } > ol li:not(ul>li):nth-of-type(5) { list-style: none; } > ol li:not(ul>li):nth-of-type(6) { list-style: none; } > ol li:not(ul>li):nth-of-type(7) { list-style: none; } > ol li:not(ul>li):nth-of-type(8) { list-style: none; } > ol li:not(ul>li):nth-of-type(9) { list-style: none; } > ol li:not(ul>li):nth-of-type(10) { list-style: none; } > ol li:not(ul>li):nth-of-type(11) { list-style: none; } > ol li:not(ul>li):nth-of-type(12) { list-style: none; } > ol li:not(ul>li):nth-of-type(13) { list-style: none; } > ol li:not(ul>li):nth-of-type(14) { list-style: none; } > ol li:not(ul>li):nth-of-type(15) { list-style: none; } > ol li:not(ul>li):nth-of-type(16) { list-style: none; } > ol li:not(ul>li):nth-of-type(17) { list-style: none; } > ol li:not(ul>li):nth-of-type(18) { list-style: none; } > ol li:not(ul>li):nth-of-type(19) { list-style: none; } > ol li:not(ul>li):nth-of-type(20) { list-style: none; } > ol li:not(ul>li):nth-of-type(21) { list-style: none; } > ol li:not(ul>li):nth-of-type(22) { list-style: none; } > ol li:not(ul>li):nth-of-type(23) { list-style: none; } > ol li:not(ul>li):nth-of-type(24) { list-style: none; } > ol li:not(ul>li):nth-of-type(25) { list-style: none; } > ol li:not(ul>li):nth-of-type(26) { list-style: none; } > ol li:not(ul>li):nth-of-type(27) { list-style: none; } > ol li:not(ul>li):nth-of-type(28) { list-style: none; } > ol li:not(ul>li):nth-of-type(29) { list-style: none; } > ol li:not(ul>li):nth-of-type(30) { list-style: none; } > > > ol li:not(ul>li):nth-of-type(1)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(2)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(3)::before { background-color:#f0c0c0; content:'\000033\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(4)::before { background-color:#f0c0c0; content:'\000034\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(5)::before { background-color:#f0c0c0; content:'\000035\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(6)::before { background-color:#f0c0c0; content:'\000036\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(7)::before { background-color:#f0c0c0; content:'\000037\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(8)::before { background-color:#f0c0c0; content:'\000038\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(9)::before { background-color:#f0c0c0; content:'\000039\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(10)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000030\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(11)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000031\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(12)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000032\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(13)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000033\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(14)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000034\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(15)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000035\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(16)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000036\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(17)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000037\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(18)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000038\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(19)::before { background-color:#f0c0c0; content:'\000031\00fe0f\0020e3\000039\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(20)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000030\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(21)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000031\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(22)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000032\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(23)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000033\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(24)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000034\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(25)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000035\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(26)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000036\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(27)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000037\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(28)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000038\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(29)::before { background-color:#f0c0c0; content:'\000032\00fe0f\0020e3\000039\00fe0f\0020e3'; } > ol li:not(ul>li):nth-of-type(30)::before { background-color:#f0c0c0; content:'\000033\00fe0f\0020e3\000030\00fe0f\0020e3'; } > > > .mypclass { color:rgb(185,127,206); } > #mypid { color:rgb(185,127,206); } > .mypclass2 { background-color:rgb(185,127,206); color:'black'; } > .mypclass22 { background-color:rgb(185,127,206); color:'black'; } > #mypid2 { background-color:rgb(185,127,206); color:'black'; } > > > #s { > width: 55% !important; > } > > #ahomeis { > color: #ffffff; > font: 24pt Arial; > text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); > } > > code { > width:90%; > background-color:#F9F9F9; > margin-top: 10px; > margin-bottom: 10px; > padding:20px 20px; > border:1px dashed blue; > display: inline-block; > text-overflow: ellipsis; > white-space: pre-wrap; /* css-3 */ > white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ > white-space: -pre-wrap; /* Opera 4-6 */ > white-space: -o-pre-wrap; /* Opera 7 */ > word-wrap: break-word; /* Internet Explorer 5.5+ */ > }​ > > blockquote { > display: block; > padding: 18px; > border-top: 1px solid #e1cc89; > border-bottom: 1px solid #e1cc89; > margin: 5px; > text-indent: 4px; > background: url('//www.rjmprogramming.com.au/ITblog/closequote1.gif') bottom right no-repeat,url('//www.rjmprogramming.com.au/ITblog/openquote1.gif') top left no-repeat; > background-color: #faebbc; > } > > blockquote p { > display: block; > padding: 18px; > margin: 5px; > text-indent: 4px; > background: url('//www.rjmprogramming.com.au/ITblog/closequote1.gif') bottom right no-repeat,url('//www.rjmprogramming.com.au/ITblog/openquote1.gif') top left no-repeat; > background-color: #faebbc; > } > > blockquote.rightbq { > float: right; > width: 250px; > } > > blockquote.rightbq p { > display: inline; > float: right; > width: 250px; > } > > div.rightbq { > margin-top: -22px; > } > > > .iconlist > { > list-style: none; > margin: 0; > padding: 0; > } > > > li.one { > background-image: url('//www.rjmprogramming.com.au/PHP/one.jpg?rnd=6982158'); > background-position: left; > background-repeat: no-repeat; > background-size: 128px 80px; > height: 150px; > text-indent: 0px; > } > > li.two { > background-image: url('//www.rjmprogramming.com.au/PHP/two.jpg?rnd=6199472'); > background-position: left; > background-repeat: no-repeat; > background-size: 128px 80px; > height: 150px; > text-indent: 0px; > } > > li.three { > background-image: url('//www.rjmprogramming.com.au/PHP/three.jpg?rnd=5313346'); > background-position: left; > background-repeat: no-repeat; > background-size: 128px 80px; > height: 150px; > text-indent: 0px; > } > > li.four { > background-image: url('//www.rjmprogramming.com.au/PHP/four.jpg?rnd=18445490'); > background-position: left; > background-repeat: no-repeat; > background-size: 128px 80px; > height: 150px; > text-indent: 0px; > } > > li.five { > background-image: url('//www.rjmprogramming.com.au/PHP/five.jpg?rnd=12246793'); > background-position: left; > background-repeat: no-repeat; > background-size: 128px 80px; > height: 150px; > text-indent: 0px; 8,9c402,569 < .circle20 { < clip-path: circle(20%); --- > > li.six { > background-image: url('//www.rjmprogramming.com.au/PHP/six.jpg?rnd=454102'); > background-position: left; > background-repeat: no-repeat; > background-size: 128px 80px; > height: 150px; > text-indent: 0px; > } > > li.seven { > background-image: url('//www.rjmprogramming.com.au/PHP/seven.jpg?rnd=3078212'); > background-position: left; > background-repeat: no-repeat; > background-size: 128px 80px; > height: 150px; > text-indent: 0px; > } > > li.eight { > background-image: url('//www.rjmprogramming.com.au/PHP/eight.jpg?rnd=11954030'); > background-position: left; > background-repeat: no-repeat; > background-size: 128px 80px; > height: 150px; > text-indent: 0px; > } > > > /* Thanks to https://cssgradient.io/blog/css-gradient-text/ below */ > > /* > b:not(.dyk) { > background: -webkit-linear-gradient(#eee, #333); > -webkit-background-clip: text; > -webkit-text-fill-color: transparent; > } > code b { > background: -webkit-linear-gradient(#eee, #333); > -webkit-background-clip: text; > -webkit-text-fill-color: transparent; > } > */ > /* > strong:not(.dyk) { > background: -webkit-linear-gradient(#eee, #333); > -webkit-background-clip: text; > -webkit-text-fill-color: transparent; > } > */ > code strong { > background: -webkit-linear-gradient(#eee, #333); > -webkit-background-clip: text; > -webkit-text-fill-color: transparent; > } > > > /* Thanks to https://codepen.io/bibby0912/pen/mErWyA for basis of idea below ... > applied at http://www.rjmprogramming.com.au/ITblog/marquee-placeholder-primer-tutorial/ */ > > .container { > /* margin: auto; */ > /* width: 100%; > height: 900px; */ > /* display:flex; */ > /* width: 40vw; > height: 40vh; */ > /* outline: 1px solid red;*/ > /* border: 20px solid transparent; */ > /* margin-bottom: 100px; */ > height: 100%; > width: 100%; > border: 8px solid transparent; > box-sizing: border-box; > padding: 1rem; > overflow: visible; > display:flex; > /* text-transform: uppercase; > font-weight: 900; > font-family: "Open Sans","Source Sans Pro",Helvetica,sans-serif; > font-size: 1em; > letter-spacing: 1em; > padding: 1rem; > display:flex; > justify-content: center; > align-items: center; */ > } > > .demo { > /*background-image: > linear-gradient(white, white), > linear-gradient(180deg, cornflowerblue, purple);*/ > > background-image: > linear-gradient(white, white), > linear-gradient(270deg, #00D7B9, #B95DD7 50%, #FFB367 100%); > > background-repeat: no-repeat; > background-origin: padding-box, border-box; > /* text-align: center; */ > } > > .animated { > background-image: > linear-gradient(white, white), > /* linear-gradient(180deg, cornflowerblue, purple 50%, cornflowerblue); */ > linear-gradient(180deg, green, lightblue 50%, yellow); > > background-repeat: no-repeat; > background-size: 100% 100%, 100% 200%; > /* background-size: cover; */ > background-position: 0 0, 0 100%; > background-origin: padding-box, border-box; > animation: highlight 1s infinite alternate; > } > > @keyframes highlight { > 100% { > background-position: 0 0, 0 0; > } > } > > > > > /* Like ... Glyph, by Harry Roberts ... at //css-tricks.com/examples/hrs/ ... thanks */ > > hr:not(.ybi) { > padding: 0; > border: none; > border-top: medium double #333; > color: green; > text-align: center; > } > > hr:not(.ybi):after { > content: '\00261f'; /* via ... //www.utf8-chartable.de/unicode-utf8-table.pl?start=9728 ... thanks */ > display: inline-block; > position: relative; > top: -0.55em; /* 7em; */ > font-size: 1.2em; /* 1.5em; */ > padding: 0 0.2em; /* 0.25em; */ > background: #ffeff0; > } > > > .dyk { background-color: yellow; border-bottom: 7px solid #f7f7f7; border-top: 7px solid #f7f7f7; } > .dyk + * { background-color: #f7f7f7; border-bottom: 7px solid #f7f7f7; border-top: 7px solid #f7f7f7; } > > span.comments-link:after { > content: '\A ___________________________'; > white-space: pre; > word-wrap: break-word; > color: green; > font-size: 48px; > } > > ul.children li.page_item:before { > color: orange; > content: '\🚲 \0000a0'; > } > > ul.children li.page_item:after { > content: no-close-quote; > } > > ul.noclass { > list-style: none; 11,12c571,578 < .ellipse40 { < clip-path: ellipse(25% 40% at 50% 50%); --- > > > ul.children { > font-size: 10px; > width: 580px !important; > column-count: 3; > -webkit-column-count: 3; > -moz-column-count: 3; 14,15c580,588 < .ellipse25 { < clip-path: ellipse(25% 25% at 50% 50%); --- > > ul.noclass li:before { > list-style: none; > float: left; > margin-left: -15px; > color: red; > content: '\⛪ \0000a0'; > font-size: 1.2em; > font-weight: bold; 17,18c590,596 < .polygon6 { < clip-path: polygon(50% 0%, 0% 100%, 100% 100%); --- > > ul.noclass li:after { > list-style: none; > color: red; > content: no-close-quote; > font-size: 1.2em; > font-weight: bold; 20,21c598,608 < .polygon8 { < clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); --- > > > ul.confounded li:before { > font-family: Georgia,'Bitstream Charter',serif; > font-size: 16px; > font-style: normal; > font-weight: normal; > list-style: none; > float: left; > color: black; > content: 'Maybe you are used to Emoji in conversations so hope you are not confused 😖'; 23,24c610,640 < .inset5 { < clip-path: inset(5% 20% 15% 10%); --- > > ul.happy li:before { > font-family: Georgia,'Bitstream Charter',serif; > font-size: 16px; > font-style: normal; > font-weight: normal; > list-style: none; > float: left; > color: black; > content: 'seeing such characters as bullet points here in these blog postings. We are happy 😁'; > } > > ul.relieved li:before { > font-family: Georgia,'Bitstream Charter',serif; > font-size: 16px; > font-style: normal; > font-weight: normal; > list-style: none; > float: left; > color: black; > content: 'to share with you some UTF-8 syntax, as above that is not very difficult to learn. 😌'; > } > > > > /* Portrait and Landscape */ > @media only screen > and (min-device-width: 1024px) > and (max-device-width: 1366px) > and (-webkit-min-device-pixel-ratio: 2) { > code { opacity: 0.7 !important; } 27,29c643,648 < #divhost { < display: flex; < background-color: white; --- > @media only screen > and (min-device-width: 1024px) > and (max-device-width: 1024px) > and (orientation: portrait) > and (-webkit-min-device-pixel-ratio: 2) { > code { opacity: 0.7 !important; } 32a652,711 > > > > > > > > > > > > > > > > > > > > > > > > > > 34c713 < var is64=false, plus=' ', lastuserstyle='', iyo=0; --- > var is64=false, plus=' '; 38d716 < var clnm=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('class=')[1] ? decodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('class=')[1].split('&')[0]).replace(/\+/g,' ') : ''; 56c734 < startstyle=inta.replace(/\ \!important/g,''); --- > startstyle=inta; 61c739 < preint=inta.split('div')[0]; --- > preint=inta.split('blockquote')[0]; 63c741 < intas=(inta + ' ').substring(preint.length).split(' intas=(inta + ' ').substring(preint.length).split('' + yourown.trim() + ''; < document.getElementById('mysel').value='yoclass' + iyo; < document.getElementById('dstyle').innerHTML+=' .yoclass' + iyo + (' { ' + yourown.trim() + ' } ').replace('; }',' !important; }'); < iyo++; --- > document.getElementById('mysel').innerHTML+=''; > document.getElementById('mysel').value=yourown.trim() + ''; 88,90c762 < prefixy=document.getElementById('taidea').value.split(' data-yourown="')[1].split('"')[0] + ','; < //document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="' + yourown.trim() + ','); < document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="' + prefixy.replace(/\,$/g,''), ' data-yourown="' + prefixy + yourown.trim().replace(/\;$/g,'') + ';'); --- > document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="' + yourown.trim() + ','); 96,99c768,769 < document.getElementById('mysel').innerHTML+=''; < document.getElementById('mysel').value='yoclass' + iyo; < document.getElementById('dstyle').innerHTML+=' .yoclass' + iyo + ' { ' + yourown.trim() + ' !important; } '; < iyo++; --- > document.getElementById('mysel').innerHTML+=''; > document.getElementById('mysel').value=yourown.trim() + ';'; 106,107c776 < prefixy=document.getElementById('taidea').value.split(' data-yourown="')[1].split('"')[0] + ','; < document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="' + prefixy.replace(/\,$/g,''), ' data-yourown="' + prefixy + yourown.trim().replace(/\;$/g,'') + ';'); --- > document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="' + yourown.trim() + ';,'); 116,122c785,787 < < if (1 == 1) { < if (document.getElementById('divhost').innerHTML.indexOf(' class="yo') != -1) { < for (ik=1; ik if (selovalue.indexOf('background-repeat:') != -1) { > if (document.getElementById('divhost').innerHTML.indexOf('background-repeat:no-repeat;') != -1) { > document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace('background-repeat:no-repeat;', selovalue); 124,132c789,793 < } else if (document.getElementById('divhost').innerHTML.indexOf(' class="') != -1) { < if (document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0].indexOf(' yo') != -1) { < for (ik=1; ik } else if (document.getElementById('divhost').innerHTML.indexOf('background-repeat:repeat;') != -1) { > document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace('background-repeat:repeat;', selovalue); > document.getElementById('taidea').value=document.getElementById('divhost').innerHTML; > } else if (document.getElementById('divhost').innerHTML.indexOf(defoptit + '">') != -1) { > document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(defoptit + '">', selovalue + defoptit + '">'); 135c796 < document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' ', ' class="' + selovalue + '" '); --- > document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace('">', selovalue + '">'); 138,139c799 < lastuserstyle=document.getElementById('mysel').innerHTML.split(' value="' + selovalue + '">')[1].split('<')[0] + ''; < document.getElementById('defopt').innerText='Styling ideas [' + lastuserstyle + ']'; --- > selo.value=''; 141c801,817 < } --- > } else if (selovalue.indexOf('background-position') == -1) { > if (document.getElementById('divhost').innerHTML.indexOf(';' + selovalue.split(':')[0] + ':') != -1) { > document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(';' + selovalue.split(':')[0] + ':' + document.getElementById('divhost').innerHTML.split(';' + selovalue.split(':')[0] + ':')[1].split(';')[0] + ';', ';' + selovalue); > document.getElementById('taidea').value=document.getElementById('divhost').innerHTML; > } else if (document.getElementById('divhost').innerHTML.indexOf('background-repeat:') != -1) { > document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace('background-repeat:', selovalue + 'background-repeat:'); > document.getElementById('taidea').value=document.getElementById('divhost').innerHTML; > } else if (document.getElementById('divhost').innerHTML.indexOf(defoptit + '">') != -1) { > document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(defoptit + '">', selovalue + defoptit + '">'); > document.getElementById('taidea').value=document.getElementById('divhost').innerHTML; > } else { > document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace('">', selovalue + '">'); > document.getElementById('taidea').value=document.getElementById('divhost').innerHTML; > } > selo.value=''; > return ''; > } 180,181c856,857 < if (eval('' + inta.split('clip-').length) > 1) { < origdefopt='clip-' + (inta.split('clip-')[1].split(';')[0].split('"')[0] + ';').replace(/^\;/g,''); --- > if (eval('' + inta.split('repeat;').length) > 1) { > origdefopt=(inta.split('repeat;')[1].split(';')[0].split('"')[0] + ';').replace(/^\;/g,''); 193,194c869,870 < if (eval('' + altta.split('clip-').length) > 1) { < defoptit='clip-' + (altta.split('clip-')[1].split(';')[0].split('"')[0] + ';').replace(/^\;/g,''); --- > if (eval('' + altta.split('repeat;').length) > 1) { > defoptit=(altta.split('repeat;')[1].split(';')[0].split('"')[0] + ';').replace(/^\;/g,''); 203,205c879 < document.getElementById('mysel').innerHTML+=''; < document.getElementById('dstyle').innerHTML+=' .yoclass' + iyo + ' { ' + newuns[inew].replace(/\;$/g,'') + ' !important; } '; < iyo++; --- > document.getElementById('mysel').innerHTML+=''; 219,229d892 < < if (clnm.trim() != '') { < if (document.getElementById('divhost').innerHTML.indexOf(' class="') == -1) { < document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' ', ' class="' + clnm + '" '); < } else { < document.getElementById('mybq').className=clnm; < } < iyo=100; < document.getElementById('taidea').value=document.getElementById('divhost').innerHTML; < clnm=' '; < } 247c910 < anchor.href = 'mailto:' + emis.trim() + '?subject=Mask%20ideas&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + encodeURIComponent(sofares)); --- > anchor.href = 'mailto:' + emis.trim() + '?subject=Background%20Position%20ideas&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + encodeURIComponent(sofares)); 256c919 < anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares)); --- > anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '&taidea=' + ourencodeURIComponent(sofares)); 263c926 < anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares)); --- > anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '&taidea=' + ourencodeURIComponent(sofares)); 274,278c937 < if (('' + document.getElementById('mybq').getAttribute('data-yourown')).replace(/^undefined/g,'').replace(/^null/g,'') != '') { < lastuserstyle=('' + document.getElementById('mybq').getAttribute('data-yourown')).replace(/\ \!important/g,'').replace(/\;\,/g,';').replace(/\;/g,' !important;').replace(/\:/g,': '); < return inswas.split(' style="')[1].split('"')[0].replace(/\:/g,': ') + lastuserstyle; < } < return inswas.split(' style="')[1].split('"')[0] + lastuserstyle; --- > return inswas.split(' style="')[1].split('"')[0]; 280c939 < return inswas + lastuserstyle; --- > return inswas; 284c943 < //alert(btoa(unescape(encodeURIComponent(' //alert(btoa(unescape(encodeURIComponent('').replace(/\>\>$/g,'>')); --- > outsis=encodeURIComponent(juststyle(insis.split('>').replace(/\>\>$/g,'>')); 291c950 < outsis=btoa(unescape(encodeURIComponent(juststyle(insis.split('>').replace(/\>\>$/g,'>')))); --- > outsis=btoa(unescape(encodeURIComponent(juststyle(insis.split('>').replace(/\>\>$/g,'>')))); 314c973 < anchor.href = 'mailto:' + emis.trim() + '?subject=Mask%20ideas&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + encodeURIComponent(sofares)); --- > anchor.href = 'mailto:' + emis.trim() + '?subject=Background%20Position%20ideas&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + encodeURIComponent(sofares)); 323c982 < anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares)); --- > anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + ourencodeURIComponent(sofares)); 330c989 < anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares)); --- > anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + ourencodeURIComponent(sofares)); 340,349c999,1004 <

Apply a Mask

<

RJM Programming - June, 2025 ...   


<

Thanks to https://www.w3schools.com/cssref/playdemo.php?filename=playcss_clip-path

<
<
< The rain
< In Spain
< Falls mainly
< On the plain
<
--- >

Background Position Various


>

RJM Programming - June, 2025 ...   


>
>
>

Who’d have thought it?!

>
352,359c1007,1011 <
<