css3 و گرادین!!!

[صادق صدقی]

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

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(120,23,92)),
color-stop(0.68, rgb(226,244,117)),
color-stop(1, rgb(30,107,107))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(120,23,92) 0%,
rgb(226,244,117) 68%,
rgb(30,107,107) 100%
);


اینم سورس (http://gradients.glrzad.com/)
خیلی قشنگ بود گفتم بزارم واسه شما

[صادق صدقی]

سایه آتشی برای متن با سی اس اس 3!!!!!!!!!!!!!!!!!!


background: black;
color: white;
font-size: 30px;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

منبع (http://www.taktarh.com/%D9%86%D9%88%D8%B4%D8%AA%D9%87-%D8%A2%D8%AA%D8%B4%DB%8C%D9%86-%D8%AF%D8%B1-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D8%A7-%DA%A9%D9%85%DA%A9-css3/)

[صادق صدقی]

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

فرض میکنیم در div ای که برای فرم search در قالب شما استفاده میشود دو input قرار دارد که هر دو دارای یک id هستند و شما میخواهید برای هرکدام یک استایل جدا بنویسید :

<div id="ssearch">
<input type="text" value="" name="ss" id="ss" /><input type="submit" id="ss" value="Search" />
</div>

برای انجام این کار در css این div میتوانید مانند کد زیر عمل کنید :


input[type="submit"]#ssearch { Style morede nazar }
input[type="text"]#ssearch { Style morede nazar }
همچنین برای برای استایل های hover و focus هم میتوانید به این شکل بنویسید :

input[type="submit"]#ssearch:hover { Style morede nazar }
input[type="submit"]#ssearch:focus { Style morede nazar }
موفق باشید

منبع (http://www.taktarh.com/%DA%86%D8%B1%D8%AE%D8%B4-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%A8%D9%87-%DA%A9%D9%85%DA%A9-css3/)

[صادق صدقی]

در قسمت سوم سری مقالات css3 آموزش چرخاندن تصاویر رو براتون آماده کردم.
نمونه ای از چرخش در قالب خود سایت در تصاویر پست ها به کار رفته که تصاویر با -۲ درجه کج شده اند

کد زیر را برای تصویر قرار دهید


-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);

سوالی بود در همین پست یا انجمن مطرح نمایید
موفق باشید
منبع : تک طرح (http://www.taktarh.com/)

[saman6488]

اقا ممنون،css3 مربوط به چه سالي هست؟ بعد يه سوال ديگه، چه طور ميتونيم يه تکست باکس رو به صورت بيضي نمايش بديم؟ مثلا بعضي از اين سايتها رو ديديد برا وارد کزردن اسم بيضي شکل هست.

[tux-world]

برای بیضی کردن کافیه مقدار پیکسلی رو بیشتر کنی


-moz-border-radius:7px;
-webkit-border-radius:7px;

[Javad.Kashi]

سلام به همه
حالا که بحث از css3 هست شاید خوب باشه که من هم این سایت (http://border-radius.com) را دوباره معرفی کنم .برای افراد مبتدی که می خوان نتایج بیضی کردن_rounded corner_ را به صورت آنلاین مشاهده کنند مفید می باشد.

یا علی

[emad_67]

اما هردوی آنها دارای یک id هستندتو یک سند html استاندارد نباید هیچ دو المانی id یکسانی داشته باشند.
توی استایل هایی هم که نوشتی ssearch# باید در ابتدا قرار بگیره:


#ssearch input[type="submit"] { Style morede nazar }
#ssearch input[type="text"] { Style morede nazar }

برای بیضی کردن کافیه مقدار پیکسلی رو بیشتر کنیاین روش خیلی درست نیست و در خیلی از موارد هم جواب نمیده، تو یکی از آموزش ها (ساخت لوگوی مرورگر اپرا (http://barnamenevis.org/showthread.php?213000-%D8%B3%D8%A7%D8%AE%D8%AA-%D9%84%D9%88%DA%AF%D9%88%DB%8C-%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1-%D8%A7%D9%BE%D8%B1%D8%A7-%D8%A8%D8%A7-CSS-3.0)) چگونگی ساخت دایره و بیضی توضیح داده بودم. در خاصیت border-radius میشه میزان radius در راستای افقی و عمودی رو تنظیم کرد که با علامت / از هم جدا میشن.
مثلا برای ساخت بیضی با یک div من این رو نوشتم:


.test
{
-moz-border-radius: 200px/100px;
-webkit-border-radius: 200px 100px;
height: 50px;
border: 1px solid #000;
width: 100px;
}


<div class="test">
</div>
فقط برای webkit به جای / از space استفاده کنید.
از این طریق میشه خیلی از اشکال دیگه رو هم ایجاد کرد، نه فقط بیضی.