Posts

Transform Property In CSS

 <!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>CSS Transform</title>     <style>         * {             margin: 0px;             padding: 0px;         }         .container {             height: 80vh;             background-color: rgb(44, 19, 92);             display: flex;             justify-content: center;             align-items: center;         }         .box {             display: flex;             justify-content: center;             align-items: center;             background: rgb(97, 90, 90);             border: 2px solid black;             border-radius: 8px;             height: 250px;             width: 250px;             /* transform: rotate(45deg); */             transition: all .3s ease-in-out;  
Post a Comment
Read more

Creating Transitions in CSS

 <!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>CSS Transition</title> </head> <style>     body{         background-color: black;     }      #Box{          display: flex;          height: 200px;          width: 200px;          background-color: rgb(63, 25, 201);          justify-content: center;          align-content: center;          align-items: center;          /* transition-property: background-color;          transition-duration: 3s;          transition-timing-function: ease-in;          transition-timing-function: ease-out;          transition-timing-function: ease-in-out;          transition-delay: 2s; */          /* transition shorthand property in one line  */          /* transition: background-co
Post a Comment
Read more

Creating Animations & Keyframes

 <!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>Keyframes and Animations</title>     <style>         .container {             background-color: rgb(51, 45, 45);         }         .box {             background-color: grey;             width: 250px;             height: 250px;             position: relative;             animation-name: suraj1;             animation-duration: 2s;             animation-iteration-count: 5;             /* animation-fill-mode: alternate; */             /* animation-timing-function: ease-in; */             /* animation-timing-function: ease-out; */             /* animation-timing-function: ease-in-out; */             /* animation-delay: 5s; */             /* animation-direction: reverse;
Post a Comment
Read more

Variables & Custom Properties

 <!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>CSS Variable/Custom Properties</title>     <style>         :root {             --box-color: grey;             --primary-color: blue;             --danger-color: red;             --maxw: 333px;         }         .box {             --box-color: pink;             width: 200px;             height: 200px;             background-color: var(--box-color);             border: 2px solid red;             box-shadow: 3px 3px var(--box-color);             margin: 2px 9px;         }         .container {             max-width: var(--maxw);             margin: auto;             background-color: var(--danger-color);             display: flex;             /* background-color: var(--
Post a Comment
Read more

Box Shadow and Text Shadow

 <!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>Box Shadow and Text Shadow</title>     <style>         .container {             display: flex;         }         .card {             padding: 23px 12px;             margin: 23px 12px;             /* border: 2px solid red; */             background-color: grey;             /* box-shadow: offset-x offset-y color; */             /* box-shadow: offset-x offset-y blur-radius color; */             /* box-shadow: offset-x offset-y blur-radius spread-radius color; */             /* box-shadow: 10px 13px black; */             /* box-shadow: -10px -13px black; */             /* box-shadow: 7px 5px 10px black; */             /* box-shadow: -7px -5px 10px 30px black; */        
Post a Comment
Read more

Before and after Pseudo selectors

 <!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>Before and after Pseudo selectors</title>     <style>         body {             background-color: black;             color: white;             margin: 0px;             padding: 0px;         }         header::before {             background: url('https://source.unsplash.com/1600x900/?technology') no-repeat center center/cover;             content: "";             position: absolute;             top: 0;             left: 0;             width: 100%;             height: 100%;             z-index: -1;             opacity: 0.3;         }         .navigation {             font-size: 20px;             display: flex;         }         li {             list
Post a Comment
Read more

Attribute & nth child pseudo Selectors

 <!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>Attribute and nth pseudo selectors</title>     <style>         body {             background-color: rgb(22, 19, 19);         }         .container {             display: block;             width: 233px;             margin: auto;         }         input {             display: block;         }         input[type='text'] {             padding: 23px;             border: 2px solid red;         }         input[type='submit'] {             padding: 23px;             border: 2px solid red;         }         a[target] {             font-size: 64px;             color: rgb(228, 87, 5);         }         a[target='self'] {             font-size: 64px;    
Post a Comment
Read more