چگونه به کمک CSS3 ، لوگوی RSS Feed درست کنیم
RSS feed یکی از معمول ترین لوگوهایی است ، که نسبت به نحوه کارش ، طراحان وب آن را طرحی کرده اند. حتما تا به حال تعداد زیادی از طراحی هایی که به کمک نرم افزارهای دیگر مانند فوتوشاپ طراحی شده اند را دیده اید. ولی این بار ما می خواهم آن را به کمک فقط یک CSS3 طراحی کنیم .پس همراه ما تا انتهای این آموزش باشید .
در این فرصت ، به شما نشان خواهم داد که چگونه یک لوگوی استاندارد برای RSS feed به کمک تنها CSS3 درست کنید . پس خیلی ساده از آموزش پیروی کنید تا خیلی ساده اولین آیکن CSS3 خود را طراحی کنید .
در اینجا یک پیش نمایش از آنچه که شما باید در عرض یک دقیقه طراحی کنید مشاهده می کنید . همچنین شما می توانید فایلهای مورد نیاز این طراحی و حتی خود فایل نهایی را دانلود کنید .
قدم ۱ :
یک فایل HTML درست کنید، اگر آن فایل کاملا خالی است کدهای زیر را درون آن قرار دهید .
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>My First CSS3 RSS Feed Logo</title>
<style type=’text/css’>
- Insert Your CSS Here -
</style>
</head>
<body>
- Insert Your HTML Here -
</body>
</html>
قدم ۲:
حالا کدهای زیرا را درون فایل 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برای جعبه های کوچک :
<span class=’feed-box-in’>
</span><!– .feed-box-in –>
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برای دایره یک چهارم :
<span class=’feed-quarter-circle-big’>
</span><!– .feed-quarter-circle-big –>
کد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برای دایره کوچک یک چهارم :
<span class=’feed-quarter-circle-small’>
</span><!– .feed-quarter-circle-small –>
کد 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 برای کوچکترین دایره :
<span class=’feed-circle’> </span><!– .circle –>
کد 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;
}
امیدوارم این آموزش برای شما مفید واقع شود .
پاسخ با نقل قول
علاقه مندی ها (بوک مارک ها)