اردو میں جدید کوڈنگ زبان ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا یہ چودواں لیچکچر ہے ۔ یہ لیکچر انتہائی آسان زبان اور آسانی سے سمجھ میں آنے والی کوڈنگ میں لکھا گیا ہے ۔ اس زبان کو ایک نو دس سال کا بچہ بھی آسانی سے سمجھ سکتا ہے ۔۔ تو آئیے شروع کرتے ہیں آج کا چودواں لیکچر ۔CSS متغیرات اور ٹرانسفارمز ۔ لیکچر 14
CSS متغیرات کیا ہیں؟
CSS متغیرات (جنہیں کسٹم پراپرٹیز بھی کہا جاتا ہے) آپ کو اپنی اقدار کو ایک جگہ پر ذخیرہ کرنے اور پھر انہیں اپنی اسٹائل شیٹ میں دوبارہ استعمال کرنے کی اجازت دیتی ہیں۔
<style>
:root {
--main-bg-color: coral;
--main-text-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: var(--main-padding);
margin-top: 10px;
}
</style><!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=" your website or article description here....... ">
<title> Your website title here... </title>
<style>
:root {
--main-bg-color: coral;
--main-text-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: var(--main-padding);
margin-top: 10px;
}
</style>
</head>
<body>
<div id="div1">یہ پہلا ڈیو ہے۔</div>
<div id="div2">یہ دوسرا ڈیو ہے۔</div>
</body>
</html>CSS ٹرانسفارمز
ٹرانسفارمز کیا ہیں؟
<style>
.transform-box {
width: 150px;
height: 150px;
background-color: yellow;
border: 1px solid black;
margin: 50px;
}
#translate:hover {
transform: translate(50px, 100px);
}
#rotate:hover {
transform: rotate(20deg);
}
#scale:hover {
transform: scale(2, 3);
}
#skew:hover {
transform: skew(20deg, 10deg);
}
</style>CSS ٹرانسفارمز آپ کو عناصر کو منتقل، گھمانے، اسکیل کرنے، اور ترچھا کرنے کی اجازت دیتے ہیں۔
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=" your website or article description here....... ">
<title> Your website title here... </title>
<style>
.transform-box {
width: 150px;
height: 150px;
background-color: yellow;
border: 1px solid black;
margin: 50px;
}
#translate:hover {
transform: translate(50px, 100px);
}
#rotate:hover {
transform: rotate(20deg);
}
#scale:hover {
transform: scale(2, 3);
}
#skew:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<h3>Translate</h3>
<div class="transform-box" id="translate"></div>
<h3>Rotate</h3>
<div class="transform-box" id="rotate"></div>
<h3>Scale</h3>
<div class="transform-box" id="scale"></div>
<h3>Skew</h3>
<div class="transform-box" id="skew"></div>
</body>
</html>