در اینجا در طراحی Shack ما می خواهم به ویژگی طیف کاملی از آموزش، از پروژه های پی اچ پی متخصص به راهنمایی CSS بسیار ساده است. آموزش امروز در کسانی که هنوز در مراحل مبتدی CSS هدف قرار گرفته است.
یکی از سوالات مکرر من از مبتدیان CSS دریافت کنید این است، "چگونه می توانم یک دکمه ایجاد کنم؟" این یک سوال ساده با یک پاسخ پیچیده است. کاملا چند راه برای رفتن در مورد آن وجود دارد و متاسفانه نیز کاملا چند راه برای رفتن به اشتباه وجود دارد. هنگامی که من برای اولین بار در CSS آغاز شده ، فهمیدن تمام نحو دکمه یکی از مشکلات مداوم ترین من مواجه شد ، به نظر می رسید مانند من همیشه انجام آن اشتباه است. امروز ما در حال رفتن به راه رفتن را از طریق یک فرایند بسیار ساده و انعطاف پذیر است که شما می توانید به هر دکمه شما ایجاد اعمال می شود. مهم تر از نتیجه نهایی توضیح عمیق در هر نقطه اشاره است که چرا ما این کار را به این ترتیب انجام می دهیم.
مرحله ۱: اچ تی ام ال
باور کنید یا نه، این یکی از حیله و تزویرترین بخش ها است. برای یک کدکن با تجربه، خیلی ساده به نظر می رسد. به مبتدی هر چند، دانستن جایی که برای شروع با یک دکمه می تواند کاملا دشوار است. آیا باید از تگ HTML "دکمه" استفاده کنید؟ يا شايد يه تگ پاراگراف؟ لینک باید به کدام قسمت ها بپیچد؟
معلوم می شود که ساده ترین و پر استفاده ترین نحو فقط برای پیاده سازی یک تگ لنگر قدیمی ساده است (دکمه های فرم اغلب از "ورودی" استفاده می کنند). از نقطه نظر کاربردی، همه ما واقعا در تلاش برای ایجاد یک لینک است که، هنگامی که کلیک شده است، ما را به جایی جدید، که دقیقا همان چیزی است که یک لینک HTML اساسی انجام می دهد. اغلب در طراحی وب سایت، انتخاب برای تبدیل چیزی به یک دکمه صرفاً یک دکمه زیبایی شناختی است و لزوماً هیچ قابلیت خاصی را نشان نمی دهد.
در اینجا یک اسنیپت به طور گسترده ای استفاده می شود از HTML است که می شود کار کاملا انجام می شود در حالی که ماندن خوب و مختصر:
1 |
اگر به دیو نیاز داري، از يکي استفاده نکن
یک مشکل است که من استفاده می شود در سراسر آمده زمانی که من برای اولین بار شروع به کدنویسی این است که من اغلب فکر می کنم که من نیاز به یک غواص برای ایجاد هر چیزی. با استفاده از این منطق ناقص، من لنگر من در دیو پیچیدن و سپس اعمال بسیاری از سبک به غواص.
این کاملا غیر ضروری است هر چند و می تواند مشکلات با هر دو کلیک کنید و شناور ایجاد کنید. در مثال بالا، کل عنصر ما پیوند خواهد بود. اگر ما این را در یک div پیچیده و مدل دهید که، تنها بخش متن دکمه یک لینک خواهد بود، به این معنی که کاربر می تواند به طور قابل تصوری دکمه را بدون نتیجه کلیک کنید.
چرا از کلاس استفاده ميکني؟
شاید مهم ترین چیزی که باید در مورد این تک تیرانداز کد متوجه شد این باشد که ما یک کلاس اضافه کرده ایم، که من به طور عمومی برچسب "دکمه" را زده ام. چند دلیل برای این کار وجود دارد.
اول از همه، ما نیاز به یک راه برای هدف قرار دادن و سبک این دکمه در CSS ما بدون لزوما هدف قرار دادن تمام برچسب لنگر در صفحه. این تقریبا هرگز مورد است که شما می خواهید هر لینک تنها به یک دکمه یکسان است. با این حال ، آن را امکان پذیر است و کاملا محتمل است که شما در واقع می خواهید به استفاده مجدد از سبک دکمه در برخی از نقطه. به همین دلیل یک کلاس را به جای شناسه اعمال می کنیم. به این ترتیب، هر زمان که ما می خواهیم برای تبدیل یک لینک متن ساده به یک دکمه خوب، ما به سادگی اعمال "دکمه" کلاس ما و ما انجام می شود!
مرحله 1 پیش نمایش
در این مرحله شما فقط باید یک لینک متن ساده با یک حالت پیش فرض داشته باشد.
مرحله 2: سبک دکمه پایه
حالا که ما HTML ما همه آماده برای رفتن، آن زمان برای پرش به CSS است. به یاد داشته باشید که ما راه اندازی یک کلاس "دکمه" برای هدف بیان CSS هدف گیری بنابراین مطمئن شوید که آن را برای این مرحله استفاده کنید:
1 | .button {
/* Code Here */
}
|
اولین چیزی که ما می خواهیم در CSS ما انجام دهید این است که تعریف جعبه اساسی است که شکل دکمه ما را تشکیل می دهند. در اینجا سبک هایی که من استفاده کردم. توجه داشته باشید که انتخاب رنگ و ابعاد من کاملا اختیاری هستند، احساس رایگان برای استفاده از هر آنچه شما می خواهم.
1 2 3 4 5 6 7 | .button {
نم
ایش:
ب
لوک
;
ارت
فاع:
1
00px
;
عر
ض:
30
0px
;
ساب
قه و هدف:
#
34696f
;
مرز
: 2px
جام
د
rgb
a
(33,
68
,
7
2,
0
.59
);
}
|
مهم ترین کاری که من در اینجا انجام دادم این بود که "نمایش" را برای "بلوک" تنظیم کنم. این به ما این امکان را خواهد داد که لینک متن خود را به یک جعبه بزرگتر با عرض و ارتفاع تعریف شده تبدیل کنیم. پس از آن من به سادگی تنظیم اندازه و رنگ پس زمینه من ، سپس اضافه شده مرز. من با استفاده از "rgba" کاملا کمی، اگر شما می خواهید به این کمی دوستانه تر به مرورگرهای قدیمی تر، بررسی outthis مقاله در اعلام fallbacks rgba.
مرحله 2 پیش نمایش
پس از مرحله دو شما باید یک جعبه نسبتا خسته کننده به دنبال با برخی از غیر ممکن است به خواندن متن در داخل داشته باشد.
مرحله 3: سبک های متن
بعدش، وقتشه که به اون متن زشت حمله کنيم. برای اطمینان از اینکه شما می توانید نگه دارید تا با هر مرحله، من به سادگی نگه داشتن اضافه کردن به آنچه که ما قبلا با نظرات ساخته شده برای کمک به شما هر مرحله را ببینید:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | .button {
/*S
tep 2: Basic Button Styles*/
نم
ایش:
ب
لوک
;
ارت
فاع:
1
00px
;
عر
ض:
30
0px
;
ساب
قه و هدف:
#
34696f
;
مرز
: 2px
جام
د
rgb
a
(33,
68
,
7
2,
0
.59
);
/*م
رحله 3: سبک های متنی*/
رنگ
: rg
ba(0,
0,
0
,
0
.55
);
متن
- تراز
:
مرکز
؛
fon
t: b
ol
d 3.
2
em/10
0px "
H
elvetica Neue",
A
rial,
H
elvetica,
Geneva,
sans-serif
;
}
/*Step 3: Link Styling*/
a.button {
متن
دکوراسیون :
هیچ
؛
}
|
در اینجا می بینیم که من در یک رنگ متن اضافه شده است که در اصل سایه تیره تر از رنگ دکمه. این ترفند با تنظیم رنگ متن به سیاه و سفید و کاهش opacity از طریق rgba انجام شده است. بعد، من مرکز تراز متن و اعلام یک دسته از مسائل با استفاده از کوتاه دستی فونت.
فونت کوتاه دستی
CSS shorthand یک راه شسته و رفته برای اعلام یک دسته از خواص CSS و سبک در یک خط است. اول ، من اعلام وزن (پررنگ) ، سپس فونت اندازه / خط ارتفاع و در نهایت فونت خانواده. توجه کنید که ارتفاع خط دقیقا به ارتفاع دکمه تنظیم شده است. این یک راه ساده برای اطمینان از متن خود را به صورت عمودی محور است.
برای کسب اطلاعات بیشتر در مورد CSS Shorthand، اتمام 6 CSS ترفندهای Shorthand هر توسعه دهنده باید بدانید.
مرحله 3 پیش نمایش
پس از مرحله سه دکمه خود را در واقع باید شروع به مانند یک دکمه نگاه!
مرحله 4: سبک CSS3 فانتزی
گام قبلی ما را به یک دکمه خوب و عملکرد می رساند که نیمه بد به نظر نمی رسد. متاسفانه کاملا خسته کننده است. بخش مهم هر چند این است که این دکمه باید کامل در اکثر مرورگرها نگاه, بنابراین ما در حال حاضر می تواند اقدام به اضافه کردن برخی از خوبی CSS جدیدتر بدون نگرانی بیش از حد در مورد ترک مرورگرهای قدیمی تر پشت سر. در نهایت ، من واقعا مهم نیست اگر IE تصمیم به خندق این سبک های بعدی به دلیل دکمه من باید فقط خوب برای آن دسته از کاربران در حالت فعلی آن کار می کنند.
ما به راحتی می تواند دور انجام و نوشتن پنجاه خط CSS را به دکمه ما درخشان و زیبا، اما من آن را واقعا ساده برای اهداف امروز نگه دارید:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .button {
/*S
tep 2: Basic Button Styles*/
نم
ایش:
ب
لوک
;
ارت
فاع:
1
00px
;
عر
ض:
30
0px
;
ساب
قه و هدف:
#
34696f
;
مرز
: 2px
جام
د
rgb
a
(33,
68
,
7
2,
0
.59
);
/*م
رحله 3: سبک های متنی*/
رنگ
: rg
ba(0,
0,
0
,
0
.55
);
متن
- تراز
:
مرکز
؛
fon
t: b
ol
d 3.
2
em/10
0px "
H
elvetica Neue",
A
rial,
H
elvetica,
Geneva,
sans-serif
;
/*S
tep 4: Fancy CSS3 Styles*/
bac
kground:
linear-gradient(t
op,
#
34696f
,
#2f5f63
);
مر
ز شعاع: 5
0px
;
جعب
ه سایه: 0
8
p
x
0
#
1b383b
;
tex
t-shadow:
0
2
p
x 2
p
x r
gba(2
55,
2
55
,
255
,
0.2
);
}
/*Step 3: Link Styling*/
a.button {
متن
دکوراسیون :
هیچ
؛
}
|
هر کدام از این ها می توانند برای خواندن حیله و تزویر باشد بنابراین بیایید یکی یکی از آنها عبور کنیم. اول ، من اضافه شده گرادیان است که با استفاده از رنگ ما در حال حاضر در محل و محو شدن به چیزی کوچک توسط تیره تر است. من در رنگ پس زمینه قبلی من بالاتر از آن بخش را ترک کرد به عنوان یک fallback عمل می کنند.
بعدي شعاع مرزيه . من تصمیم گرفتم برای رفتن با یک گوشه گرد واقعا سنگین است که دکمه شکل قرص. از آنجا که من می خواهم تمام گوشه های من به همان، من به سادگی اعلام یک ارزش و آن را به طور یکنواخت اعمال می شود.
بالاخره چند تا سايه انداختم . هم جعبه و هم سایه متنی که من استفاده کردم کمی عجیب و غریب هستند. برای سایه جعبه، a به آن افست عمودی داد اما هیچ افقی نداشت و همچنین پر را در ۰ ترک کرد. این اثر خوب کمی faux 3D است که کار بیش از حد و یا کد نیاز ندارد. برای سایه متن، من نیز اعمال افست عمودی و تنظیم رنگ به سفید در 20٪ opacity. این یک راه فوق العاده آسان برای ایجاد یک اثر letterpressed و متن به نظر می رسد اگر آن را به دکمه غرق است.
استفاده از Prefixr برای پیش فیکسی مرورگر
توجه کنید که کد بالا اصلاً سازگار با مرورگر متقابل نیست. در مراحل اولیه آزمایش، من نفرت mucking تا کد من با نیم دوجین پیش فرض مرورگر و اغلب فراموش کرده ام که آیا یا نه یک مرورگر داده شده است نحو منحصر به فرد است.
هنگامی که من چیزهایی به دنبال راه من می خواهم در اسپرسو (IDE من از انتخاب) با استفاده از نحو اساسی، من می توانم پرتاب تمام آن کد را به یک ابزار کمی رایگان به نام Prefixr، که آن را پردازش و تف کردن کد من با تمام نسخه های مرورگر درست در دسترس خاص به طور خودکار اضافه شده است.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .button {
/*S
tep 2: Basic Button Styles*/
نم
ایش:
ب
لوک
;
ارت
فاع:
1
00px
;
عر
ض:
30
0px
;
ساب
قه و هدف:
#
34696f
;
مرز
: 2px
جام
د
rgb
a
(33,
68
,
7
2,
0
.59
);
/*م
رحله 3: سبک های متنی*/
رنگ
: rg
ba(0,
0,
0
,
0
.55
);
متن
- تراز
:
مرکز
؛
fon
t: b
ol
d 3.
2
em/10
0px "
H
elvetica Neue",
A
rial,
H
elvetica,
Geneva,
sans-serif
;
/*S
tep 4: Fancy CSS3 Styles*/
bac
kground: -
webkit-linear-gradient(t
op,
#
34696f
,
#2f5f63
);
bac
kground: -
moz-linear-gradient(t
op,
#
34696f
,
#2f5f63
);
bac
kground: -
o-linear-gradient(t
op,
#
34696f
,
#2f5f63
);
bac
kground: -
ms-linear-gradient(t
op,
#
34696f
,
#2f5f63
);
bac
kground:
linear-gradient(t
op,
#
34696f
,
#2f5f63
);
-we
bkit-border-radius:
50px
;
-kh
tml-border-radius:
50px
;
-mo
z-border-radius:
50px
;
مر
ز شعاع: 5
0px
;
-we
bkit-box-shadow: 0
8
px
0
#1b383b
;
-mo
z-box-shadow: 0
8
px
0
#1b383b
;
جعب
ه سایه: 0
8
p
x
0
#
1b383b
;
tex
t-shadow:
0
2
p
x 2
p
x r
gba(2
55,
2
55
,
255
,
0.2
);
}
/*Step 3: Link Styling*/
a.button {
متن
دکوراسیون :
هیچ
؛
}
|
مرحله 4 پیش نمایش
پس از مرحله چهارم، دکمه شما باید بسیار تیزتر از قبل به نظر می رسد. تقريبا تموم شد!
مرحله 5: سبک شناور
گام نهایی در فرایند دکمه ما این است که تعریف رفتار شناور. هنگامی که کاربر شناور بیش از دکمه, آن را همیشه خوب برای دریافت بازخورد بصری کمی است که بیش از تغییر نشاندهنده پیش فرض. یک بار دیگر، ما می توانیم همه با این بیرون بروید اما من آن را ساده نگه دارید و فقط روشن کردن گرادیان کمی:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | .button {
/*S
tep 2: Basic Button Styles*/
نم
ایش:
ب
لوک
;
ارت
فاع:
1
00px
;
عر
ض:
30
0px
;
ساب
قه و هدف:
#
34696f
;
مرز
: 2px
جام
د
rgb
a
(33,
68
,
7
2,
0
.59
);
/*م
رحله 3: سبک های متنی*/
رنگ
: rg
ba(0,
0,
0
,
0
.55
);
متن
- تراز
:
مرکز
؛
fon
t: b
ol
d 3.
2
em/10
0px "
H
elvetica Neue",
A
rial,
H
elvetica,
Geneva,
sans-serif
;
/*S
tep 4: Fancy CSS3 Styles*/
bac
kground: -
webkit-linear-gradient(t
op,
#
34696f
,
#2f5f63
);
bac
kground: -
moz-linear-gradient(t
op,
#
34696f
,
#2f5f63
);
bac
kground: -
o-linear-gradient(t
op,
#
34696f
,
#2f5f63
);
bac
kground: -
ms-linear-gradient(t
op,
#
34696f
,
#2f5f63
);
bac
kground:
linear-gradient(t
op,
#
34696f
,
#2f5f63
);
-we
bkit-border-radius:
50px
;
-kh
tml-border-radius:
50px
;
-mo
z-border-radius:
50px
;
مر
ز شعاع: 5
0px
;
-we
bkit-box-shadow: 0
8
px
0
#1b383b
;
-mo
z-box-shadow: 0
8
px
0
#1b383b
;
جعب
ه سایه: 0
8
p
x
0
#
1b383b
;
tex
t-shadow:
0
2
p
x 2
p
x r
gba(2
55,
2
55
,
255
,
0.2
);
}
/*مرحله 3: لینک استایلز*/
a.button
2
{
متن
دکوراسیون :
هیچ
؛
}
/*Step 5: Hover Styles*/
a.button:hover {
ساب
قه و هدف:
#
3d7a80
;
bac
kground: -
webkit-linear-gradient(t
op,
#
3d7a80
,
#2f5f63
);
bac
kground: -
moz-linear-gradient(t
op,
#
3d7a80
,
#2f5f63
);
bac
kground: -
o-linear-gradient(t
op,
#
3d7a80
,
#2f5f63
);
bac
kground: -
ms-linear-gradient(t
op,
#
3d7a80
,
#2f5f63
);
bac
kground:
linear-gradient(t
op,
#
3d7a80
,
#2f5f63
);
}
|
در حال حاضر هنگامی که شما بیش از دکمه شناور, رنگ / روشنایی آن تغییر خواهد کرد. این یک اثر ظریف است اما قطعا به اندازه کافی قوی برای هر کاربر متوجه, حتی اگر آنها کور رنگی.
تمام!
بعد از قدم پنج، همه تون تموم شد! شما هم اکنون باید یک دکمه زیبا ایجاد شده به طور کامل با CSS و HTML داشته باشد. مهمتر از هر چند، شما باید احساس قوی برای گردش کار اساسی به دنبال به پیشه وری یک دکمه با استفاده از CSS داشته باشد.
نسخه ی نمایشی: برای دیدن دکمه در عمل، اینجا یا تصویر بالا را کلیک کنید.
jsFiddle : به نقب زدن با کد ، اینجا را کلیک کنید.
نتیجه
ما امروز چیزهای بسیار مهمی یاد گرفتیم. ابتدا دیدیم که می توانیم از یک تگ لنگر HTML پایه به عنوان نقطه شروع برای دکمه خود استفاده کنیم و خوب است که دکمه هایی با کلاس های قابل استفاده مجدد سبک کنیم. ما همچنین یاد گرفتم که چگونه برای شروع با طراحی یک دکمه اساسی است که به خوبی در سراسر تمام مرورگرها کار خواهد کرد و به بازی یا خط در استعداد اضافه شده بعد به جای basing کل ساختار دکمه بر روی تکنیک هایی که به طور گسترده ای در دسترس نخواهد بود. در نهایت ، ما دیدیم که چگونه برای نگه داشتن همه چیز ساده با کدنویسی با خواص CSS3 اساسی تا زمانی که ما همه چیز را درست است ، و سپس پیگیری که با سفر به Prefixr ، که گسترش کد ما را به چیزی به عنوان متقابل مرورگر سازگار که ممکن است.
نظر زیر را بگذارید و به ما اطلاع دهید که چه فکر می کنید. اگر مبتدی بودید، آیا این کار برای شما مفید بود؟ اگر شما یک حرفه ای چاشنی، چه می خواهید متفاوت انجام دهید؟