Skip to main content

Posts

How to Make a Page Loading Animation Using CSS || Horizontal spinner effect using CSS - Creation Code

  Page Loader Using CSS: In this post, we will create a spinner loading effect using CSS. A loader can create an excellent user experience in your app or website. This loader animation will be a horizontal effect and you can use it before loading your page. Explanation: 1. First, create an HTML file and make a span section with class loader < span class =" loader "></ span > 2. Now give the loader class a suitable height and width with some adjustment . loader {     margin: 600 px ;     width: 100 px ;     height: 100 px ;     position: relative ; } 3. Create the before and after effect  . loader :: before , . loader :: after {     content: '';     position: absolute ;     width: inherit ;     height: inherit ;     border-radius: 50 % ;     mix-blend-mode: multiply ;     animation: rotate 1 s infinite     cubic-bezier ( 0.77 , 0 , 0.175 , 1 ); } 4. Give it your favourite colour . loader :: before {     background-color: #fc3f9e; } . loader :: after
Post a Comment
Read more

Live IPL Score Using Python || Python Code for Live Cricket Score || IPL Match Detail Program in Python || Live Cricket Score - Creation Code

  Live IPL Score Using Python Hello coders, we are going to learn how we can create a GUI application to build a live score updater using python. We are going to use web scraping using BeautifulSoup class from bs4. We will use the crickbuzz for scraping Module to Be used: tkinter - Preinstalled module request - For requesting the webserver bs4 - It is used for web scraping Installation: pip install request pip install beautifulsoup4 Code: from tkinter import * import requests from bs4 import BeautifulSoup # create instance for window root = Tk () # set title for window root. title (" Indian Premier League ") # screen color configure root. config ( background = " skyblue ") # cricbuzz url to get score updates url = " https://www.cricbuzz.com/ " def get_score ():     # request data from cricbuzz     page = requests. get ( url )     soup = BeautifulSoup ( page . text ,' html.parser ')     # name of first team     team_1 = soup. find_all ( cl
Post a Comment
Read more

Build a Ship Using Only CSS || CSS Animation Project || CSS Design Code || Modern CSS Design - Creation Code

Build a Ship Using Only CSS CSS is a tool for web designers to be unique by creating unique designs and patterns in a website. You can master CSS by creating unique projects and practicing a lot. In this post, we will build a ship using only CSS. #img1 Explanation: This is our project, we are going to build this project. Now you can create it very easily. If you look at the img1 then you can find that the hole design is based on squares and lines. #img2 The top part(ship) and the body(body1 and body2) of the ship is basically boxes so our idea is to build this using the border property of CSS.  Using border and giving these it some height and width we can create these boxes very easily. But if we create these boxes then we need to minus the bottom part of the boxes it can be done by  border-bottom-color:black border-bottom:none You can choose any of the above   div . ship {     border-width: 10 px ;     height: 44 px ;     width: 80 px ;     margin-left: 150 px ;     margin-top: 100 px
Post a Comment
Read more

Auto Programming With Python || How do You Automate a Programm Using Python || Fun with Python - Creation Code

  Auto Programming with Python In this post, we will create an auto program using python. In this auto program, we will send a message to your friend  Module to Be Used: pyautogui random Code: #creation code import random import pyautogui as pg import time text = ('like this video', 'subscribe') time.sleep(10) #creation code for i in range (100):     t = random.choice(text)     pg.write('Please ' + t)     pg.press('enter') Follow my socials: Youtube: https://www.youtube.com/channel/UCU1qNFntn7dCi9uqyvrGKOg Instagram:  https://www.instagram.com/python.math/ Twitter: https://twitter.com/Pritish369 For any question or coding discussion, you can join my discord or telegram: Discord: https://discord.gg/be7MmSuV Telegram: https://t.me/Python_Math_Community
Post a Comment
Read more

Create a hover button using css - Creation Code

 HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Hover button</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <button>Creation code</button> </body> </html> CSS: body{     margin: 0;     height: 100vh;     display: flex;     align-items: center;     justify-content: center;     background-color: navy; } p{     font-size: 3rem;     font-family: Verdana, Geneva, Tahoma, sans-serif;     position: relative;     right: 50px; } button{     position: relative;     border: none;     outline: none;     width: 170px;     height: 55px;     background-color: red;     font-size: 1.4rem;     color: #fff;     border-radius: 7px;     cursor: poi
Post a Comment
Read more

How to Make an Animation RGB Color Using CSS || rgb animation in css and html - Creation Code

 Introduction: In this project, we will create a button which is covered by an animation that creates RGB effect HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>RGB button by creation code</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <a href="#" class="button">         <span>CREATION CODE</span>     </a> </body> </html> CSS: html, body{     height: 100%;     overflow: hidden; } body{     background: #191919;     display: flex;     align-items: center;     justify-content: center; } .button{     background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);     position: relativ
Post a Comment
Read more

Volume Control With Hand Using Python || How do you controll gestures in Python - Creation Code

Introduction: Gesture recognition helps computers to understand human body language. This helps to build a more potent link between humans and machines, rather than just the basic text user interface or graphical user interfaces(GUIs). In this project for gesture recognition, the human body's motions are read by a computer camera. The computer then makes use of this data as input to handle applications. The objective of this project is to develop an interface that will capture human hand gestures dynamically and will control the volume level Code: import cv2 import mediapipe as mp from math import hypot from ctypes import cast , POINTER from comtypes import CLSCTX_ALL from pycaw . pycaw import AudioUtilities , IAudioEndpointVolume import numpy as np cap = cv2 . VideoCapture ( 0 ) mpHands = mp . solutions .hands hands = mpHands .Hands() mpDraw = mp . solutions .drawing_utils devices = AudioUtilities . GetSpeakers () interface = devices .Activate( IAudioEnd
Post a Comment
Read more