رفتن به مطلب

چگونه به کمک CSS3 ، لوگوی RSS Feed درست کنیم


poor!a

ارسال های توصیه شده

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

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

در این فرصت ، به شما نشان خواهم داد که چگونه یک لوگوی استاندارد برای RSS feed به کمک تنها CSS3 درست کنید . پس خیلی ساده از آموزش پیروی کنید تا خیلی ساده اولین آیکن CSS3 خود را طراحی کنید .

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

 

قدم ۱ :

یک فایل HTML درست کنید، اگر آن فایل کاملا خالی است کدهای زیر را درون آن قرار دهید .

 

 

My First CSS3 RSS Feed Logo

- Insert Your CSS Here -

- Insert Your HTML Here -

 

 

قدم ۲:

حالا کدهای زیرا را درون فایل HTML خود بگذارید تا آن را به صورت یک باکس فید درآورید .

HTML for Feed box

تغییرات را مشاهده می کنید ؟

span.feed-box{

display:block;

width:200px;

height:200px;

margin:0 auto;

background:#F9A004

box-shadow:

۱px 1px 0 #C27C03,

۲px 2px 0 #C27C03,

۳px 3px 0 #C27C03,

۴px 4px 0 #C27C03,

۵px 5px 0 #C27C03,

۶px 6px 0 #C27C03

-moz-box-shadow:

۱px 1px 0 #C27C03,

۲px 2px 0 #C27C03,

۳px 3px 0 #C27C03,

۴px 4px 0 #C27C03,

۵px 5px 0 #C27C03,

۶px 6px 0 #C27C03

-webkit-box-shadow:

۱px 1px 0 #C27C03,

۲px 2px 0 #C27C03,

۳px 3px 0 #C27C03,

۴px 4px 0 #C27C03,

۵px 5px 0 #C27C03,

۶px 6px 0 #C27C03

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

}

span.feed-box *{

float: right;

display: block;

}

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

قدم ۳:

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

 

کد HTMLبرای جعبه های کوچک :

 

C

CSS برای جعبه های کوچک :

span.feed-box .feed-box-in{

border: 4px solid #FFC563

width: 184px;

height: 184px;

margin: 4px 4px 0 0;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

/* overflow: hidden; */

}

این نتیجه کاری است که انجام دادیم .

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

قدم ۴ :

 

 

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

کد HTMLبرای دایره یک چهارم :

 

 

 

 

کدCSS برای دایره یک چهارم :

span.feed-box .feed-box-in .feed-quarter-circle-big{

margin: 16px 16px 0 0;

width: 260px;

height: 260px;

border: 30px solid #FFDEA5

-moz-border-radius: 260px;

-webkit-border-radius: 260px;

border-radius: 260px;

}

این نتیجه کاری است که انجام دادیم :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

قدم ۵ :

یک دایره کوچک یک چهارم کوچک می سازیم. کد اچ تی ام ال زیر را در دایره های بزرگی که کدHTML دارند قرار می دهیم.

کد HTMLبرای دایره کوچک یک چهارم :

کد

کد CSSبرای دایره کوچک یک چهارم :

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{

margin: 16px 16px 0 0;

width: 176px;

height: 176px;

border: 26px solid #FFDEA5

-moz-border-radius: 176px;

-webkit-border-radius: 176px;

border-radius: 176px

}

این نتیجه کاری است که انجام دادیم :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

قدم ۶:

در قدم ۶ کوچکترین دایره در مرکز دایره کوچک قرار می گیرد ، پس کد HTML آن را در کد دایره کوچک قرار دهید .

 

کد های HTML برای کوچکترین دایره :

 

کد CSS برای کوچکترین دایره :

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

اتمام کار :

کد /* overflow: hidden; */ را جستجو کنید و سپس آن را با کد overflow: hidden; جایگزین کنید و حالا شما به لوگوی مورد نظر خودتان رسیدید

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

جایزه : اضافه کردن افکت

شما که دوست ندارید لوگوی RSS فیدتان بدون افکت باشد ؟ به کمک استایل CSS زیر آن را فعال کنید .

 

افکتCSS

view plaincopy to clipboardprint?

span.feed-box:hover{

background:#07C103

box-shadow:

1px 1px 0 #058E02,

2px 2px 0 #058E02,

3px 3px 0 #058E02,

4px 4px 0 #058E02,

5px 5px 0 #058E02,

6px 6px 0 #058E02

-moz-box-shadow:

1px 1px 0 #058E02,

2px 2px 0 #058E02,

3px 3px 0 #058E02,

4px 4px 0 #058E02,

5px 5px 0 #058E02,

6px 6px 0 #058E02

-webkit-box-shadow:

1px 1px 0 #058E02,

2px 2px 0 #058E02,

3px 3px 0 #058E02,

4px 4px 0 #058E02,

5px 5px 0 #058E02,

6px 6px 0 #058E02

}

span.feed-box:hover .feed-box-in{

border-color: #58FC55

}

span.feed-box:hover .feed-box-in .feed-quarter-circle-big,

span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{

border-color: #B9FFB7

}

span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{

background: #B9FFB7

}

 

 

منبع :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

لینک به دیدگاه

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...