css نویسی فوق پیشرفته

نویسنده : imanclassic

css نویسی فوق پیشرفته
سلام خدمت همه دوستان،

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

با تشکر imanclassic
نویسنده :

X
پلاگین باکس ورود جی کوئری (jQuery Login Box)
نام پلاگین : jQuery Login Box نویسنده : MybbCo عملکرد : افزودن باکس ورود جی کوئری به انجمن شما لی ...
تعیین نشده
دیدگاه های کاربران 6
ارسال: 2
پیشرفته : تغییر اسکرول بار در کروم
نویسنده : ایمان یزدانی

شما دوستان میتونید با استفاده از کلاسهای ازپیش تعریف شده اسکرول بار کروم رو تغییر بدین و بصورت کلاس هایی که توی این بخش معرفی میکنم میتونین شخصی سازی رو انجام بدین :


::-webkit-scrollbar {
height12px;
width12px;
background#000;
}
::-
webkit-scrollbar-thumb {
background#393812;
-webkit-border-radius1ex;
-
webkit-box-shadow0px 1px 2px rgba(0000.75);



توضیح :

::-webkit-scrollbar
بکگراند اسکرول بار - میتونید تغییر بدید مقادیر زیر رو تا نتیجه رو ببینید

::-webkit-scrollbar-thumb
خود اسکرول که توسط کاربر صفحه رو به انتها یا ابتدا میبره،با تغییر اندازه میتونید زیباتر کنید و با اعمال خاصیت hover اون رو برای مواقعی که کاربر بر روی اسکرول میره شکیل تر کنید...

نکته : تمامی خاصیتهای موجود در css قابل استفاده هستن در این کلاسها
ارسال: 3
پیشرفته : ساخت Gradient با Css3
نویسنده : ایمان یزدانی


امروزه همه به دنبال زیبایی خاص در وبسایت خود هستند و وبسایتها به نوعی منازل مسکونی افراد تبدیل شده که مسائلی را به دنبال داشته،امروز ما قصد داریم برای شما ترفندی را آموزش دهیم تا از رنگ های یکدست و ساده خلاص شوید و به سمت رنگهای ترکیبی و بسیار چشم نواز گرویده شوید،با این آموزش همراه شوید...

Linear Gradient - خطی Gradient

ساده ترین نوع از رنگهای Gradient این نوع میباشد که معروف به خطی هستند و بسیار در عین سادگی کد زیبا هستند،بدینصورت که شما جهت تعویض رنگ را باید در کد ذکر کنید تا سوی رنگ به آن سمت تغییر کند،با یک مثال ساده به سراغ این کد میرویم :

.gradient {
  background-image:
    linear-gradient(
      red#f06d06
    );


بهتر است از background-color استفاده نشود...

همانطور که ملاحظه میکنید رنگ ها بوسیله کاما از هم جداشده و به ترتیب در شئ شما ظاهر میشوند،اما به کدام جهت؟ همراه باشید...

جهت تغییر سمت و سوی رنگ باید مانند زیر سمت و سوی رنگ را تغییر دهید :

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red
#f06d06
    );


شما میتوانید هر سمتی را که میخواهید با یک دستور to و جهت ها در ادامه آن،بسازید و همینطور به صورتهای دیگری هم قابل استفاده میباشد مانند : 

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      red
#f06d06
    );


ما برای مثال از دو رنگ در مثالها استفاده نموده ایم که شما میتوانید بصورت طیفی از رنگها استفاده نمایید مانند : 

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red
, 
      
#f06d06, 
      rgb(2552550), 
      green
    
);


IE filters - استفاده در اکسپلورر

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

/* "Invalid", but works in 6-8 */
filterprogid:DXImageTransform.Microsoft.gradient(GradientType=0startColorstr=#1471da, endColorstr=#1C85FB);

/* Valid, works in 8-9 */
-ms-filter"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"

Radial Gradients - Gradient های دایره ای یا دوار

این نوع از Gradients هم زیبا و کاربردی هستند و میتوانید در بعضی از دکمه های سایت استفاده نمایید،مانند زیر عمل کنید :

.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );


