ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

ایجاد آیکون ذره بین با HTML و CSS مطلب ویژه

توسط 01 شهریور, 1394 6620 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

کاربران مقدماتی برای آشنا شدن با تگهای کاربردی و جدید Html و Css حتما سعی کنند این تمرین های را به دقت انجام بدهند . مقدمه یادگری هر چیزی پایه و آموزش های سطح ابتدایی می باشد . اگر از همان ابتدا یک کار یا یک پروسه را به صورت صحیح یاد بگیریم ، در مراحل بعدی که کار مشکل می شود و وارد بخش متوسط و پیشرفته می شویم کار ساده تر می شود .

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>

2. یک تگ دیویژن در بین تگ Body ایجاد کرده و شناسه آن را برابر با space-invader قرار بدهید . 

<body>
<div id="space-invader"></div>
</body>

3. حالا باید یک تگ استایل ایجاد کرده و شناسه magnifying-glass را فراخوانی کنیم تا با استفاده از تگهای Css آیکون ذره بین را بسازیم .

<!DOCTYPE html>
<html>
<head>
        <style>
         </style>
</head>
          <body>
                  <div id="magnifying-glass"></div>
           </body>
</html>

حالا تگهای زیر را درون style کپی کرده و فایلتان را با عنوان index.html ذخیره و نتیجه را در مرورگر مشاهده کنید .

#magnifying-glass { 
font-size: 10em; /* This controls the size. */
display: inline-block;
 width: 0.4em;
 height: 0.4em;
 border: 0.1em solid red;
 position: relative;
 border-radius: 0.35em;
 }
#magnifying-glass::before {
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: red;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 }

کد کلی به شکل زیر می شود .

<!DOCTYPE html>
<html>
<head>
        <style>
 #magnifying-glass {
font-size: 10em; /* This controls the size. */
display: inline-block;
 width: 0.4em;
 height: 0.4em;
 border: 0.1em solid red;
 position: relative;
 border-radius: 0.35em;
 }
#magnifying-glass::before {
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: red;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 }
         </style>
</head>
          <body>
                  <div id="magnifying-glass"></div>
           </body>
</html>

 

آیکون ذره بین

این مورد را ارزیابی کنید
(2 رای‌ها)
آخرین ویرایش در شنبه, 31 مرداد 1394 ساعت 23:17
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا