شما عضو این انجمن نبوده یا وارد نشده اید. لطفا برای مشاهده کامل انجمن و استفاده از آن وارد شوید یا ثبت نام کنید .

امتیاز موضوع:
  • 66 رأی - میانگین امتیازات: 2.98
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
وبلاگ ایجاد با یا استفاده سایت زیبا از css تکنیک منوهای برای

ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS
#1
ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS

یکی از قابلیت های کاربردی و زیبای css امکان ایجاد جلوه های ویژه بصری ساده تا پیشرفته است که معمولا در اکثر مرورگرهای استاندارد نیز پشتیبانی می شوند، اگر چه برای سازگاری بیشتر در کنار کدهای css از javascript نیز استفاده می شود اما در این آموزش، شیوه ساخت منویی ساده، سبک و در عین حال زیبا و سازگار را خواهیم گفت که می تواند حداقل به عنوان سرآغازی برای طرح های بزرگتر مورد استفاده قرار گیرد، از منوهای css می توانید در سربرگ وبلاگ یا سایتتان با هدف زیبا سازی یا تسهیل دسترسی استفاده کنید؛ برای راحتی شما و جلوگیری از پیچیده شدن موضوع، آموزش همراه توضیح و مثال آنلاین است.

ایجاد منوهای اینتراکتیو با فتوشاپ و css


ابتدا یک تصویر با اندازه ارتفاع 120 پیکسل (که از دو نیمه ی 60 پیکسلی تشکیل شده)، در برنامه های گرافیکی مانند فتوشاپ ایجاد می کنیم، از آنجایی که برای ایجاد منوهای اینتراکتیو، از عنصر کلیدی background-position با مقادیر متفاوت در حالت عادی و hover استفاده خواهیم کرد، لذا تصویر ما باید در دو قسمت خود، دارای دو ویژگی متفاوت باشد، تا هنگامی که در حالت فعال قرار می گیرد، متمایز به نظر برسد.

سپس کد زیر را مطابق نیازمان با تعریف لینک ها و استایل css سفارشی، تنظیم می نمائیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

توضیح:
- خاصیت display با مقادیر inline-block و همچنین float:right کمک می کنند تا لینک های ما در یک ردیف قرار گیرند.
- حالت menu a یعنی موقعیتی که آی دی menu در حالت لینک قرار دارد.
- حالت menu a:hover به معنی حالتی است که لینک آی دی menu در حالت فعال قرار می گیرد.
- ul و li عناصر ایجاد لیست در صفحات وب هستند و از لحاظ موتورهای جستجو و علم سئو، شیوه ای مناسب برای ساخت منوها محسوب می شوند.
- تغییر تصاویر در حالت عادی و فعال با قابلیت background-position و مقادیر آن صورت می گیرد.
ثبت دامنه و فروش هاست، سامانه پیامک، طراحی سایت، خدمات شبکه
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
  | دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

sms: 10004673  - 500021995


موضوع‌های مشابه…
موضوع نویسنده پاسخ بازدید آخرین ارسال
  ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3 saberi 0 2,142 ۹۴/۶/۲۳، ۱۰:۴۹ عصر
آخرین ارسال: saberi

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان