عمل تكبير وتصغير لعنصر معين بالنقر
في تلميح سريع الفيديو اليوم، وسوف تظهر لك أسلوب أنيق : سنستخدم CSS سهل وبسيط لتقليد أحداث فوق. المفتاح هو استخدام مفيدة : فئة المستهدفة الزائفة.
الفيديو اليوم سوف يقوم بعمل اسلوب عرض أنيق لمحتوي موقعك او لعناصر معينه في الموقع تقوم بتسليط الضوء عليها باستخدام CSS :
view plaincopy to clipboardprint?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
figure { background: #e3e3e3; display: block; float: left;}
#zoom {
width: 200px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
/* Compliance = IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#zoom:target {
width: 400px;
}
</style>
</head>
<body>
<h1> "Click" Effect with CSS </h1>
<figure>
<img id="zoom" src="http://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png" alt="EE" />
<figcaption>
<ul>
<li>
<a href="#zoom">Zoom In</a>
</li>
<li>
<a href="#">Zoom Out</a>
</li>
</ul>
</figcaption>
</figure>
</body>
</html>
عن الكاتب
عدد المقالات :
735
Ahmed
الويب سايت بتاعكم جميل وفية دروس مفيدة جدا بس ياريت يكون في Demo لاي درس عشان نشوف النتيجة النهائية للدرس شكلها عامل ازاي