افکت های حرفه ای CSS و SVG

همونطور که میدونید قیافه و شکل و شمایل یه سایت خیلی توی بیننده تاثیر میزاره.

امکان داره سایت شما از نظر بازدید کننده ها خیلی زشت باشه و یه بازدید کننده دیگه اصلا سراغ سایت شما نیاد و همینطور این امکانش هست که شما با یه گرافیک خیلی توووپ و بیست سایت خودتون رو بسازید که خودش باعث جذب افراد میشه.

شما وقتی یه سایت خوب میسازید و بازدید کننده ها خوششون میاد این امکان وجود داره که بعد چند ماه به خاطر استایل های سایتتون معروف بشید به طوری که چند ده نفر بیان ببینن که شما چجوری این استایل ها رو درست کردید 😀 پس ارزشش رو داره که یکم بیشتر وقت بزاریم و یه گرافیک توووپ با CSS بسازیم برای سایتمون. چرا CSS ؟ چون پایداری داره و مثل جاوا اسکریپت نیست که اگه ارور بده یا قطع بشه گرافیک سایت داغون بشه.

یه سری استایل های جذاب میزارم براتون که بتونید گرافیک سایتتون رو تغییر بدید و بلوک های مختلف سایت رو از حالت خشک در بیارید و یکم منعطف تر کنید. خب برووووووو که بریم:  (فایل رو میتونید از انتهای پست دانلود کنید)

افکت هاور عکس با CSS خعلی شیک و مجلسی : پیش نمایش رو میتونید از اینجا ببینید

 

image-hover-effect

 

افکت برای بلوک های متنی با SVG : پیش نمایش رو میتونید از اینجا ببینید

 

image-svg-hover-effects

 

افکت های خوشکل برای دکمه ها (button) با CSS : برا دیدن پیش نمایش اینجا کلیک کنید.

 

nice-css-buttons

 

ایکن های متحرک خیلی زیبا و جذاب : برای دیدن پیش نمایش ایکن ها اینجا کلیک کنید.

 

animate-icons-font

افکت زیبا برای انکرها (anchors) : اکثر سایتا حتی برای این قسمت CSS در نظر نمیگیرن ولی شما میتونید خعلی ریز بین تر عمل کنید. پیش نمایش رو میتونید از اینجا ببینید.

امیدوارم که این سری از کد های CSS بدردتون بخوره. همه ای این کد ها رو به صورت یک بسته مجموعه کد CSS اما تفکیک شده برای دانلود قرار دادم.

بسته ی افکت های زیبای سی اس اس
بسته ی افکت های زیبای سی اس اس
css effects pack.zip
Version: 1.0.0
320.1 KiB
152 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. میلاد

    سلام خسته نباشید خیلی استایل های جالبی گذاشتین تو رو خدا نحوه گذاشتن تو قالب رو هم توضیح بدین

    • سلام دوست عزیز اگه شما کمی با برنامه نویسی تحت وب اشنا باشید به راحتی میتونید از این افکت ها استفاده کنید! کافیه که سورس کد مربوط به افکت رو دانلود کنید و بعدش اون رو با نت پد یا یه نرم افزار ویرایشگر متن باز کنید و ساختاری مثل ساختار html اون درون صفحه ی خودتون ایجاد کنید و سپس فایل css مربوطه رو به صفحه خودتون اظافه کنید! به همین راحتی 😀 اگه بازم متوجه نشدید بگید کدوم افکت رو دوسدارید تا یه مثال براتون بزارم. موفق باشید.

      • میلاد

        سلام خسته نباشید ممنون که جوابمو دادین
        الان تو این فایلا که دانلود کردم مثلا میخوام Caption Hover Effects افکت ۴ بیارم تو قالب چنتا فولدر هست css و fonts و js و چنتا فایل html نمیدونم چطوریه ؟ یعنی قبلا استایل های css گذاشتم ولی اینطوری نبوده 🙁
        اینا باید اپلود بشه روی قالبم تو هاست ؟؟
        اقا ی توضیح خوب بده ماهم بفهمیم مرسی :))

        • سلام. ابتدا فایل component.css و فایل modernizer.custom.js رو به صفحه ی خودتون اظافه کنید بعد یه ساختار مثل زیر به صفحه خودتون اظافه کنید :

          در ساختار بالا باید ادرس عکس و متنی که میخواید رو با عکس و متن مورد نظر خودتون تعویض کنید. بعدش در اخر صفحه ی خودتون فایل toucheffects.js رو اظافه کنید 😀 به همین راحتی! به خاطر تاخیر در پاسخ دادن عذرخواهی میکنم مشکل اینترنت داشتیم و مدتی طول کشید تا حل بشه. موفق باشید دوست عزیز و گرامی.

  2. با سلام
    بنده از قسمت IconHoverEffects استفاده کردم و تمام فایل هارو آپلود کردم و داخل css هم لینک تمامی لینک های آپلود شده فونت هارو اضافه کردم.
    ولی مشکل اینجاست وقتی توی قالب ازش استفاده میکنم فقط نوشته ظاهر میشه،چطور توی قالب این کد رو استفاده کنم؟ممنون میشم راهنماییم کنید

    • اول اینکه باید فایل های css رو به قالب خودتون نیز اظافه کنید و بعدش باید از کلاس هایی که در نمونه مثال استفاده کردیم(منظورم کلاس هایی که توی css و html استفاده میکنیم است) توی قالب خودتون استفاده کنید تا افکت ها روی قالب شما نیز اعمال بشه.

می‌خواهید دیدگاهتان را بیان کنید؟