مجموعه آیکون CSS3 !

آموزش html & css ژوئن 2014 11

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

و اما در این پست مجموعه آیکون فلت ساخته شده با CSS3 را تقدیمتان میکنم . که کافیست استایل را به صفحه افزوده و در تگ این استایل را فراخوانی کنید تا لوگو در آن مکان قرار گیرد که نمونه هایش را در زیر توضیح دادم :

 


css3-icons1

برای قرار دادن لوگو بالا ابتدا کد CSS  زیر را قرار دهید:

سپس کد html  زیر را در مکانی که میخواهید آیکون قرار بگیرد وارد کنید:

 


css3-icons2

کد CSS :

کد html :

 


css3-icons3

کد CSS :

کد html :

 

میبینید که چه جالب میتوانید آیکون های زیبا با CSS3 داشته باشید ؛ برای دریافت200 آیکون css3 میتوانید به سایت www.uiplayground.in/css3-icons مراجعه کنید.

دیدگاه ها
  • alitna گفت:

    سلام
    ایمیلم بهت رسید ؟
    اگه نه ، تو انجمن بهم بگو تا همین جا یا تو انجمن برات بفرستم .
    راستی قالب مالکوم ایکس رو امروز میخوام بذارم تو سایت برا دانلود
    اگه نیازه بگو تا برات بفرستم قبل از اینکه پخش کنم ؟!
    تابستونم شروع شد 🙂 البته تا 4شنبه تو شک هستم که چیکار کردم امتحانارو :-s

    • آقای برنامه نویس گفت:

      سلام ، خیر من ایمیلی دریافت نکردم ! به ایمیل چاپار ارسال کنید
      بالاخره تموم شد 😀 امتحاناتم خوب دادی من در جریانم 😀

      • alitna گفت:

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

  • امیرحسین گفت:

    خیلی عالیه
    ممنون

  • MJ گفت:

    این انجمن کجاست من چرا نمیبینمش ؟؟!؟؟

    • حسین شفیعیان گفت:

      انجمن با سیستم IPB راه اندازی شده بود و به دلیل نداشتن لایسنس بسته شد!

  • مریم گفت:

    سلام
    قسمتی با عنوان required نبود به همین خاطر با عرض پوزش مجبور شدم سوالم رو از این قسمت بپرسم.
    تو کد :

    بصورت پیشفرض یک پیغام خطایی میده.آیا میشه رنگ آمیزی این پیغام خظا رو تغییر داد؟؟به چه صورت؟؟اگه کمکم کنید ممنون میشم.واقعا به جواب این سوال خیلی نیاز دارم.

  • مریم گفت:

    تو این کد نشون میده.تو کامنت قبلی کد نشون داده نمیشه.

  • ermess گفت:

    با سلام
    یک سوال داشتم می خواستم بدونم فرم ورود و ثبت نام در سایت شما برای چه کاری هست؟ ممنون.

  • م.ترابی گفت:

    با سلام و خداقوت
    آقای شفیعیان من بوت استرپ رو از فیلم های آموزشی شما یاد گرفتم و واقعا ممنونم
    منتها css3 رو زیاد بلد نیستم ،یعنی به تنهایی میدونم چجوری باید ازش استفاده کنم چون خودم از w3schools یاد گرفتم اما بلد نیستم که تو پروژه ازش استفاده کنم
    ممنون میشم اگه یکی دو تا فیلم آموزشی درست کنید که یه قالب با بوت استرپ بزنید اما توش css3 یا بدین (یک فیلم تلفیقی که کاربردی باشه)


Time limit is exhausted. Please reload CAPTCHA.