آموزش ساخت جعبه دانلود فلت

دوستان یه متن قبلا نوشته بودم اما رزبلاگ یهو ارور داد و تمام نوشته ها پاک شد حالا یکم کمتر توضیح میدم و سوالات رو توی نظرات پاسخ میدم

خوب اول داخل فتوشاپ فایل لایه باز رو باز میکنیم

لینک دانلود

رمزشم:www.ghalebgraph.ir

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

خوب بک گراند رو سیو میکنیم 

نت پد رو باز میکنیم یه تگ </style><style>

مینویسیم

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

اون قسمتی که نوشته بک گراند برای تغین بک گراند هست که هم میشه کد رنگ داد هم به صورت بالا عکس گذاشت

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

خوب استایل float:right باعث میشه تگون بره سمت راست و margin باعث میشه از اطراف فاصله داشته باشه

خوب حالا بریم سراغ قسمت عنوان پست

توضیحات داخل عکس هست اونایی هم که ننوشتم تو

توضیحات قبلی بوده

حالا قسمت لینک ها و ...

خوب واسه ی لینک ها به صورت زیر استایل مینویسم

برای بقیه هم با ویرایش همین میشه استایل نوشت box-shadow  دو متغیر اول میتونی عدد منفی هم بدیم برای عوض شدن جای سایه داخل border-radius هم 4 متغیر هست که اولی برای گرد شدن بالا سمت چپه بعدی بالا سمت راست بعدی پایین سمت راست بعدی پایین سمت چپ

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

اینم استایل قسمت گذارش تخلف

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

دریافت کد

خوب برای اینکه استایل های بالا فعال باشن باید تگ مورد نظر دارای class="اسم استایل"(همون نوشته ای که جلوی نقطه توی تمام استایل ها هست)مثلا

class="gg-dl-box-alert"

خسته نباشید دیگه ببخشید بد توضیح دادم رزبلاگ اعصابمو خراب کرد قبلش یه توضیح کامل نوشته بودم که رزبلاگ ارور داد و خراب شد

اینم پیش نمایش برای دریافت کدش هم ctrl+U بزنید داخل پیش نمایش

سعی کنید کد هارو کمی ویرایش کنید به دلخواه خودتون سوالا تو نظرات جواب میدم