reza.sh

تکنیکهای css

آغاز شده توسط: reza.sh,

17 پست در این موضوع

ارسال شده در (ویرایش شده)

برای سایه دار کردن متن باید از تکه کد زیر استفاده کرد تا مانند تصویر متن سایه دار بشه

 text-shadow:5px 6px 7px #016030;

توضیح بر حسب مقادیر::

5: فاصله متن از سمت چپ

6: فاصله متن از بالا (عمق تو رفتگی)

7: مقدار تار شدن متن

016030: رنگ سایه برای متن

[ATTACH=CONFIG]1465[/ATTACH]

ویرایش شده در توسط reza.sh

Share this post

Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

ارسال شده در

هدف اموزش :: ایجاد یک باکس با گوشه های گرد شده 

<html>

<head>
 <title>Hello!</title>
 <style type="text/css">
   div.reza-sh
       {
         width:150px; // عرض باکس
         height: 150px; // طول باکس
         background: #99FF66; // ایجاد پس زمینه
         border-radius:15px;// کد مربوط به گرد کردن گوشه های باکس 
         text-shadow: 1px 1px 6px #000000;//کدی که برای سایه دار کردن متن استفاده میشه
         text-align: center; //نحوه چیدنش متن
       }

 </style>
</head>
<body>
<center>
<div class="reza-sh">
  <h6>In The Name Of God </h6>
</div>
</center>
</body>
</html>

Share this post

Link to post
Share on other sites

ارسال شده در

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

ضمنا تاپیک اختصاصی آموزش css از پایه نیز قبلا توسط باز شده که آموزشها در آن تاپیک به صورت مستمر و مرحله به مرحله ادامه خواهد داشت که از ابتدا شروع و به مباحث جرفه ای ختم میشود/

Share this post

Link to post
Share on other sites

ارسال شده در

اقا دست درد نكنه راحتمون كردي اگه اين اقا رضا هم اين تايپيكو ببينه و اينجا كاراشا كنه نور الا نور مي شه

بازم تشكر

Share this post

Link to post
Share on other sites

ارسال شده در

سلام من با css3 چند تا مشکل کوچیک دارم نمیتونم مستطیل ها رو گرد کنم اگه فایلمو بدم میتونید برام درستش کنید؟

با تشکر

Share this post

Link to post
Share on other sites

ارسال شده در

در این جا قصد دارم یه تکنیک جدید رو بگم:

توی این تکنیک ما می تونیم داخل مستطیل گوشه گرد که ایجاد کردیم رو حاشیه ی داخلی براش ایجاد کنیم

.reza-box-shadow{
 width:250px; // پهنا مستطيل
 height:150px;       // ارتفاع مستطيل
 border-radius: 12px;   // ميزان گرد شدن حاشيه ها
 background:  #C5C5C5;    // پس زمينه مستطيل
 box-shadow: 2px 5px 8px 6px #8B3701 inset;
 text-align: center;
 text-shadow: 2px 2px 10px #000000;
 color: #FF0000;
  }

حالا توضیحات box-shadow::

2 : فاصله از چپ

5 : فاصله از بالا

8 : میزان تار شدن

6 : میزان حجم سایه ( که اگر نباشد مشکلی پیش نمیاد)

#8B3701 : رنگ حاشیه

inset : نشان دهنده این است که حاشیه در داخل شکل قرار بگیرد

[ATTACH=CONFIG]1642[/ATTACH]

Share this post

Link to post
Share on other sites

ارسال شده در

سلام من با css3 چند تا مشکل کوچیک دارم نمیتونم مستطیل ها رو گرد کنم اگه فایلمو بدم میتونید برام درستش کنید؟

با تشکر

دوست عزیز طبق راهنمایی عمل کنید جواب میگیرید

ولی اگه باز نتونستید فایل رو بفرستید.

با آرزوی سر بلندی ایران

Share this post

Link to post
Share on other sites

ارسال شده در

در این لحظه می خوام کدهای مرورگر ها برای اجرای برخی ازکد های css رو بگم ، به طور مثال گرد کردن گوشه تو مرورگر IE عمل نمیکنه یا متن سایه دار در سافاری یا IE نیز مشکل داره برای حل این مشکل ما باید از کد های مربوط به هر مرورگر استفاده کنیم که تو جدول زیر هست + یک مثال ( این جدول رو از مقاله جناب شیخله براتون قرار میدم)

[ATTACH=CONFIG]1645[/ATTACH]

div.joomlaforum{ 
  box-shadow: 1px 1px 1px 1px #000000 inset; 
 -webkit-box-shadow: 1px 1px 1px 1px #000000 inset; 
}

در مثال بالا ما با استفاده از دستور webkit یه باکس سایه دار به سافاری معرفی کردیم.

با آروزی سربلندی ایران

Share this post

Link to post
Share on other sites

ارسال شده در

با این تکنیک ما می تونیم داخل مستطیل گوشه گرد که ایجاد کردیم رو حاشیه ی بیرونی براش ایجاد کنیم


.reza-box-shadow{   width:250px; // پهنا مستطيل   height:150px;       // ارتفاع مستطيل   border-radius: 12px;   // ميزان گرد شدن حاشيه ها   background:  #C5C5C5;    // پس زمينه مستطيل   box-shadow: 2px 5px 8px 6px #8B3701 ;   text-align: center;   text-shadow: 2px 2px 10px #000000;   color: #FF0000;    }

حالا توضیحات box-shadow::

2 : فاصله از چپ

5 : فاصله از بالا

8 : میزان تار شدن

6 : میزان حجم سایه ( که اگر نباشد مشکلی پیش نمیاد)

#8B3701 : رنگ حاشیه

Share this post

Link to post
Share on other sites

ارسال شده در

در این تکنیک قصد دارم نحوه کج کردن اشیا تو صفحه رو آموزش بدم

برای این کار از کدهای زیر می توان استفاده کرد

  div.reza-sh{ 
 width:100px; // پهنا
 height:100px;  // ارتفاع
 background: blue; // پس زمینه
 color:  yellow;  // رنگ متن 
 transform:  rotate(35deg); // ایجاد حالت انحراف و عدد 35 نشان دهنده این است که چند درجه دارای انحراف باشد
 -moz-transform:  rotate(35deg); // شناساندن این کد به مرورگر موزیلا
 -o-transform:  rotate(35deg); //شناساندن این کد به مرورگر اپرا
 -webkit-transform:  rotate(35deg); //شناساندن این کد به مرورگر سافاری

فایل پروژه ضمیمه شده است

تصویر از پروژه ::

[ATTACH=CONFIG]1660[/ATTACH]

Share this post

Link to post
Share on other sites

ارسال شده در

برای سایه دار کردن متن باید از تکه کد زیر استفاده کرد تا مانند تصویر متن سایه دار بشه

 text-shadow:5px 6px 7px #016030;

توضیح بر حسب مقادیر::

5: فاصله متن از سمت چپ

6: فاصله متن از بالا (عمق تو رفتگی)

7: مقدار تار شدن متن

016030: رنگ سایه برای متن

[ATTACH=CONFIG]1465[/ATTACH]

سلام وقتی من این کدو میزنم یه سایه سیاه برا لینکام ایجاد میشه ورنگ نوشته ها تغییر نمیکنه.

لطفا کدی را ارئه دهید که وقتی موس به روی لینم میره رنگش قرمز و یه سایه سیاه براش ایجاد شه.

ممنون

Share this post

Link to post
Share on other sites

ارسال شده در

سلام وقتی من این کدو میزنم یه سایه سیاه برا لینکام ایجاد میشه ورنگ نوشته ها تغییر نمیکنه.

لطفا کدی را ارئه دهید که وقتی موس به روی لینم میره رنگش قرمز و یه سایه سیاه براش ایجاد شه.

ممنون

دوست عزیز این کد رو استفاده کنید

a:hover{
text-shadow:1px 1px 1px #000;
color:#F00;
}

Share this post

Link to post
Share on other sites

ارسال شده در

با تشکر از امین عزیز

نکته :: یه لینک در صفحات ما دارای چهار وضعیت می باشد که در تصاویر زیر مشخص شده است(در ادامه مثال و کاربرد هایی از موارد خواهیم زد)

36.gif

توضیحات::

37.gif

Share this post

Link to post
Share on other sites

ارسال شده در

با کد زیر میتونید عکس رنگی رو سیاه و سفید کنید و دیگه نیازی به فتوشاپ ندارید.

img{
filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

Share this post

Link to post
Share on other sites

ارسال شده در

دور عکس هاش از border و border-radius استفاده کرده...با یه سرچ ساده تو w3c میتونید انواعش ببینید

Share this post

Link to post
Share on other sites

ارسال شده در

سلام

چند کد css هم برای زیبا سازی تصاویر قرا بدید مثل تصاویر ای وب سایت www.tanhae.com

اینم css واسه زیبا سازی تصویر

img{
border:5px #ff0000 solid;
}
img:hover
{
border:5px #4bbdff solid;
border-radius: 0px 30px 0px 30px;
box-shadow: #ffffff;
cursor:pointer;
transition:all 1s ease-in 0s;
transform:rotate(5deg);
}

Share this post

Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


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