shams 15 تیر 1393 8 5868 بازدید آموزش CSS
فیلم آموزش معرفی عناصر کاذب after و before در CSS

در فیلم آموزشی معرفی pseudo classes لینک ها در CSS، کلاس های کاذب را به شما معرفی کردیم. در این فیلم آموزش طراحی سایت، شما را با دو نمونه از عناصر کاذب (pseudo elements) آشنا می کنیم.

آنچه در این فیلم آموزشی خواهید آموخت :

  • آشنایی با عناصر کاذب after و before
  • استایل دهی به pseudo element های after و before
  • اضافه کردن محتوای دلخواه به قبل یا بعد از یک عنصر با عناصر کاذب و مشخصه content
  •  آشنایی با کاربرد عناصر کاذب after و before
  • بیان روشی برای جلوگیری از collapse شدن والد عناصر شناور در CSS که طراحان حرفه ای وب از آن استفاده می کنند.

می توانید روش های دیگر جلوگیری از جمع شدن والد عناصر شناور را از این قسمت مشاهده کنید. همچنین برای مشاهده کاربرد عناصر کاذب، می توانید فیلم  استایل دهی نقل قول با before و after را ببینید.

فیلم آموزش معرفی عناصر کاذب after و before در CSS

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

نظرات کاربران (8)



  1. رضا

    سلام
    خیلی موقع ها همین مقدار کانتنت رو در هردو کلاس کاذب بیفور و افتر خالی میزارن و پروژه های بسیار زیبایی رو ایجد میکنن
    میخوام مببینم دقیقا وقتی خالی میزارن دارن چجوری ازش استفاده میکنن
    مثلا نگاه کنید ببینید این چطور شده
    http://www.cssflow.com/snippets/notepaper-blockquote

    لطفا راهنماییم کنید کارم گیره

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      مقدار content را برای before, after آن عنصر خالی می گذارند اما برای آن یک background-image اختصاص می دهند تا مشابه حالتی که لینک آن را ارسال فرمودید بشود.

      • داوود

        سلام؛ آقای مهندس واقعا طرح قشنگی رو ایجاد کردن، به کدها هم که نگاه کردم انگاری همه رو با همون css3 و خب طبیعتاً html ایجاد کردن.
        آقای آبسالان چقدر باید کار کنیم که بتونیم طرحهای قشنگی مثل این رو پیاده سازی و اجرا کنیم؟؟

        • گروه آموزش طراحی سایت

          با عرض سلام و احترام خدمت شما
          والا بر اساس زمان نمیشه گفت، بیشتر بر اساس دقت و ذوق و قریحه شما در حین کار و انجام تمرینات طراحی صفحات وب هست.

      • محسن

        با سلام
        میشه لطف کنید و بفرمائید که چطور میتونم یک تصویر برای content ایجاد کنم تا در قالب فقط اون تصویر رو نشون بده؟؟؟

        متشکرم

        • گروه آموزش طراحی سایت

          با عرض سلام و احترام خدمت شما
          کافی است آدرس عکس را به جای مقدار مشخصه ی content بدهید.

  2. rahman

    سلام خسته نباشید خیلی مفید بود.

  3. پدرام

    باتشکر، نکات خوبی رو ارائه کردید