تنها تفاوت در کد،شروع اولین رنگ از وسط میباشد که بسیار هم مهم است...
در کد بالا شما یک رنگ را از وسط آغاز و بصورت پخش شده از وسط ملاحظه میکنید،برای اینکه بتوانید بصورت دایره و نقطه کانونی در بیاورید باید از Circle استفاده نمایید.
.gradient {
  background-image:
    radial-gradient(
      circle,
      yellow,
      #f06d06
    );


شما میتوانید به این کدها جهت دهی نمایید تا مانند باریکه نور از گوشه ها تابیده شوند که کاربرد زیادی در طراحی خواهند داشت و میتواند طراح را در بسیاری از طرح های گرافیکی کمک کند،دقت کنید به مثال پایین :

.gradient {
  background-image:
    radial-gradient(
      circle at top right,
      yellow,
      #f06d06
    );


دقت کنید :

این آموزش به این ناحیه و در این مرحله خاتمه نمی یابد ولی سعی میکنیم آموزشهایی قرار دهیم که بتوانیم تا حداکثر کارایی را از Css3 برای شما به نمایش و آموزش بگذاریم،با تشکر از شما که تا اینجا همراه ما بودید.

iClassic
ارسال: 4
پیشرفته : استایل دهی فرم ها
نویسنده : ایمان یزدانی


فرم ها یکی از بخش های مهم در یک وبسایت هستند و ما میدانیم که هرکاربر که وارد سایت میشود خصوصا در سایتهایی که طراح هستند،خیلی جزییات باید بخوبی کار شده باشد تا چشم کاربر به مشکلی برخورد نکند و دید بدی نسبت به طراح ضمیمه کند،در این قسمت میخواهیم نوعی فرم استایلینگ حرفه ای را آموزش دهیم که البته در سطوح بین المللی نیست اما میتوانید با خلاقیتهای خود به سطوح بالاتری ارتقاء دهید...

پیش نیاز این آموزش،دانایی کامل از کدنویسی Css در سطح متوسط است

آشنایی با برخی CSSدهی المان های فرم

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

input{
padding:5px 2px;
border:1px solid silver;


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

input[type=text]{
padding:5px 2px;
border:1px solid silver;


در مثال بالا شما تنها بر روی فیلدهای متنی این خاصیت را خواهید داشت،حالا به سراغ آموزش ها و تاکتیک ها میرویم

فرمهای تک سطری

این نوع فرمها هر بخش متشکل از فیلدها و دکمه ها و چک ها و ... تشکیل شده که میتوان در یک سطر قرار داد و بنوعی هم در رسپانسیو کردن هم کمک میکند،برای استایل دهی به این نوع استایل از فرم مثلا از کد زیر میتوان بهره برد :

input{
padding:5px 2px;
border:1px solid silver;
color:#333;
outline:none // نکته
width:100%;
}
input[type=text]{
font:bold 11pt Tahoma;
}
input[type=password]{
font:bold 13pt Arial;
}
input[type=submit]{
font:bold 13pt Tahoma;
text-align:center;
background:red;
color:#FFF;


اخیرا در طراحیها از این نکته استفاده میکنند،این بدین معنی است که زمانی که کاربر فوکوس میکند روی یک فیلد کادری آبی از سوی مرورگر روی فیلد را نپوشاند

به کدهای بالا دقت کنید که به تنهایی کار مارا مشکل میکند باید به یاد داشته باشید که حتما در یک div با خاصیت طول محدود قرار گیرد تا در یک زیبایی خاصی یکجا قرار گیرد...

این آموزشها صرفا برای این است که شما با بعضی از تاکتیک های پیشرفته آشنا شوید و برای همین به کدها بسنده میکنیم و برای اینکه با اصول آشنا شوید و از خلاقیت خود استفاده کنید بطور ساده در نظر گرفته شده.
با ما همراه باشید تا در جلسه آینده نوعی دیگر از استایل فرم ها را آموزش دهیم،باتشکر

منبع : http://forum.iclassic.ir/showthread.php?tid=165
ارسال: 5
پیشرفته : before / after
نویسنده : ایمان یزدانی


حتما همه شما دوستان تا کنون دیده اید که در اکثر وبسایتها یکسری از استایلها وجود دارد که پیش از شئ ساخته شده اند و حتی بعد آن که بسیار ظاهری جدید را ایجاد کرده،این نوع استایل ها که مانند فلش یک پیام بالون قرار میگیرد را میتوان با سلکتور های ::before و ::after انجام داد.

::before
{
css declarations;
}
::
after
{
css declarations;

شکل کلی این سلکتورها را مشاهده کردیم و حالا باید از یک ترفند استفاده کنیم که ما فقط در این بخش گذری بر آن خواهیم زد و کلیات آن با شما و خلاقیت شماست.

برای مثال ؛
.alert
background-color:yellow;
color:red;
}
.
alert::before{
content:"";
background-color:yellow;
border-top:2px solid yellow;
border-bottom:2px solid yellow;

نمونه بالا همانند یک فلش برای بالن ایجاد میکند که بصورت کامل نیست و باید کمی تغییرات به آن دهید که این مثال تنها جهت آموزش زده شده و شما میتوانید با خلاقیت خود این تغییر را به نوبه خود انجام دهید و لذت ببرید.

دقت کنید که زمانی میتوانید از این آموزش نتیجه کامل بگیرید که در css نویسی سطوح مبتدی و متوسط تسلط کامل داشته باشید

منبع : http://forum.iclassic.ir/showthread.php?tid=167

پاسخ مسئول
ارسال: 6
این قسمت پیشرفته : before / after واقعا یکی از بخش های پرکاربرد css به نظر من
ممنون از ایمان عزیز
نمونه هایی از این قابلیت رو میتونید در پست بیت و صفحه اصلی همیار مشاهده کنید

image
ارسال: 7
پیشرفته : nth-child سلکتوری هوشمند
نویسنده : ایمان یزدانی


طراحان عزیز میدونن که جدیدا خلاقیت خیلی مهمه توی طراحی و خب باید تمامی سلکتورها و تاکتیکهای طراحی رو بلد بود واسه پیاده سازی و خب میشه با یه سرچ ساده هم میشه به نتیجه رسید اما زمان رو تلف میکنه...

امروز آموزشی داریم پیرامون یک سلکتوری که باهاش خیلی کارهای فوق العاده ای میشه کرد بطور مثال در استایل دهی جداول خیلی کاربرد داره و همچنین در اسلاید شو ها!

*:nth-child(number)
{
css declarations;


حالت کلی این سلکتور به اینصورت که میبینید هستش و همونطور که ملاحظه میکنین خیلی هم سادست و کاربرد آسونتری هم داره.

وقتی شما این سلکتور رو در مقابل تگ بکار ببرید تمامی زیر عناصر یا عناصر مرتبط با اون رو میتونین بصورت number که وارد میکنین استایل بدید ، به این صورت که مثلا یک جدول رو در نظر بگیرید مثلا میخوایم فقط سطر دوم ستونهای اون مشکی باشه باید اینطور بنویسیم که :

tr:nth-child(2td
{
background:#000;
color:#FFF;


با اینکار این مسئله رو میتونین حل کنید ولی اگر جدولی مثل جداول فروش هاست باشه و بخواید یکی درمیون باشه باید چه کرد؟

tr:nth-child(oddtd
{
background:#DCDCDC;


خب همونطور که میبینین ما از کلمه ذوج استفاده کردیم که این باعث میشه تمامی ردیف های ذوج ستونهاش رنگی که دادیم بگیرن،به همین آسونی میتونیم خیلی ساده جداول یا خلاقیتهای دیگه رو نشون بدیم که باعث زیبایی پروژه هامون بشه،برای درک بیشتر مثال های بیشتری در آخر آموزش میزارم.

p:nth-child(2)
{
background:#ff0000;
}

p:nth-child(odd)
{
background:#ff0000;
}

p:nth-child(even)
{
background:#0000ff;
}

p:nth-child(3n+0)
{
background:#ff0000;

دقت کنید که این آموزش در سطح پیشرفته قرار دارد و شما باید از سطح متوسط دانش استایل دهی تسلط کافی داشته باشید

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :