/ آموزش ساخت یک باکس متن با قابلیت لینک و افکت (اختصاصی ویکی وی بی)
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 16

موضوع: آموزش ساخت یک باکس متن با قابلیت لینک و افکت (اختصاصی ویکی وی بی)

  1. #1
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir

    آموزش ساخت یک باکس متن با قابلیت لینک و افکت (اختصاصی ویکی وی بی)

    درود.
    خب می خوایم با یه کمک کوچولو از html و css یک باکس بسازیم که متن داخلش قرار گرفته باشه و لینک دار باشه یه افکتی هم بهش می دیم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی البته ساده ساده !

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    خیلی خیلی راحت اول از همه می یایم یه کلس با سی اس اس درست می کنید اینطوری :
    کد:
    .box {
    
    }
    تمام ! حالا با html فراخانیش می کنیم اینطوری :
    کد:
    <div class="box">
    
    </div>
    خب الان اینها خالی هستن ! بیایم از متن شروع بکنیم ببینیم چی میشه ! یه متن می نویسی اینطوری :
    کد:
    <div class="box">
    ویکی وی بی ، مرجع ویبولتین
    </div>
    تمام ! حالا اینکه خاصیت لینک رو نداره ! پس یه خاصیت لینک بهش می دیم :
    کد:
    <a href="http://wikivb.ir">ویکی وی بی ، مرجع ویبولتین</a>
    خب سی اس اسمون رو که دست نزدیم ! حالا یه مرور می کنیم الان اچ تی ام ال چی شد ؟
    کد:
    <div class="box">
    <a href="http://wikivb.ir">ویکی وی بی ، مرجع ویبولتین</a>
    </div>
    آفرین ! تا اینجاش که آسون بوده ! حالا بیاید بریم سراغ سی اس اس
    یه بگراند بدیم چطوره ؟ بدیم ! این خاصیت رو اضافه می کنیم :
    کد:
     background: #777777;
    ا ! اینکه کشیده شده کادرش ، مستطیل هم هست ! عجله نکنید ! تازه شروع کردیم !
    بیاید انتخاب بکنیم کدوم سمت باشه ! من می گم چپ ! پس اینو اضافه می کنیم :
    کد:
    float: right;
    خب چرا مستطیله ؟ آقا وایسا دیگه ! مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    اینو اضافه بکن تا همه ی گوشه ها 7 پیکسل گرد بشه :
    کد:
    border-radius: 7px;
    چرا آبیه متنمون ؟ ! جناب آموزشو بخون می رسیم الان به اونجاشم !
    یه دقیقه بر گردیم به اچ تی ام ال و براش یک تگ تعریف بکنیم ، نه نه نه ! نیازی نیست ! خودش به خاطر اینکه حالت لینک دار داره تعریف شده ! آفرین ! پس تو سی اس اس اضافه می کنیم این کلس جدید رو :
    کد:
    .box a {
    
    }
    خیلی هم خوب ! اما هنوز که آبیه ! خب عزیزم صبر دیگه !
    یک رنگ بهش می دیم ! مثلا سفید !
    به اون کلس جدیده که آخرش یه a به خاطر اون تگ html اضافه کردیم بودا ! به همون این رو بده که روی متن بشه (البته به کلس اصلی هم بدی کار می کنه اما خب ما می خوایم اصولی کار بکنیم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی)
    کد:
    color: #fff;
    نه کم کم داره خوشم میاد ! اما چرا خط زیرش کشیده یعنی آندرلاین ؟ ، خب صبر تا بهت بگم
    این خط به خاطر خاصیت a هست و کافیه اینو بدیم :
    کد:
    text-decoration: none;
    دیدی چه ساده هست ! حالا بیاید یه فونت بهش بدیم ، یک نکته ! ما اینجا باید فونتی رو بدیم که داخل سیستممون باشه ! البته یک آموزشی رو بعدا براتون می زارم که فونت رو چی کار بکنید که اگر کسی اون فونت رو نداشت هم بتونه ببینه ! کنجکاو نشید ! اینم با css هست ! خب ما یه فونتی می دیم که داخل سیستممون هم هست :
    کد:
    font: 13px b yekan;
    خوبه ! یه سایه بیاید بهش بدیم خوشکل بشه مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    کد:
    text-shadow: 0 1px 0 #000;
    خوبه ! بد نیست ! ا ! چرا چسبیده کادر ! صبر الان می گم دیگه ! گیریه ها مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    ببینید توی کلس اصلی یا باید طول و عرض بدیم که بنده این راه رو به هیچ عنوان پیشنهاد نمی کنم چونکه نه اصولی هست ، نه سریع هست ، نه فیکس هست ! یعنی مشکل رزولیشن ایجاد می کنه ! پس میایم به کلس اصلی یعنی همون box این خاصیت رو می دیم ، کانجاو شدید که این خاصیت چی کار بکنه ! درسته ! حق هم دارید ! این خاصیت میگه آقای باکس ، لطفا اگر میشه از بالا 1 پیکسل بیا بالا ، از پایین 3 پیکسل بیا پایین ، از چپ و راست هم 10 پیکسل ، پس شد :
    کد:
    padding: 1px 10px 3px 10px;
    ایول ! مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی ولی آقای دیزاینر شما گفتی افکت ساده هم داریم پ کو ؟ تنها با چند خاصیت ساده این کارو می کنیم ! ببینیم !
    اول به کلس box a یک انیمیشن بر مقدار 2 ثانیه درست می کنیم براش ! اینطوری :
    کد:
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    زیاده ؟ ! دقت بکن ! این یدونه هست ! که چند بار تکرار شده فقط اولشون فرق داره برای اینه که با تمامی مروگر ها ست باشه اینطوریه ! خب یه مرور کلی می کنیم الان تا گم نکنیم چیزی رو !
    html :
    کد:
    <div class="box">
    <a href="http://wikivb.ir">ویکی وی بی ، مرجع ویبولتین</a>
    </div>
    css :
    کد:
    .box {
    background: #777777;
    float: right;
    border-radius: 7px;
    padding: 1px 10px 3px 10px;
    }
    .box a {
    color: #fff;
    text-decoration: none;
    font: 13px b yekan;
    text-shadow: 0 1px 0 #000;
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    }
    خیلی هم خوب و ساده ! حالا این کلس رو ایجاد می کنیم کلس هاور هست ! برای متنه ! اینطوریه :
    کد:
    .box a:hover {
    
    
    }
    خب ؟ الان مثلا یک رنگ می دیم (ما که قبلا دادیم ! درسته اما این برای افکته !)
    کد:
    color: #e6e6e6;
    ا ! موسم می ره روش در 2 ثانیه تغییر می کنه ! بله دیگه ! حالا یک نکته ! شما هرچیزی رو که در کلس اصلی متن یعنی box a زدید در هاور هم داره تکرار میشه ! اگر خاصیتی رو در هاور بنویسید دیگه تکرار نمیشه و چیزی که نوشتید عمل می کنه ! پس اینکه خیلی ساده شد ! با چند تا خاصیت و دو الی 3 تا کلس یه همچین چیزی رو ساختیم ؟ ! معلومه !
    حالا یه مرور دیگه می کنیم تا تمام بشه :
    html :
    کد:
    <div class="box">
    <a href="http://wikivb.ir">ویکی وی بی ، مرجع ویبولتین</a>
    </div>
    کد:
    css :
    .box {
    background: #777777;
    float: right;
    border-radius: 7px;
    padding: 1px 10px 3px 10px;
    }
    .box a {
    color: #fff;
    text-decoration: none;
    font: 13px b yekan;
    text-shadow: 0 1px 0 #000;
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    }
    .box a:hover {
    color: #e6e6e6;
    }
    تمام ! چقدر آسون بود !
    امیدوارم تونسته بشم راحت توضیح بدم تا بلکه کمکی کرده باشم ، امیدوارم رضایت شما را تونسته باشم جلب کنم
    بی شک استقبال شما باعث میشه آموزش های بیشتر و کمی حرفه ای تر قرار بدم
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    14 نفر از اعضا پست CodeSaz را پسندیده اند


    Coming Soon New Project ■

  2. نوين وردپرس تبلیغات شما

  3. #2
    Farshad Ghanbari آنلاین نیست.
    Farshad Ghanbari
    مدير بخش
    3,560نوشته8,085مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    219
    پسندیده است
    7,092 پست
    بلاگ
    پست
    میزان امتیاز
    8092
    مسئول 2 ستاره
    www.farshadghanbari.ir
    محمد عادت داری با خودت حرف میزنی موقع کدنویسی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    آموزش خوبی بود، بازم از این آموزشا بذار لطفامرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست Farshad Ghanbari را پسندیده اند



  4. #3
    POOYA آنلاین نیست.
    POOYA
    مدير بخش
    1,507نوشته2,815مورد پسند

    تاریخ عضویت
    Feb 2013
    شماره عضویت
    600
    پسندیده است
    2,453 پست
    بلاگ
    0 پست
    میزان امتیاز
    2825
    No Set
    بابا اینا کمی تکراریه یعنی برای خودم و خودت مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    حرفه ای بزار یکمی گیج شیم

    ای خدا محمد از این کاراش دس نکشید باید ببرمش یه دکتر خوب

    چرا آبیه متنمون ؟ ! جناب آموزشو بخون می رسیم الان به اونجاشم !مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    خسته نباشی محمدمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست POOYA را پسندیده اند


    ویرایش توسط POOYA : 06-22-2013 در ساعت 10:15 AM

  5. #4
    محمدحسین آنلاین نیست.
    محمدحسین
    کاربر اخراجي
    91نوشته28مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    11
    پسندیده است
    130 پست
    بلاگ
    1 پست
    میزان امتیاز
    32
    No Set
    درود آموزش فوق العاده خوبی بود.

    داداش یه فایل pdf چیزی سراغ نداری از پایین تر از صفر تا صد رو آموزش داده باشه داخلش خیلی خوب.من هیچ اطلاعاتی در زمینه css و html ندارم ولی خیلی دلم میخواد یاد بگیرم.

    کاربر زیر پست محمدحسین را پسندیده است:



  6. #5
    POOYA آنلاین نیست.
    POOYA
    مدير بخش
    1,507نوشته2,815مورد پسند

    تاریخ عضویت
    Feb 2013
    شماره عضویت
    600
    پسندیده است
    2,453 پست
    بلاگ
    0 پست
    میزان امتیاز
    2825
    No Set
    درود!

    با سرچ تو ویکی وی بی خیلی آموزش هست برای css - html

    http://www.wikivb.ir/forum45.html

    http://www.wikivb.ir/forum44.html


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست POOYA را پسندیده اند



  7. #6
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    درود.
    دوستان موقع کد نویسی حرف می زنم با خودم و این کلا جداست مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی ولی دلیل اینکه توی آموزش به این صورت نوشتم اینه که من مثلا یک خاصیت رو می گم اینه و اینطوریه بعد خودم رو می زارم جای بیننده ببینم تا اینجا واسش چه سوالی پیش میاد ! این کار من باعث میشه آموزش ساده تر باشه
    ولی حجم آموزش کمی زیاد شد چونکه خواستم ساده ساده ساده توضیح بدم و مطمئن باشید اگر می خواستم فقط مطلبی رو بزارم و مثل دیگر آموزشها تنها سورس بزارم نه تاثیری در دانش کد نویسی داشت و نه اسمش رو می شد گذاشت آموزش !
    در مورد آموزش های دیگه هم استقبال بیشتری بشه چشم می زارم اما انتظار آموزش کل کد نویسی از 0 تا 100 رو نداشته باشید به 2 دلیل ! اول اینکه اصلا از لحاظ زمانی نمیشه و کلا به هزار دلیل این کار غیر ممکن هست ، دلیل دوم هم بنده خودم تا 100 نیستم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    ولی واقعا استقبال کم بود ، 3 شب آموزش گذاشتیم گفتیم استقبال زیاد ولی ...
    استقبال بیشتر آموزش های بیشتر مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    5 نفر از اعضا پست CodeSaz را پسندیده اند


    Coming Soon New Project ■

  8. #7
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    آموزش خوبی بود مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    .....

  9. #8
    local آنلاین نیست.
    local
    کاربر سايت
    2,070نوشته1,232مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1475
    پسندیده است
    1,828 پست
    بلاگ
    7 پست
    میزان امتیاز
    1241
    No Set
    نقل قول نوشته اصلی توسط Dξ3ІGПEЯ نمایش پست ها
    درود.
    دوستان موقع کد نویسی حرف می زنم با خودم و این کلا جداست مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی ولی دلیل اینکه توی آموزش به این صورت نوشتم اینه که من مثلا یک خاصیت رو می گم اینه و اینطوریه بعد خودم رو می زارم جای بیننده ببینم تا اینجا واسش چه سوالی پیش میاد ! این کار من باعث میشه آموزش ساده تر باشه
    ولی حجم آموزش کمی زیاد شد چونکه خواستم ساده ساده ساده توضیح بدم و مطمئن باشید اگر می خواستم فقط مطلبی رو بزارم و مثل دیگر آموزشها تنها سورس بزارم نه تاثیری در دانش کد نویسی داشت و نه اسمش رو می شد گذاشت آموزش !
    در مورد آموزش های دیگه هم استقبال بیشتری بشه چشم می زارم اما انتظار آموزش کل کد نویسی از 0 تا 100 رو نداشته باشید به 2 دلیل ! اول اینکه اصلا از لحاظ زمانی نمیشه و کلا به هزار دلیل این کار غیر ممکن هست ، دلیل دوم هم بنده خودم تا 100 نیستم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    ولی واقعا استقبال کم بود ، 3 شب آموزش گذاشتیم گفتیم استقبال زیاد ولی ...
    استقبال بیشتر آموزش های بیشتر مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    ما از شما کدنویس های ماهر انتظار داریم حداقل سطح پیشرفته کد ها رو به ما تکی تکی اموزش بدین تا ماه هم راه بیفتیم.
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  10. #9
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    نقل قول نوشته اصلی توسط local نمایش پست ها
    ما از شما کدنویس های ماهر انتظار داریم حداقل سطح پیشرفته کد ها رو به ما تکی تکی اموزش بدین تا ماه هم راه بیفتیم.
    الان اگه کدنویسی بلد نبودین حرفتون رو پس میگرفتین مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست AminX را پسندیده اند


    .....

  11. #10
    local آنلاین نیست.
    local
    کاربر سايت
    2,070نوشته1,232مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1475
    پسندیده است
    1,828 پست
    بلاگ
    7 پست
    میزان امتیاز
    1241
    No Set
    عزیز میشه اموزش بدی چیکار کینم وقتی موس روی عکس میره یه عکس دیگه بیاد یعنی هاور یک عکس یه عکس دیگه باشه من نمیدونم کجای این کار رو اشتباه میرم نمیشه.

    - - - Updated - - -

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

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

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

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

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

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

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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