poor!a 15130 اشتراک گذاری ارسال شده در 27 دی، ۱۳۹۰ برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام 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 } منبع : برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام لینک به دیدگاه
ارسال های توصیه شده