گیفت کارت آیتونز
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 12

موضوع: افکت دادن به گوشه ها به شکل فوق العاده زیبا ( کاغذ در کاغذ) !

  1. Top | #1
    مدیر بازنشته

    تاریخ عضویت
    Dec 2010
    ورژن ویبولتین
    -
    نوشته ها
    525
    مورد پسند
    1,021 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 14.0.1
    میزان امتیاز
    82

    پیش فرض افکت دادن به گوشه ها به شکل فوق العاده زیبا ( کاغذ در کاغذ) !

    دورد . با یک آموزش اختصاصی و عالی دیگر در خدمت شما هستیم
    شما میتونید نمونه کد های دیکه ای رو در اینجا Tucked Corners | CSS-Tricks ببینید اما تو این فقط گوشه های بالایی گرد شدن .
    اما دمو : Awsome CSS Thucked Corners - jsFiddle

    __________________________________________________ _______________-

    ما در اینجا دو تا div در نظر گرفتیم که یکیش برای بالا ها و یکیش هم برای پایین هاست.
    div اول سلکتور after برای گوشه سمت چپ و سکلتور before برای گوشه سمت راست.
    تو div دوم هم به همین شکل هست .
    تگ p هم فقط جهت استایل دادن به نوشته استفاده شده .

    __________________________________________________ ______________

    استایل ها :

    کد:
    body {
        background: #e6e6e6;
    }
    
    .balaha {
        background: #f6f6f6;
        height: 300px;
        margin: 65px auto;
        width: 300px;
        position: relative;
         
    }
    .balaha:after,
    .balaha:before {
        background: #e6e6e6;
        content: '';
        height: 50px;
        position: absolute;
        Bottom:285px;
        width: 60px;
            
        }
    .balaha:after {
        left: -40px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
         transform: rotate(-45deg);
        -webkit-box-shadow:#666  0px 12px 10px -12px;
        -moz-box-shadow:#666  0px 12px 10px -12px;
         box-shadow:#666  0px 12px 10px -12px;
    }
    .balaha:before {
        right: -40px;
        -webkit-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
         transform: rotate(45deg);
         -webkit-box-shadow:#666  0px 12px 10px -12px;
         -moz-box-shadow:#666  0px 12px 10px -12px;
          box-shadow:#666  0px 12px 10px -12px;
    }
    .paiinha:after,
    .paiinha:before {
        background: #e6e6e6;
        content: '';
        height: 50px;
        position: absolute;
        top:285px;
        width: 60px;
        }
    .paiinha:after {
        left: -40px;
        -webkit-transform: rotate(-135deg);
         -moz-transform: rotate(-135deg);
         transform: rotate(-135deg);
         -webkit-box-shadow:#666  0px 12px 10px -12px;
         -moz-box-shadow:#666  0px 12px 10px -12px;
          box-shadow:#666  0px 12px 10px -12px;
    }
    .paiinha:before {
        right: -40px;
        -webkit-transform: rotate(135deg);
         -moz-transform: rotate(135deg);
         transform: rotate(135deg);
         -webkit-box-shadow:#666  0px 12px 10px -12px;
         -moz-box-shadow:#666  0px 12px 10px -12px;
          box-shadow:#666  0px 12px 10px -12px;
    }
    و سورس :
    کد:
    <div class="balaha"><div class="paiinha">
        <center>
        <p>وی بی ایران اولین و تنها مرجع ویبولتین در ایران </p>
        </center>
    </div></div>
    موفق باشید
    ویرایش توسط jcs.w : 2012/08/26 در ساعت 06:58 PM
    Retired Mod <




  2. گیفت کارت آیتونز

  3. Top | #2
    مدیریت کل سایت

    تاریخ عضویت
    Aug 2009
    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,694
    مورد پسند
    55,020 بار
    نوشته های وبلاگ
    14
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 21.0.1180.83
    میزان امتیاز
    3124

    پیش فرض

    عالی بود

    7 تشکر توسط:


  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    May 2012
    ورژن ویبولتین
    4.2.0
    نوشته ها
    984
    مورد پسند
    175 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 11.0
    میزان امتیاز
    108

    پیش فرض

    عالی بود ممنون

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

    کاربر مقابل از rkm4 بابت این پست مفید تشکر کرده است:


  5. Top | #4
    مدیر بازنشته

    تاریخ عضویت
    May 2011
    ورژن ویبولتین
    VBulletin 4.2.0
    سن
    23
    نوشته ها
    1,876
    مورد پسند
    1,436 بار
    نوشته های وبلاگ
    10
    اطلاعات
    Windows XP Firefox 13.0
    میزان امتیاز
    223

    پیش فرض

    اول از همه بايد بگم عالي بود !


    و بعد از اون من سايت وردپرس دارم براي اين كه تصاوير سايتم همه اين طوري شن بايد كد رو كدوم قسمت بگذارم ؟

    style.css ?

    2 تشکر توسط:


  6. Top | #5
    مدیر بازنشته

    تاریخ عضویت
    Dec 2010
    ورژن ویبولتین
    -
    نوشته ها
    525
    مورد پسند
    1,021 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 15.0.1
    میزان امتیاز
    82

    پیش فرض

    نقل قول نوشته اصلی توسط K!nG Of N!ghT نمایش پست ها
    اول از همه بايد بگم عالي بود !


    و بعد از اون من سايت وردپرس دارم براي اين كه تصاوير سايتم همه اين طوري شن بايد كد رو كدوم قسمت بگذارم ؟

    style.css ?
    این position چون relative هست ممکنه برای استفاده در همه عکس های سایت مشکل ایجاد کنه ولی میتونید برای تک عکس ازش استفاده کنید.
    استایل هارو داخل style.css و سورس رو هرجا که میخواید قرار بدید.
    Retired Mod <

  7. Top | #6
    کاربر سایت

    تاریخ عضویت
    Jul 2011
    ورژن ویبولتین
    4.2.0
    نوشته ها
    150
    مورد پسند
    50 بار
    اطلاعات
    Windows 8 Chrome 21.0.1180.89
    میزان امتیاز
    24

    پیش فرض

    من رو قالب نصب کردم اما اندازش بزرگه . بخوام طول و عرض رو تغییر بدم کدام کد رو تغییر بدم ؟

  8. Top | #7
    کاربر سایت

    تاریخ عضویت
    Jul 2012
    ورژن ویبولتین
    4.2
    نوشته ها
    434
    مورد پسند
    133 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 15.0.874.5
    میزان امتیاز
    52

    پیش فرض

    این چی هست؟ یه توضیح به ما که آماتوریم میدید ؟

  9. Top | #8
    مدیر بخش

    تاریخ عضویت
    Apr 2011
    ورژن ویبولتین
    4.2
    سن
    34
    نوشته ها
    4,746
    مورد پسند
    6,959 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 23.0.1255.0
    میزان امتیاز
    625

    پیش فرض

    نقل قول نوشته اصلی توسط fortaleza نمایش پست ها
    این چی هست؟ یه توضیح به ما که آماتوریم میدید ؟
    افکت دادن به گوشه ها به شکل فوق العاده زیبا
    اما دمو :
    Awsome CSS Thucked Corners - jsFiddle

    کاربر مقابل از P4NiSh3R بابت این پست مفید تشکر کرده است:


  10. Top | #9
    کاربر سایت

    تاریخ عضویت
    Jul 2012
    ورژن ویبولتین
    4.2
    نوشته ها
    434
    مورد پسند
    133 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 15.0.874.5
    میزان امتیاز
    52

    پیش فرض

    یه توضیح دقیقتر میدید که این اسکریپتها رو دقیقا کجا باید بزاریم

  11. Top | #10
    مدیر بازنشته

    تاریخ عضویت
    Dec 2010
    ورژن ویبولتین
    -
    نوشته ها
    525
    مورد پسند
    1,021 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 15.0.1
    میزان امتیاز
    82

    پیش فرض

    نقل قول نوشته اصلی توسط savadkoohy نمایش پست ها
    من رو قالب نصب کردم اما اندازش بزرگه . بخوام طول و عرض رو تغییر بدم کدام کد رو تغییر بدم ؟
    این عدد هارو تغییر بدید :
    .balaha
    کد HTML:
    width:300px;
    کد HTML:
    height:300px;  
    این رو هر چقدر تغییر دادید :
    کد HTML:
      height:300px;   
    همون قدر که به 300 اضافه یا کم کردید تغییر رو به این دو هم اعمال کنید :
    .paiinha:after,
    .paiinhaefore
    .balaha:after,
    .balahaefore
    کد HTML:
        top:285px;
        bottom:285px;

    کاربر مقابل از jcs.w بابت این پست مفید تشکر کرده است:

    Retired Mod <

صفحه 1 از 2 12 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پاسخ: 43
    آخرين نوشته: 2014/04/29, 09:58 AM
  2. پاسخ: 35
    آخرين نوشته: 2014/03/30, 10:21 AM
  3. آموزش زیبا سازی پست بیت { ساده و زیبا } (ورژن3)
    توسط sorathost در انجمن آموزش های وی بولتین
    پاسخ: 4
    آخرين نوشته: 2012/11/15, 07:39 PM
  4. آموزش زیبا سازی پست بیت { ساده و زیبا }
    توسط Mohsen Neo در انجمن آموزش های وی بولتین
    پاسخ: 46
    آخرين نوشته: 2012/08/05, 02:40 PM
  5. پاسخ: 1
    آخرين نوشته: 2012/04/13, 05:45 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •