دسته‌ها
طراحی وب وب

نسل آینده سی‌اس‌اس

توی کنفرانس امسال گوگل Chrome Dev Summit 2019 معرفی نسل بعدی استایل سایت‌ها با css رو داشتیم. یه اجرای خیلی خوب که می‌تونین اینجا ببینین. یه خلاصه‌ایش رو براتون اینجا نوشتم که البته بهتره ویدیو رو هم ببینین چون توضیحات و دموی بعضی چیزها مثل توضیحات Houdini و Paint API که خیلی هم جذاب بود رو بهتره توی ویدیو ببینین.

CSS Scroll Snapping

ساپورت در مرورگرها:

سی اس اس snap تقریبا برای تمام سایت‌هایی که طراحی می‌کنیم به کارمون میاد، ساپورت خوبی داره و در حال حاضر بیشتر مرورگرهای بازار می‌تونن درست نمایش بدنش. با استفاده از css snap میتونیم اسلایدر تصاویر صفحه محصولات یه اسلایدرهای مطالب ویژه‌ی بالای سایت رو بدون نیاز به جاوااسکریپت و جی‌کوئری و … سبک‌تر و سریع‌تر پیاده‌سازی کنیم.

.slider { scroll-snap-type: x mandatory; }

دموی زیر رو ببینید. میتونین کد رو تغییر بدین و باهاش بازی کنین تا دستتون بیاد که وضعیت به چه شکله. سعی کنین ببینین می‌تونین جهت اسکرول رو عمودی کنین؟

See the Pen CSS Snap by Siavash (@siavashh) on CodePen.

element:focus-within

ساپورت مرورگرها:

در طراحی منو سایت‌ها وقتی که از لیست‌های تو در توی ul و li استفاده می‌کنیم، معمولا از hover و focus استفاده می‌کنیم. با کلیک کردن روی لیست‌های داخل parent استایل فوکوس ما از parent برداشته میشن. با استفاده از focus-within میتونیم این مشکل رو حل کنیم. در یک مثال دیگه که می‌تونین در زیر ببینین، ما وقتی فوکوسمون رو روی هرکدوم از child قرار می‌دیم می‌تونیم parent رو با استفاده از focus-within استایل کنیم. دموی زیر رو ببینید:

See the Pen CSS :focus-within by Siavash (@siavashh) on CodePen.

writing-mode

به تصویر زیر نگاه کنید، روش ما در سی‌اس‌اس همیشه همین بوده، چپ بالا راست پایین. این نگاه انگلیسی یا چپ به راست دیفالتیه که از اول باهاش آشنا شدیم:

دیدگاه قدیمیِ همیشگی در سی‌اس‌اس

حالا تصویر زیر رو ببینین:

دیدگاه جدید در طراحی سی‌اس‌اس

اگه تا حالا سعی کرده باشین تمپلیتی رو راست‌چین کرده باشین حتما براتون سوال پیش اومده که کاش به جای این همه فاصله و margin و padding که چپ و راستش رو باید برعکس کنین، میشد که خود مرورگر بفهمه که زبان راست به چپه و همه چیز رو خودش هندل کنه، این مشکل توی سی‌اس‌اس همیشه بوده و مثلا در استایل کردن اپ‌های native موبایل و تو برنامه‌نویسی اندروید و آی‌او‌اس این مساله حل شده بود. مثلا برای فاصله متن از ابتدای یک بلاک در اندروید لازم نیست تو یک فایل استایل marginLeft بدیم و تو فایل مخصوص زبان راست به چپ marginLeft، راه درست اینه که ما به صورت اتوماتیک با توجه به زبان اپ فاصله رو از ابتدای بلاک در نظر بگیریم و از marginStart استفاده کنیم.

حالا در سی‌اس‌اس هم میشه همین کار رو کرد. ما دیگه به جای مفاهیم چپ و راست با مفاهیم ابتدا و انتها طرف خواهیم بود. و با مرسوم شدن این روش کم‌کم تمامی تمپلتها به صورت اتوماتیک برای زبان‌های مختلف به درستی نمایش داده می‌شوند. فقط کافیه ما مقدار writing-mode رو تغییر بدیم به جهت زبان مورد نظرمون که حتی ممکنه به صورت ستونی از بالا به پایین مثل زبان ژاپنی باشه. همینطور ما دیگه با مفهوم height و width طرف نخواهیم بود. ما دیگه به جای ارتفاع و عرض با block-size و inline-size طرفیم. با استفاده از این مقادیر به جای height و width دیگه با تغییر direction نوشتاری ما، باکس‌ها به هم نمی‌ریزن و به صورت اتوماتیک تشخیص می‌دن که منظور ما چیه!

این مطلب موزیلا رو در مورد writing-mode بخونین تا بهتر درکش کنین، بعدها قطعا به دردتون میخوره

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

backdrop-filter

ساپورت مرورگرها:

ازین به بعد میشه برای ایجاد افکت روی تصویر به جای استفاده از جاوااسکریپت یا استفاده از فایل‌های تصویری، مثلا ایجاد blur یا مات کردن بک‌گراند، تغییر روشنایی، کانترست و … میشه از سی‌اس‌اس استفاده کرد، مقادیر مختلفی هست که میشه به backdrop-filter داد، اینجا میتونین دمو رو ببینین و مقادیرش رو عوض کنین و نتایج رو تست کنین:

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

url() – (برای ایجاد افکت‌های svg)

See the Pen Backdrop-filter by Siavash (@siavashh) on CodePen.

flexbox gap

این یکی از امکانات مورد علاقه منه، برای ایجاد فاصله بین بلاک‌ها قبلا باید از margin و padding استفاده می‌شد که البته چون دورتادور بلاک‌ها فاصله ایجاد می‌کنه باید همیشه حواسمون به اولین و آخرین بلاک باشه، تو راست‌چین کردن تمپلیت‌ها و زمان طراحی ریسپانسیو هم خیلی اذیتمون می‌کنه. GAP اما این مشکل رو حل میکنه و میاد فاصله بین بلاک‌هارو برامون ایجاد می‌کنه. البته موقع نوشتن این مطلب فقط فایرفاکس ساپورت می‌کنه ازش ولی امیدواریم به زودی بقیه مرورگرها ساپورتش کنن.

ساپورت مرورگرها:

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۰(زیباسازی۲)

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

لیست آموزشهای قالب وردپرس

مثل همیشه wamp رو باز میکنیم و style.css هم با برنامه ای که داریم اوپن(open)!!

امروز میخواهیم هر چیزی رو بزاریم سر جای خودش!

یعنی جای هدر،فوتر،سایدبار و نوشته ها رو مشخص کنیم و از هم متمایزشون کنیم.

کار بسیار آسون و بدون درد است! نگران نباشید فرزندانم.

یادتون باشه در در هر مرورگری که آزمایش میکنید کار رو آزمایش کنید اما IE هم نگاه کنید که بعضی وقتها چپ رو راست میشنوه و راست رو راشت!

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

من به جای اینکه ازpx یا پیکسل استفاده کنم(که در مانیتورها و رزولوشنهای مختلف متفاوته) از درصد % استفاده میکنم که یا نصف صفحه نپره(در رزولوشن های افتضاح مثل ۸۰۰ در ۶۰۰) یا نصفش سفید نشه در مانیتورهای بزرگ و wide

ما برای اینکه بتونیم همه ی div هایی که ساختیم ( و در واقع تمام صفحه رو کنترل کنیم و بتونیم اون رو از body جدا کنیم تا بتونیم استایل متفاوتی برای هر کدوم داشته باشیم) یک div دیگه در index.php میسازیم که از زیر <body> شروع میشه و تا بالای <body/> ادامه داره:

<body>

<div id=”wrapper”>

</div>

</body>

حالا ما کل body رو در یک تگ جدا کننده قرار دادیم!

میریو با firebug و یا chrome و از طریق inspect elements نگاهی به سایت میندازیم تا مطمئن شیم کارمون رو درست انجام دادیم!

حالا اگه بخواهیم که اندازه ی wrapper درصدی از کل عرض صفحه باشه میریم به style و کد زیر رو مینویسیم:

#wrapper{

width:85%;

}

اینکار باعث میشه عرض صفحه ای که ما داریم ۸۵ درصد کل عرض مانیتور و در واقع مرورگر بشه!

سیو میکنیم و میریم صفحه ی صایت رو میبینیم.

حالا برای اینکه فرق px دادن و % رو ببینین %۸۵ رو به یک عدد مثل ۷۵۰px تبدیل میکنیم و با عوض کردن عرض مرورگر تفاوت رو میبینیم:

زمانی که از px استفاده میکنیم با تغییر اندازه و همچنین تغییر رزولوشن ممکنه قسمتی از مطالب نمایش داده نشن که زیاد جالب نیست!

اما با استفاده از % همیشه همه ی مطالب نمایش داده میشن:

حالا میریم سراغ این مساله که صفحه ی ما الان وسط نیست! یعنی فاصله ی wrapper از سمت چپ و راست برابر نیست، برای اینکار از margin استفاده میکنیم و اون رو روی auto قرار میدیم تا خودش کارشو انجام بده:

#wrapper{

width:85%;

margin:auto;

}

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

نکته دیگه اینکه مثل قبل میتونیم مثلا margin از بالا یعنی فاصله از بالای صفحه رو خودمون تعیین کنیم یا مثلا از راست فاصله رو بیشتر کنیم یا هرچی برای اینکه تک تک این کار رو انجام بدیم از ۴ عدد یا درصد یا auto استفاده میکنیم:

#wrapper{

width:85%;

margin: 10px auto 0 auto;

}

یعنی اینکه از بالا ۱۰px و از راست auto از پایین ۰px و از چپ هم auto فاصله داشته باشه!

به همین راحتی!

حالا میریم وارد wrapper بشیم و هدر و غیره رو بنشونیم سر جاشون!

float یک ویژگی در css است که باعث میشه تگ ما در واقع شناور بشه! مثل آب که جای خودش رو پیدا میکنه و هیچ وقت نمیبینیم که توی یک ظرف آب، ته ظرف خالی باشه و بالای ظرف پر!

این ویژگی یکی از پر کاربردترین کارها در طراحی صفحات وب است که الان هم ما باهاش کلی کار داریم.

فعلا هدر رو تنظیم میکنیم:

#header{

float:left;

width: 100%;

}

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

#content{

width:70%;

}

دقت کنید با این کار ما عرض content رو ۷۰ درصد wrapper میکنیم که تگ مادر است، نه ۷۰ درصد کل صفحه!

اما باز هم با سیو کردن و دیدن صفحه میبینیم که سایدبار در زیر content قرار داره و نه در کنارش!

اما ویژگی مورد علاقه ی من کارمون رو درست خواهد کرد:

#content{

width:70%;

float:left;

}

حالا سیو کنید و ببینید با یک کلمه چه کارها که نمیشه کرد!

من اولین بار که این کار رو انجام دادم خیلی ذوق زده شدم و حتی الان هم حس خوبی دارم اینجوری 😀

الان با inspect element میتونید دقیقا مرزها رو ببینید و لذت ببرید!

حالا میریم سراغ sidebar و ۳۰ درصد بقیه رو هم میبخشیم به اون و شناورش هم میکنیم!:

.sidebar{

width:30%;

float:left;

}

اگه قبل از اینکه اینکار رو انجام میدادیم با inspect element میرفتیم روی ساید بار میدیدیم که کل صفحه رو مشخص میکنه یعنی فاجعه! اما الان درست جایی رو که باید،متعلق به sidebar است!

علت این هم که قبل از کلمه ی sidebar به جای # نقطه گذاشتیم اینه که اگه یادتون باشه در index ما به sidebar کلاس (class) دادیم نه ID ! اکی؟

حالا مونده footer که بندازیمش پایین صفحه! برای اینکار اولا باید ۱۰۰ درصد عرض داشته باشیم و اینکه کاری کنیم که در اطرافش هیچ چیزی قرار نگیره!

برای اینکار (یعنی دو طرف رو پاک کردن از هر گونه مزاحم) از clear استفاده میکنیم:

#footer{

clear: both;

width: 100%;

float: left;

}

حالا ذخیره میکنیم و میریم یک سایت شکیل تر و قابل تحمل تر میبینیم!

این یک نمای کلی از سایت ماست. خوشگل شد نه؟:D

شما هم میدونید که برای اینکه این رنگها رو به هر قسمت بدین باید از چه کدهایی استفاده کنید و background رو تغییر بدین، من سریع و به ترتیب این کدها رو میدم:

background:#c6c6c6; /* for header */

background:#828282; /* for content */

background:#a1a1a1; /* for sidebar */

background:#c6c6c6/* for footer */

البته اینها رو میدیم که دقیقا قسمتها مشخص بشن و تسلط بیشتری داشته باشیم، همین.

اگه دقت کنید میبینید که در قسمت content نوشته ها خیلی به مرز ها نزدیکند و یه کمی بده! برای اینکه در داخل یک تگ یک فاصله بدیم وکاری به بیرونش نداشته باشیم (یعنی دقیقا بر عکس margin که با خارج کار داره!) از padding استفاده میکنیم، به content میریم و زیر اون برای اینکه به div های زیر مجموعه ی contentارجاع بدیم کد زیر رو مینویسیم:

#content div{

padding:1%;

}

میدونین چی کار کردیم؟

بریم یک نگاهی به index بندازیم، میبینیم که در content 3 تا تگ div داریم یعنی posttitle و entry و همینطور postmetadata که ما به این سه اشاره کردیم!

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

برای sidebar هم از padding استفاده میکنیم تا یک کمی از بالا فاصله بگیره تا خوشگل تر شه!

.sidebar{

width:30%;

float:left;

background:#a1a1a1;

padding:10px 0 0 0 ;

}

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

چون ما الان داریم یک پوسته یا theme انگلیسی میسازیم باید از چپ قرار بدیمش

من دیگه واقعا خسته شدم!

بقیه باشه برای بعد!

بابای بای بای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۹(زیباسازی!)

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

لیست آموزشهای قالب وردپرس

style.css رو که یادتون هست؟!

فایلی که تا امروز مورد بی مهری ما قرار گرفت واصلا کاری بهش نداشتیم!

اما از امروز به بعد تقریبا همه ی کارهای ما روی این فایل خواهد بود.

این فایل که فرمتش css است وظیفه ی درست کردن ساختار سایت و شکل دادن به اون رو داره.

نیازی به اینکه شما چیزی از css بدونین نیست!

شما بعد از اتمام این سری آموزش تنها چیزی که ۱۰۰ درصد مطمئن هستم یاد خواهید گرفت همین css است.

خوب از امروز من با Dreamweaver به جای Notepad کار میکنم.

این دو برنامه اصلا قابل مقایسه نیستند! برای همین من چیزی در رابطه با تفاوت هاشون نمیگم چون تا صبح باید نوشت! فقط همین و بدونین Notepad سوسکه و Dreamweaver اباما!! یعنی تا این حد…!

خوب style.css رو باز میکنیم و شروع میکنیم به زیبا سازی!!

قبلش اینو بگم که این چیزهایی که اول فایل نوشتیم هیچ گونه ربطی به css ندارن، یعنی هر چیزی میشه بین */ و /* نوشت، داستان، شعر و یا مقاله و هر چی شما دوست دارین!

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

یک نکته ی ناراحت کننده هم در css اینه که معمولا مرورگرهای مختلف هر کدام یک ساز مینوازند!

البته بیشترشون با یک ساز کار میکنند و سبکشون فرق داره اما IE تو حال خودشه و هر غلطی میخواد میکنه، ابله!

اما چون بیشتر مردم یا نمیدونن راههای دیگری برای رفتن به سایتهای مختلف به جز از طریق IE هم هست و یا تنبلی میکنند یا هر چیز دیگه این مرورگر ابله پر استفاده ترین مرورگر است و بیشترین بازدیدکننده های شما از این کودن استفاده میکنن و شما مجبورید سایت رو برای اونها هم خوشگل کنید و این کار ممکنه به قیمت خراب شدن صفحه در مرورگرهای استاندارد تموم بشه!

خلاصه اینکه ما از دو browser برای چک کردن تغییرات سایت استفاده خواهیم کرد که از همه بیشتر طرفدار دارند(هر چند این جانب از یکی با دلیل و از اون یکی بی دلیل متنفرم!)

پس علاوه بر wamp برنامه های IE و FireFox رو باز میکنیم.

(اگه افزونه ی فایر باگ رو دانلود کردین که هیچ، اگه نکردین از google chrome استفاده کنید،البته فعلن مهم نیست!)

در style کدهای زیر رو بنویسید لطفا:

body{
margin:0 0 0 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000;

}

در css اولین چیزی که مینویسیم باید شناسه ای در صفحه ی مربوطه اش باشه!

یعنی body در اینجا اشاره دارد به تمام کدهایی که ما در بین تگ های <body> تا <body/> نوشتیم.

یعنی در واقع کل صفحه ای که کاربران میبینین و شامل همه چیز ماست!

} در جلوی اسم قرار میگیره و تا به { نرسه مربوط به همون body (البته در اینجا) است.

حالا توضیحات کدهایی که نوشتیم:

margin یعنی فاصله ای که مرزهای تگ ما از مرزهای تگ مادر خودش داره، در اینجا چون تگ ما body است خودش مادر بزرگه! و margin اون از اطراف صفحه ی مرورگر حساب میشه، یعنی مثلا اگه ما به جای ۰ از ۱۰۰px استفاده کنیم از اطراف ۱۰۰px فاصله میگیره،همین!

اما علت اینکه ۴ تا صفر داریم چیه!؟

اینه که هر کدوم مربوط به یکی از جهات تگ هستند! از چپ به راست به ترتیب : یالا، راست، پایین ، چپ. (یعنی در جهت عقربه های ساعت)

font-family هم دست خط یا همون font صفحه رو مشخص میکنه که چی باشه و علت اینکه از چند فونت استفاده شده این است که خواهم گفت:

مرورگرها (و در واقع سایت ها) فونت ها رو از کامپیوتر بیننده بارگذاری میکنن یعنی اینکه شما این فونتی که الان میبینید رو در کامپیوتر خودتون دارین (نصب شده)

و این تعداد فونت به این علت است که ممکنه مثلا یک کاربر فونت Arial رو توی کامپیوترش نداشته باشه(که بعیدتر از این نمیشه!)اگه اینطور بود فونت بعدی انتخاب میشه و همینطور به ترتیب.

font-size هم که سایز فونت رو تعیین میکنه یعنی بزرگیشو که میتونین تغییرش بدین!

vertical-align هم شرو وره! باعث میشه که مطمئن شیم نوشته ها از بالای صفحه (top) شروع بشن!

background رنگ پس زمینه ی صفحه ی سایت رو تعیین میکنه و ffffff# کد مربوط به رنگ سفید است که اگه DW داشته باشین با نوشتن # لیست رنگها را خواهید داشت.

color مربوط به نوشته هاست که رنگشون رو معین میکنه ۰۰۰۰۰۰# هم کد رنگ سیاه است!

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

یک توضیح در مورد کدهای رنگ که با # شروع میشن اینکه Hexadecimal Codes اسمیه که بهشون دادن

و با یک سرچ میتونین یک سایت خوب در این زمینه پیدا کنید،هرچند با برنامه های مختلفی مثل Photoshop و همین DreamWeaver میشه کد مربوط به هر رنگ رو پیدا کرد.

شاید جالب باشه براتون که بدونید ۲ عدد اول مربوط به رنگ قرمز، ۲ عدد وسط مربوط به سبز، و ۲ عدد آخر مربوط به رنگ آبی هستند. یعنی مثلا F00 که F در اون یعنی ۱۰ رنگ قرمز رو ۱۰ و آبی و سبز رو ۰ میره در نتیجه رنگ ما قرمز خواهد شد! و ۰ّF0 سبز خواهد بود و همچنین ۰۰F آبی.

البته لازم نیست اینهارو حفظ کنید، گفتم که یه چیزی گفته باشم!

خوب در مورد لینک ها هم یک صحبتی بکنم، اگه یادتون باشه برای اینکه لینکی درست کنیم باید نوشته ی مربوطه رو در تگ a قرار میدادیم، پس تگ مربوطه در css ما a است، اما ما میخواهیم لینکهامون رو مثلا کاری کنیم که زیرشون یک خط کشیده بشه مثل این نوشته!

خوب برای اینکار باید بعد از مشخص کردن تگ (یعنی a) اون رو به صورت زیر به لینکها مربوط کنیم:

a:link{

}

و بعد از کد text-decoration استفاده میکنیم و اون رو برابر با underline قرار میدیم:

a:link{
text-decoration:underline;
}

به همین راحتی ما تمام لینکهایی که در صفحه هستند رو با یک Underline یا خط زیرین مشخص کردیم.

ما میتونیم لینکهایی که کاربر روی اونها کلیک کرده هم به همین صورت در بیاریم، برای شناساندن این لینکها باید از a:visited استفاده کنیم، برای اینکه یک رفتار رو با دو یا چند تگ مختلف داشته باشیم از , استفاده میکنیم:

a:link, a:visited{
text-decoration:underline;
}

اینطوری هم لینکهایی که کاربر دیده و هم اونهایی که ندیده underline نمایش داده میشن، ما میتونیم لینکهامون رو به هر رنگی که دوست داریم نمایش بدیم(با استفاده از color ) و اگر اینکار رو نکنیم هر مرورگر بر اساس تنظیمات خودش لینکها رو مشخص میکند(که در مرورگرهای معروف این رنگ آبیست!)

حالا ما میتونیم یک کار دیگه هم انجام بدیم و اون اینه که وقتی موس کاربر روی لینک میره لینکمون چه قیافه ای پیدا کنه! میتونیم مثلا رنگ نوشته رو عوض کنیم یا مثلا فونت رو تغییر بدیم!!

البته معمولا یک خط زیرش میاد یا رنگش عوض میشه، لازم نیست شلوغ کاری کنیم:

a:hover{

text-decoration

}

hover برای زمانی استفاده میشه موس روی یک تگ مشخص (در اینجا a) قرار میگیره، من میتونم با استفاده از دادن blink به text-decoration لینک رو چشمک زن کنم یا با line-through یک خط وسط لینک بکشم و یا با overline یک خط بالاش بکشم و یا همون چیزی که داره (یعنی underline ) رو با استفاده از none بردارم!:

a:hover{

text-decoration:none;

}

من تا حالا کاری کردم که لینکهامون آبی بوده و underline داشته باشن و وقتی کاربر روی لینک میره اون خط زیرین برداشته بشه.(البته معمولا برعکس این اتفاق میافته :D)

حالا میتونیم رنگش هم مشخص کنیم، مثلا قرمز!:

a:hover{

text-decoration:none;

color:#F00;

}

این هم یک تصویر از انواع حالات لینکها

بس است دیگر

خسته شدم!

بای!