مهمان عزیز خوش آمدید. ورود ثبت نام



صفحه‌ها (3):
امتیاز موضوع:
  • 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش css و کدهای زیبای آن

آموزش css و کدهای زیبای آن
تصویر: http://up.wikivb.ir/images/fo2qezgclm928a309ici.png
سلام از این به بعد در این تاپیک کد های گوناگون css و سری آموزشی های آن قرار می گیرند .
امیدوارم این تاپیک مورد استفاده کاربران قرار بگیرد .


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
تصویر: http://up.wikivb.ir/images/cgrx5tx4fid8arl7v7c6.png
+ چرخش تصویر با استفاده از CSS

عملکرد: با استفاده از این کد می تونید تصویر مورد نظرتون رو به مقدار زاویه دلخواهتون با استفاده از css بچرخونید

استایل:
کد:
.img {
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
.img:hover {
-webkit-transform:rotate(15deg);
 -ms-transform:rotate(15deg);
 -o-transform:rotate(15deg);
 -moz-transform:rotate(15deg);
 -webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}

کد فراخوانی :
کد:
<div class="img">
<a href="http://my-bb.ir/User-KoG">
<img src="http://up.wikivb.ir/images/biz8g1emhox2cicsvpf.png"/>
</a></div>

منبع : اختصاصی My-bb.ir
موفق باشید .


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
تصویر: http://up.wikivb.ir/images/zzl3uggw14r1hpr0u.png
+ سایه دادن به متن

استایل:

کد:
<style>
.txt {
text-shadow:2px 2px 4px #5d5d5d;
font:12px tahoma;
color:#7c7c7c;
}
</style>

کد فراخوانی :


کد:
<span class="txt"> متن من <span>

منبع : my-bb.ir
تصویر: images/smilies/heart.gif


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
داداش عالیه


شما که این همه زحمت میکشی یه شات هم اضافه کن دیگه!

قربون دستت تصویر: images/smilies/heart.gif





تصویر: http://up.vbiran.ir/uploads/5525140282867117654_ROHE.png
پاسخ
دوست عزیز من شات قرار بده چیرو میفهمی چرخش تصویر رو که نمیشه به عکس کشید تصویر: images/smilies/biggrin.gif

میتونین روی لوکال تست کنید . تصویر: images/smilies/heart.gif


خوشحالم به خاطر این همه پیشرفت
I'm happy to progress
پاسخ
+ ایحاد سایه درون باکس با css

برای ایجاد سایه درون باکس مورد نظرتون باید از کد زیر در استایلتون استفاده کنید :
کد:
box-shadow:inset 0px 0px 5px #333;


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
تصویر: http://up.wikivb.ir/images/wvo6dfmt8fan3kucs6yw.png
+ اطلاعیه زیبا برای بالای انجمن

استایل:
کد:
.topnav_kog {
background: none repeat scroll 0% 0% rgb(221, 221, 221);
color: rgb(0, 0, 0);
border-top: 1px solid rgb(68, 68, 68);
border-bottom: 4px solid rgb(68, 68, 68);
text-align: center;
text-shadow: 1px 2px 0px white;
border-radius: 4px 4px 4px 4px;
margin: 10px auto;
padding: 5px 20px;
box-shadow: 0px 2px 5px rgb(238, 238, 238);
font-size: 8pt;
font-family:tahoma;
direction:rtl;
}

کد فراخوانی :
کد:
<h1 class="topnav_kog">
اطلاعیه زیبا برای بالای انجمن _ کدنویسی شده توسط  KoG
</h1>

موفق باشید تصویر: images/smilies/heart.gif


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
+ گرد کردن کادر باکس ها و تصاویر با css

کافیه از این کد برای گرد کردن در استایل کدهاتون استفاده کنید :
کد:
border-radius:5px;


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
+ محو کردن [Blur] متن با استفاده از Css

دمو : [ قبل از رفتن موس به روی متن ]

تصویر: http://up.wikivb.ir/images/desaawovzei5g872zqnb.png

دمو : [ بعد از رفتن موس به روی متن ]

تصویر: http://up.wikivb.ir/images/d2nwglgtyxvriugsw32y.png


استایل:
کد:
<style>
.txt-blur {
font: 14px tahoma;
color:#333;
#00A3EF;
font-weight: normal;
direction:rtl;
}
.txt-blur:hover {
color: transparent;
text-shadow: 0px 0px 10px #333;
font-weight: normal;
}
</style>

کد فراخوانی :
کد:
<h1 class="txt-blur">
محو کردن [Blur] متن با استفاده از Css
</h1>

منبع : My-bb.ir
موفق باشید تصویر: images/smilies/heart.gif


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
تصویر: http://up.wikivb.ir/images/4pr0fvhlpaxfqafm1kgr.png
+ اطلاعیه شماره دو با css

استایل:
کد:
.topnav2_kog {
    background:#F3F3F3;
    border:1px solid #C1C1C1;
    text-align:center;
    margin:0 auto 10px;
    padding:5px 10px;
    -moz-box-shadow:inset 0 0 1px #fff;
    -webkit-box-shadow:inset 0 0 1px #fff;
    box-shadow:inset 0 0 1px #fff;
    text-shadow:0 -1px rgba(255,255,255,0.5);
    font:12px tahoma;
        direction:rtl;
}

کد فراخوانی :
کد:
<h1 class="topnav2_kog">
اطلاعیه سری دو
</h1>

موفق باشید . تصویر: images/smilies/heart.gif


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
صفحه‌ها (3):


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  مناسبت آموزش ایجاد بنر گوشه به مناسبت رحلت حضرت محمد (ص) Develepor 0 38 ۰۸ آذر ۱۳۹۵، ۰۵:۱۵ ب.ظ
آخرین ارسال: Develepor
Thumbs Up آموزش کار با تجهیزات شبکه میکروتیک و MikroTik RouterOS IrIsT 0 66 ۱۱ آبان ۱۳۹۵، ۰۷:۲۵ ب.ظ
آخرین ارسال: IrIsT
  آموزش افزودن انیمیشن typed به متون انجمن systemengineer 0 158 ۲۷ خرداد ۱۳۹۵، ۱۲:۲۵ ب.ظ
آخرین ارسال: systemengineer
  آموزش سئو پیشرفته(قسمت اول) mhdbadboy 0 1,374 ۰۷ اردیبهشت ۱۳۹۳، ۰۶:۲۹ ب.ظ
آخرین ارسال: mhdbadboy
  آموزش ساخت سایت برای انجمن Drow-Ranger 12 3,635 ۱۸ فروردین ۱۳۹۳، ۰۵:۱۳ ب.ظ
آخرین ارسال: mellat
  سری آموزش های ویدیویی Html _Arman 0 2,158 ۲۵ اسفند ۱۳۹۱، ۰۲:۰۱ ق.ظ
آخرین ارسال: _Arman
  آموزش Html - 1 آشنایی با html _Arman 0 2,472 ۰۷ اسفند ۱۳۹۱، ۱۱:۲۷ ق.ظ
آخرین ارسال: _Arman

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir