Home - ITS UP 2 U - Information

CSS styles examples

Mark E.

/* Set the font family and size for the entire page */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* Style links */
a {
  color: #007bff; /* Set the link color to blue */
  text-decoration: none; /* Remove the underline from links */
}

/* Style buttons */
button {
  background-color: #007bff; /* Set the background color to blue */
  color: #fff; /* Set the text color to white */
  padding: 10px 20px; /* Add some padding */
  border: none; /* Remove the border */
  border-radius: 4px; /* Add some rounded corners */
  cursor: pointer; /* Change the cursor to a pointer on hover */
}

/* Style headings */
h1, h2, h3 {
  font-weight: bold; /* Set the font weight to bold */
  margin-bottom: 20px; /* Add some spacing below the heading */
}

/* Style images */
img {
  max-width: 100%; /* Make sure images don't exceed their container */
  height: auto; /* Prevent images from stretching vertically */
}

/* Style forms */
input[type="text"], textarea {
  border: 1px solid #ccc; /* Add a border */
  padding: 10px; /* Add some padding */
  border-radius: 4px; /* Add some rounded corners */
}

input[type="submit"] {
  background-color: #007bff; /* Set the background color to blue */
  color: #fff; /* Set the text color to white */
  padding: 10px 20px; /* Add some padding */
  border: none; /* Remove the border */
  border-radius: 4px; /* Add some rounded corners */
  cursor: pointer; /* Change the cursor to a pointer on hover */
}

These styles set the font family and size for the entire page, style links and buttons with a blue color and some padding and rounded corners, style headings with bold text and some margin, style images so they don't exceed their container, and style forms with borders, padding, and rounded corners. You can customize these styles to fit your design.

JavaScript code that creates an image that follows the cursor

Mark E.

<!DOCTYPE html>
<html>
  <head>
    <title>Image Following Cursor</title>
    <style>
      img {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <img src="https://via.placeholder.com/100x100" id="follower" />
    <script>
      var follower = document.getElementById("follower");
      document.addEventListener("mousemove", function (e) {
        var x = e.clientX;
        var y = e.clientY;
        follower.style.left = x + "px";
        follower.style.top = y + "px";
      });
    </script>
  </body>
</html>

This code adds an event listener to the document object for the mousemove event. When the mouse moves, the clientX and clientY properties of the event object are used to set the left and top styles of the image, respectively. The position: absolute; style for the image ensures that it can be positioned anywhere on the page.

You can replace the src attribute of the img tag with the URL of any image you want to use as the follower image.

JavaScript code to create an image trail effect with your mouse

Mark E.

// Set the image source URL
var imageSrc = "path/to/image.png";

// Set the size of the image
var imageSize = 50;

// Create an array to store the images
var images = [];

// Create a function to initialize the images
function init() {
  // Loop through the number of images
  for (var i = 0; i < 10; i++) {
    // Create a new image element
    var img = document.createElement("img");
    // Set the image source
    img.src = imageSrc;
    // Set the image size
    img.style.width = imageSize + "px";
    img.style.height = imageSize + "px";
    // Set the image position to absolute
    img.style.position = "absolute";
    // Add the image to the array
    images.push(img);
    // Add the image to the document
    document.body.appendChild(img);
  }
}

// Create a function to update the images
function update() {
  // Get the mouse position
  var x = event.clientX;
  var y = event.clientY;
  // Loop through the images
  for (var i = images.length - 1; i >= 1; i--) {
    // Set the position of the current image to the position of the previous image
    images[i].style.left = images[i-1].style.left;
    images[i].style.top = images[i-1].style.top;
  }
  // Set the position of the first image to the mouse position
  images[0].style.left = x - imageSize/2 + "px";
  images[0].style.top = y - imageSize/2 + "px";
}

// Call the init function to create the images
init();

// Add an event listener to update the images on mouse move
document.addEventListener("mousemove", update);

This code creates an array of images that follow the mouse cursor, creating an image trail effect. The init() function creates the images and adds them to the document, and the update() function updates the position of each image on mouse move. The imageSrc and imageSize variables can be changed to use a different image or change the size of the image, respectively.

Here's some basic JavaScript code for creating a snow effect on a webpage

Mark E.

// create a canvas element and set its dimensions
const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

// get the 2D context of the canvas
const ctx = canvas.getContext("2d");

// create an array to hold snowflakes
const snowflakes = [];

// define the snowflake class
class Snowflake {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.radius = Math.random() * 3 + 1;
    this.speed = Math.random() * 3 + 1;
  }
  
  // update the snowflake's position
  update() {
    this.y += this.speed;
    if (this.y > canvas.height) {
      this.y = 0;
      this.x = Math.random() * canvas.width;
    }
  }
  
  // draw the snowflake on the canvas
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = "white";
    ctx.fill();
  }
}

// create a function to generate new snowflakes
function generateSnowflakes(num) {
  for (let i = 0; i < num; i++) {
    snowflakes.push(new Snowflake());
  }
}

// call the function to generate 50 snowflakes
generateSnowflakes(50);

// create a function to animate the snowflakes
function animateSnow() {
  // clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // update and draw each snowflake
  snowflakes.forEach((snowflake) => {
    snowflake.update();
    snowflake.draw();
  });
  
  // request the next frame of the animation
  requestAnimationFrame(animateSnow);
}

// start the animation
animateSnow();

This code creates a canvas element, generates a specified number of snowflakes as instances of a Snowflake class, and animates their movement and appearance on the canvas. The generateSnowflakes() function can be called with a different number to change the amount of snowflakes created, and the Snowflake class can be modified to change the snowflake appearance or behavior.