Skip to main content

Posts

Showing posts with the label programming

Glass Fill Effect using CSS Only

     In this tutorial, we will be creating a glass fill animation effect without using any SVG graphics or JavaScript. We will be using only CSS to create the animation. This animation is perfect for creating a liquid filling effect on a website. The tutorial is easy to follow and can be implemented on any website. So, if you're looking to add a cool animation effect to your website, this tutorial is for you. With this method, you can create a realistic looking glass fill animation effect without the need for any additional graphics or libraries.  index.html <html> <head> <title>TUTORIAL</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="glass-ctr"> <div class="glass"></div> <div class="water-ctr"> <div class="water"></div>
Post a Comment
Read more

Create a Real Time Digital Clock using Javascript

     In this tutorial, we'll be creating a real-time clock using JavaScript. We'll be using the Date object to access the current time and updating the clock display on the screen using JavaScript's built-in methods. This clock can be easily integrated into any web page, and can be customized to match the design of your website. Whether you're a beginner or an experienced developer, this tutorial will show you how to create a functional and visually appealing real-time clock using JavaScript. index.html <html> <head> <title>Realtime Clock</title> <script src="js/script.js"></script> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Oswald|Roboto:100" rel="stylesheet"> </head> <body onload="realtimeClock()"> <div class="main-cont
Post a Comment
Read more

Make a Simple Parallax Scrolling Effect for beginners

     In this Tutorial, we will show you how to create a simple parallax scrolling effect using only CSS. Parallax scrolling is a popular web design technique where background images move slower than foreground images, creating a 3D illusion as you scroll down the page. We'll be using CSS transforms and transitions to achieve this effect, so no JavaScript is required. Whether you're a beginner or an experienced web developer, this tutorial will provide you with the knowledge you need to add a touch of depth and movement to your website. So sit back, relax, and enjoy the tutorial.    index.html <!DOCTYPE html> <html> <head> <title>Parallax Scrolling</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=M
Post a Comment
Read more

Create Side Navigation Bar using Javascript

  In this tutorial, we will be creating a side menu bar using JavaScript. The side menu bar will allow users to easily navigate through your website and access different pages and content. We will start by setting up the HTML and CSS for the side menu bar, and then we will use JavaScript to add the functionality to toggle the menu bar open and closed. By the end of this tutorial, you will have a fully functional side menu bar that can be easily added to any website. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>Tutorial 8</title> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <script type="text/javascript" src="js/sidemenubar.js"></script>
Post a Comment
Read more