Software Key Tutorial
.
CSS (Cascading Style Sheets) helps developers control a website's visual appearance. SS is a basic technology of the World Wide Web, HTML, and JavaScript. By adjusting the font, color, size, spacing, and other visual characteristics of the text, you may design and layout web pages. This tutorial will explore various CSS tricks and techniques you can apply to your projects.
This tutorial will discuss various CSS tricks, which will become excellent tools for targeting HTML components and applying styles. This guide will cover examples of the various things you can do with CSS to enhance the visual appearance of web pages.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 300px;
background-color: lightpink;
}
#section2 {
height: 300px;
background-color: magenta;
}
</style>
</head>
<body>
<h1>Smooth Scroll in upGradTutorial!</h1>
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the "smooth" scrolling effect link.</p>
<a href="#section2">Click Me to Section 2 Below</a>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Section 1 Above</a>
</div>
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container1,
.container2 {
background-color: lightcoral;
padding: 15px;
}
.container1 img {
mix-blend-mode: darken;
float: right;
}
</style>
</head>
<body>
<h2>The mix-blend-mode Property in upGradTutorial!</h2>
<div class="container1">
<img src="https://th.bing.com/th/id/R.22465d2fdbc50627f1b136a8c7bc4f71?rik=vS3QIGIHeRoyTg&riu=http%3a%2f%2fi.
huffpost.com%2fgen%2f1386495%2fimages%2fo-DRAGONFRUIT-facebook.jpg&ehk=zyQxy6Bf49bfLb8bnqMjTrWOAgMMz4gJwIn0PMZ2lew%3d&risl=
&pid=ImgRaw&r=0" width="100" height="100" />
</div>
<div class="container2">
<img src="https://th.bing.com/th/id/R.22465d2fdbc50627f1b136a8c7bc4f71?rik=vS3QIGIHeRoyTg&riu=http%3a%2f%2fi.huffpost.com%2
fgen%2f1386495%2fimages%2fo-DRAGONFRUIT-facebook.jpg&ehk=zyQxy6Bf49bfLb8bnqMjTrWOAgMMz4gJwIn0PMZ2lew%3d&risl=&pid=ImgRaw&r=0"
width="100" height="100" />
</div>
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
.square {
height: 60px;
width: 60px;
background-color:coral;
}
.circle {
height: 60px;
width: 60px;
background-color: green;
border-radius: 50%;
}
.oval {
height: 60px;
width: 120px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Square CSS in upGradTutorial!</h2>
<div class="square"></div>
<h2>Circle CSS in upGradTutorial!</h2>
<div class="circle"></div>
<h2>Oval CSS in upGradTutorial!</h2>
<div class="oval"></div>
</body>
</html> Code:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
white-space: nowrap;
width: 60px;
overflow: hidden;
text-overflow: clip;
border: 1px solid red;
}
div.b {
white-space: nowrap;
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid red;
}
div.c {
white-space: nowrap;
width: 60px;
overflow: hidden;
text-overflow: "----";
border: 1px solid red;
}
</style>
</head>
<body>
<h1>The text-overflow Property in upGradTutorial</h1>
<p>The two divs holds a text that will not fit in the box.</p>
<h2>text-overflow: clip (default):</h2>
<div class="a">upGradTutorial!</div>
<h2>text-overflow: ellipsis:</h2>
<div class="b">upGradTutorial!</div>
<h2>text-overflow: "----" (user defined string):</h2>
<div class="c">upGradTutorial!</div>
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
background-color: coral;
clip-path: circle(40%);
}
</style>
</head>
<body>
<h2>The clip-path property in upGradTutorial!</h2>
<img width="100" height="140" />
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 50%;
margin: 0;
}
.full-height {
height: 50%;
background: magenta;
}
</style>
</head>
<body>
<div class="full-height">
upGradTutorial!
</div>
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 23%;
height: auto;
float: left; }
.blur {filter: blur(4px);}
.brightness {filter: brightness(0.30);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<h1>The filter Property in upGradTutorial!</h1>
<img src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="https://3.bp.blogspot.com/-9YuXbPy4G7A/UyMssJOiRwI/AAAAAAAAAaA
/KFkNWoiP7mE/s1600/Pineapple+-+blooming.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 60px;
width: 60px;
background-color:magenta;
rotate: 30deg;
}
</style>
</head>
<body>
<h3>Rotate property in upGradTutorial</h3>
<div>upGradTutorial!</div>
<br>
<p>Rotates div element 30 degrees clockwise around z-axis.</p>
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>
<h3>A linear gradient as a mask layer in upGradTutorial:</h3>
<div class="mask1">
<img src="https://images.edexlive.com/uploads/user/imagelibrary/2019/8/15/original/upgrad.jpg"
width="300" height="200" />
</div>
<h3>Original image in upGradTutorial:</h3>
<img src="https://images.edexlive.com/uploads/user/imagelibrary/2019/8/15/original/upgrad.jpg"
width="300" height="200" />
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.zoom {
padding: 40px;
background-color:magenta;
transition: transform 0.3s;
width: 300px;
height: 100px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>Zoom on Hover in upGradTutorial!</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: rgba(254, 254, 254, 0.3);
border-radius: 4px;
font-family: sans-serif;
text-align: center;
line-height: 1;
-webkit-backdrop-filter: blur(11px);
backdrop-filter: blur(11px);
max-width: 60%;
max-height: 60%;
padding: 30px 40px;
}
html,
body {
height: 50%;
width: 50%;
}
body {
background-image: url(https://th.bing.com/th/id/OIP.J4HwTcWQs2KzhNifxSVXNAHaE7?pid=ImgDet&rs=1),
linear-gradient(rgb(218, 156, 156), rgb(0, 0, 182));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>backdrop-filter: blur(11px)</p>
</div>
</div>
</body>
</html>Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Only Carousel</title>
<style>
.carousel-container {
display: flex;
overflow: hidden;
width: 300px; /* Adjust the width as needed */
margin: 0 auto;
}
.carousel-track {
display: flex;
transition: transform 0.3s ease-in-out;
}
.carousel-item {
flex: 0 0 100%;
max-width: 100%;
padding: 20px;
box-sizing: border-box;
text-align: center;
background-color: #f0f0f0;
}
/* Navigation buttons */
.carousel-nav {
display: flex;
justify-content: center;
margin-top: 10px;
}
.carousel-nav button {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-track">
<div class="carousel-item">Slide 1</div>
<div class="carousel-item">Slide 2</div>
<div class="carousel-item">Slide 3</div>
<!-- Add more items as needed -->
</div>
</div>
<div class="carousel-nav">
<button onclick="prevSlide()">‹</button>
<button onclick="nextSlide()">›</button>
</div>
<script>
const track = document.querySelector('.carousel-track');
const items = document.querySelectorAll('.carousel-item');
let currentIndex = 0;
function prevSlide() {
currentIndex = (currentIndex - 1 + items.length) % items.length;
updateCarousel();
}
function nextSlide() {
currentIndex = (currentIndex + 1) % items.length;
updateCarousel();
}
function updateCarousel() {
const itemWidth = items[currentIndex].clientWidth;
track.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
}
</script>
</body>
</html>Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Curved Text Around Image</title>
<style>
.container {
width: 80%;
margin: 50px auto;
display: flex;
}
.image {
width: 200px;
height: 200px;
float: left;
margin-right: 20px;
shape-outside: circle(50%);
clip-path: circle(50%);
}
.text {
flex: 1;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg" alt="Floating Image" class="image">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio nec
justo dignissim efficitur. Suspendisse sit amet urna sed turpis congue finibus vel eget
mauris. Nulla facilisi.</p>
<p>Mauris interdum diam in augue gravida, et varius urna congue. Sed et justo consequat,
volutpat arcu non, euismod leo. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.</p>
</div>
</div>
</body>
</html>Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradients and Gradient Text</title>
<style>
.linear-gradient-bg {
width: 100%;
height: 300px;
background: linear-gradient(to right, #ff6b6b, #355c7d);
}
.radial-gradient-bg {
width: 100%;
height: 300px;
background: radial-gradient(circle, #66a6ff, #eeccff);
}
.gradient-text {
font-size: 36px;
background: -webkit-linear-gradient(#ff6b6b, #355c7d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="linear-gradient-bg"></div>
<div class="radial-gradient-bg"></div>
<h1 class="gradient-text">Gradient Text Example</h1>
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
font-family: "Helvetica";
font-weight: 200;
line-height: 2;
text-align: center;
width: 50%;
height: auto;
display: block;
position: relative;
}
img:before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 13px;
}
</style>
</head>
<body>
<h3>Original image:</h3>
<img src="https://www.expressandstar.com/resizer/mfZ-TegH1FH69QELJzobO5Aoa98=/1200x0/cloudfront-us-east-1.images.arcpublishing.com/mna/C72QHRN7RJDIRAN7TZJN6WMWJA.jpg" alt="Cinque Terre" width="300" height="200" />
</body>
</html>Code:
<!DOCTYPE html>
<html>
<head>
<style>
q {
quotes: "---" "”";
font-size: 3rem;
color:yellow;
}
</style>
</head>
<body>
<q>upGradTutorial!</q>
</body>
</html>Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comma-Separated Lists with CSS</title>
<style>
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
background-color: #f0f0f0;
padding: 4px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="tag-list">
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
<span class="tag">Tag 3</span>
<span class="tag">Tag 4</span>
<span class="tag">Tag 5</span>
</div>
</body>
</html>input[type="password"][value$="a"] {
background-image: url("http://localhost:3000/a");
}Code:
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 500px;
background-color: skyblue;
}
#section2 {
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<h1>Smooth Scroll in upGradTutorial!</h1>
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the "smooth" scrolling effect link.</p>
<a href="#section2">Click Me to Section 2 Below</a>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Section 1 Above</a>
</div>
</body>
</html>CSS is an essential concept for every modern web developer or designer. Staying up to date with the latest CSS features is essential in the ever-changing web development realm. This blog addressed a treasure trove of CSS tricks and approaches that may boost a web designer's competence to new heights, ranging from basic principles to advanced strategies.
What is Flexbox?
One of the CSS tricks, Flexbox, is a layout method that allows you to arrange elements in different ways. It may be used to create intricate layouts quickly and is designed to work with a single row or column of items.
What is CSS-Tricks animation?
CSS-Tricks animation refers to the execution of dynamic and aesthetically appealing effects utilizing CSS transitions, animations, and keyframes to enhance website user experience.
What are some benefits of using advanced CSS Tricks?
Creating more complex and dynamic layouts, reducing the amount of code needed to achieve a specific effect, and making your website more accessible to users with disabilities are some benefits of advanced CSS tricks.
What is CSS Grid?
CSS-tricks grid is a CSS layout utility that makes it simple to design complicated grid-based layouts. It may be used to construct responsive layouts that adjust to numerous screen sizes and is supposed to operate with both rows and columns.
Leave a Reply
Your email address will not be published. Required fields are marked *