Posts

Showing posts from December, 2023

Day 29: SASS and LESS

Image
 SASS and LESS is site search on google to more information  1. font-variant property in CSS The font-variant property determines if a text should be shown in small capitals or not.      Every lowercase character is changed into uppercase characters by using a small-caps font. But compared to the text's original capital characters, the converted uppercase letters have a smaller font size. Syntax for font-variant :   font-variant: value Values : normal : It shows text in normal font. Font-variant is set to normal by default.    small-caps : It displays fonts in small caps. Code : Output: 2. CSS letter-spacing Property : Character spacing in a text can be altered via the letter-spacing property.   Syntax : letter-spacing: value; Values : normal  : defines the standard character spacing. Normal value is the default value for letter-spacing        length : establishes a length that is used as the character spacing (negati...
Post a Comment
Read more

Day 28: CSS Animation, CSS Transition Animation Box size

Image
------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->   <title>Your Webpage Title</title> </head> <body>   <div class="grad"></div> <!-- Your HTML element with the "grad" class --> </body> </html> @keyframes example {   0% { background-color: red; left: 0px; top: 0px; }   25% { background-color: yellow; left: 200px; top: 0px; }   50% { background-color: blue; left: 200px; top: 200px; }   75% { background-color: green; left: 0px; top: 200px; }   100% { background-color: red; left: 0px; top: 0px; } } .grad {   width: 100px;   heigh...
Post a Comment
Read more

Day 27: Css Variable

Image
 :root {   --main-color: #3498db; } .element {   background-color: var(--main-color); } HTML Code: <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css">   <title>Sample Page</title> </head> <body>   <div class="element">     This is a sample element with the specified background color.   </div> </body> </html> CSS Code: :root {   --main-color: #3498db; } .element {   background-color: var(--main-color);   padding: 20px;   color: white; /* Text color to make it visible on the background */ }
Post a Comment
Read more

Day 26: Radial Gradient

Image
 .grid{ width: 500px; height: 500px; background-image: radial-gradient(red, yellow, green); } .grid{ width: 500px; height: 500px; background-image: radial-gradient(red 15%, yellow 25%, green 50%); } .grid{ width: 500px; height: 500px; background-image:  radial-gradient(circle,  red, yellow, green); } 1. Radial gradient : The background image is set to a radial gradient using the radial-gradient() method.  It results in a gentle transition between two or more colors coming from the same source. (Center)        Its form could either be circular or elliptical.        Syntax :      background-image : radial-gradient(shape, size, position, starting color…..ending color)       Values :      Shape :  shape of the gradient, it can be circle or ellipse        Size :  denotes the size of gradient, possible values are closest side, closest-corner, farthest-sid...
Post a Comment
Read more

Day 25: CSS Chapter 4: layout: linear gradind

Image
.grid{ width: 500px; height: 500px; background-image: linear-grading(red, yellow); } .grid{ width: 500px; height: 500px; background-image: linear-grading(to right, red, yellow); } 1. Linear gradient :  The linear gradient is one of the most common and practical types of gradient (). You can choose to have the gradient's "axis" run from left to right, top to bottom, or at any angle. Syntax background-image : linear-gradient(direction of gradient or angle(in degrees), color-stop1, color-stop2,….) Color stop meaning : Color stops are places in a gradient that shows a certain color at the precise spot we choose. So they enable us to produce more detailed gradient effects. Example The following code will create a linear gradient transitioning from yellow to green color towards the bottom.   Code : Output : Example The following code will create a linear gradient having 3 color stops, transitioning from blue to purple to red in a diagonal direction. Code :     Output :
Post a Comment
Read more