Creation Code

Posts

Showing posts with the label css

CSS Loading Animation || 3 Dots Animation CSS || 3 Dots Loading Animation Using CSS - Creation Code

CSS Loading Animation: CSS 3 dots loading animation is a very usefull project if you wanna make an app where you want a loading animation like other apps. Giving a loading animation in your app or website will make your website or app look professional and it will give a great user experience and your app or website will go viral with this loading animation. We are going to see how we can make a loading animation using CSS Roadmap of loading animation: First we will create 3 div with class of 'dot dot1', 'dot dot2', 'dot dot3' Second we will create a simple dot shape Third and final give each dot a different animation 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 "> < titl

Heart Pulse Animation Using CSS || Heart Animation CSS || HTML Code for Heart Animation || Heart Like Animation

Heart Pulse Animation Using HTML and CSS This heart animation is great for your website, blog post, or social media profile. It's beautiful and simple: just a pulsing heart in front of a solid black background. This tutorial will show you how to create a pulsing heart animation using html and css. HTML and CSS animation. In this tutorial, we'll be creating a simple pulsing heart animation using HTML and CSS. We'll explore the techniques necessary to create an animation that can be used in a variety of contexts, including websites, mobile apps, and embedded media. The finished product should look something like this: 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 >Heart Icon A

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

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

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

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

How do You Code a Digital Clock? || How do you code a clock in javascript - Creation Code

How do you code a digital clock using HTML, CSS, and Javascript? Digital Clock: A digital clock is a type of clock that displays the time digitally(i.e in numerals or other symbols), as opposed to an analog clock. Digital clocks are often associated with electronics drives, but the 'digital' description refers only to the display, not to the drive mechanism. (Both analog and digital clocks can be driven either mechanically or electronically, but "clockwork" mechanisms with digital displays are rare In this post we will create a simple digital clock using javascript 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"> <link rel="stylesheet" href="style.css"> <title>Creation code</ti

How to Make a Loader || loading animation css || css loading spinner - Creation Code

Loading animation with CSS When to use a loader? Immediate response time is less than 1 second. If they don't get any visual feedback after a second, they start to worry. If you have a process that takes longer than a second, you should display a spinner. It creates an excellent user experience on your website. 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"> <link rel="stylesheet" href="style.css"> <title>CREATION CODE</title> </head> <body> <button class="btn"> <span class="loading">L<span class="loader"></span>ading</span> <span class="dot dot1">.</span> <sp

Create Login Page Like Twitter || Twitter login page clone || twitter clone html, css - Creation Code

Twitter: Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets". Registered users can post, like, and retweet tweets, but unregistered users can only read those that are publicly available. Users interact with Twitter through browsers or mobile frontend software, or programmatically via its APIs. Prior to April 2020, services were accessible via SMS. The service is provided by Twitter, Inc., a corporation based in San Francisco, California, and has more than 25 offices around the world. Tweets were originally restricted to 140 characters, but the limit was doubled to 280 for non-CJK languages in November 2017. Audio and video tweets remain limited to 140 seconds for most accounts. We are going to build the login clone with HTML and CSS HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"

Word Counting Using HTML, CSS and JavaScript - Creation Code

Word Count: The word count is the number of words in a document or passage of text. Word counting may be needed when a text is required to stay within certain numbers of words. This may particularly be the case in academia , legal proceedings, journalism , and advertising . Word count is commonly used by translator s to determine the price of a translation job. Word counts may also be used to calculate measures of readability and to measure typing and reading speeds(usually in words per minute ). When converting character count to words, a measure of 5 or 6 characters to a word is generally used for English In this post, we will use HTML, CSS, and JavaScript to make this project so let's jump into the code without wasting any time HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&q

Make a Simple Survey From Using Only HTML - Creation Code

Survey Data Collection: With the application of probability sampling in the 1930s, surveys became a standard tool for empirical research in social sciences , marketing , and official statistics. The methods involved in survey data collection are any of several ways in which data can be collected for a statistical survey . First, there was the change from traditional paper-and-pencil interviewing(PAPI) to computer-assisted interviewing(CAI). Now, face-to-face surveys(CAPI), telephone surveys( CATI ), and mail surveys(CASI, CSAQ) are increasingly replaced by web surveys In this post, we will make a basic survey form with the help of HTML. In this post, we just use HTML but not CSS. You can make a style change as you want. HTML: <!DOCTYPE HTML> <html> <head> <title>Survey</title> </head> <body> <h1>Survey form</h1> Enter your name: <input type="text" name="UserName" size=35 maxlength=35

Create an Awesome Calculator Using HTML, CSS and JavaScript - Creation Code

Calculator: The first solid-state electronic calculator was created in the early 1960s. Pocket-sized devices became available in the 1970s, especially after the Intel 4004 , the first microprocessor , was developed by Intel for the Japanese calculator company Busicom . They later became used commonly within the petroleum industry(oil and gas) In this post, we will create a simple calculator for use on the web with the help of HTML, CSS, and javascript HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>calculator</title> <link rel="stylesheet" href="./style.css"> </head> <body> <section class="calculator"> <form> <input type="text" name="&

Make an Interesting Animation using Pure CSS and HTML | Animation in CSS

In this project, we will only use HTML and CSS to make an animation where the moon is rotating our earth. HTML file <! 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 > moon rotation around earth </ title > < link rel = "stylesheet" href = "css/style.css" > </ head > < body > < article class = "earth-demo" > < div class = "earth" > < img src = "https://cssanimation.rocks/images/random/earth.png" alt = "" ></ div > < div class = "moon-container" > < div class = "moon" > < img src = "https