Coding tips for l0sers

Hello world ! This page aims to display some lines code to help users editing their pages. Thank you for passing by !

Adding an icon in the title of the head :
<link rel="icon" type="image/png" href="images/roach.png">
Editing scrollbar (code in the <style>): ::-ms-overflow-style {none;} ::scrollbar-width: {none;} ::-webkit-scrollbar {width: 1px;height:1px} ::-webkit-scrollbar-track {background: black;} or ::-webkit-scrollbar-track { background: transparent;} ::-webkit-scrollbar-thumb {background: black;} or ::-webkit-scrollbar-thumb {background-image: url("https:///"); handle on over ::-webkit-scrollbar-thumb:hover { background-image: url("")}

Adding an image for a cursor (recommanded size 16x16, 32x32) in style:
*{cursor: url(https://pumpkin-ninja.neocities.org/images/cursor-moth.png), auto;}
Editing a, a:hover :
a{ color:blue; text-decoration:none;} a:hover {color:darkred;}
ul list in a nav-bar using iframe (100% height&width) to display (creating the page.html separately then linking in the a) :
<ul> <li><a href="overview.html" target="iframe">Overview</a></li> <li><a href="about.html" target="iframe">About</a></li> <li><a href="iterations.html" target="iframe">Iterations</a></li> <li><a href="artwork.html" target="iframe">Art and Depictions</a></li> </ul>  <iframe src="https://ninjaweb.neocities.org/index.html" name="iframe" height="500px" width="900px" title="JOURNAL"></iframe>
Using img src/onmouseout to onmouseover link to a :
<a href="https:/link"><img src="/rooms/door.png" alt="door" onmouseover="this.src='/rooms/door-open.png';" onmouseout="this.src='/rooms/door.png';" height="52px" style=""></a>

tree view (https://www.w3schools.com/howto/howto_js_treeview.asp)

toggle dark mode (https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp)

online detection (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_offline_detection)

redirect a webpage https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_redirect_webpage

border-style:

prompt()

type="text/javascript"; function swapStyleSheet (sheet) { document.getElementById('pagestyle').setAttribute('href', sheet); }

^ script

Vertical-align MIDDLE

DRAG and DROP ( http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm)

GREENGARDEN project

ok crazy thing : css carnet (https://cohost.org/css)

LAIN font

Add comment html

Add comment CSS

Add comment script / py

text

moew uppercase fading text : https://www.w3schools.com/howto/howto_css_fading_buttons.asp

img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s; 


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

POPOVER
in style/css:

html

details § summary

click to open

blabla

pre style pre-wrap

Text Direction "bidi-override"
this change the text diretion ! :this change the text diretion !
The direction and unicode-bidi properties can be used to change the text direction of an element:

small-caps:

text-shadow effect

sound onmouseover

trying meta description :
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="your name">