सभी को नमस्कार!
: पहले
मन की जिज्ञासा (और न केवल) हमें एक दिशा या दूसरे में नए और बेहतर समाधान की तलाश करती है। यह मुझे एक निश्चित
@simurai के ब्लॉग पृष्ठ पर
ले गया । शायद कोई पहले से ही कॉमरेड
समुराई की उपलब्धियों से परिचित है, बाकी मैं सिर्फ एक
छद्म जापानी गुरु से दिलचस्प विचार साझा करना चाहता हूं। इस लेख में मैं उनकी एक परियोजना पर विचार करना चाहता हूं:
बोनबॉन - स्वीट CSS3 बटन (पाठकों के अनुरोध पर, लेखक के अन्य कार्यों को बाद के लेखों में ध्यान में लाया जाएगा)। प्रारंभिक लक्ष्य: सीएसएस बटन बनाना जो अच्छे लगते हैं, उनमें लचीली सेटिंग्स हैं, और एक ही समय में सबसे सरल लेआउट होगा।
अंकन:
लेखक ने "बहु-पत्र" के बिना, उपयोग में अधिकतम आसानी से विचार करने की कोशिश की; अंतिम कार्यान्वयन का प्राथमिक उदाहरण (
डेमो ):
<a href="#" class="button">Label</a>
आप बटन में कुछ वर्गों को जोड़कर भी उपस्थिति बदल सकते हैं, उदाहरण के लिए: नारंगी रंग और चमकदार चमक (
डेमो ):
<a href="#" class="button orange glossy">Label</a>
माउस:
यदि आप वेब तत्व को अधिक साहचर्य बनाने के लिए एक आइकन जोड़ना चाहते हैं, तो आप इस तरह से HTML5 विशेषता का उपयोग कर सकते हैं: डेटा-आइकन = "" "। यह आपको
यूनिकोड वर्ण ,
आइकन फ़ॉन्ट और कई अन्य का उपयोग करने की अनुमति देता है।
.button:before { content: attr(data-icon); }
यह सीएसएस कोड बटन सामग्री के सामने एक आइकन जोड़ता है, जो आपको सीएसएस शैलियों को संपादित किए बिना सिमेंटिक मार्कअप को बचाने और आइकन बदलने की अनुमति देता है (
डेमो ):
<a href="" class="button orange glossy" data-icon=""> Label</ a>
उपलब्धता:
यदि हम अपने बटनों में भूमिका = "बटन" विशेषता जोड़ते हैं और टैबइंडेक्स का उपयोग करते हैं, तो हम उन्हें सक्रिय कर सकते हैं और एक-एक करके उनका चयन कर सकते हैं। या, यदि आप एक टैग का उपयोग करते हैं
, "disabled" (Demo).
:
- , - « » PNG- - . - CSS3: text-shadows , box-shadows , gradients borders . , , , : morphing (Demo).
Border-radius – , , , "/"
border-radius: 5em / 2em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; , "disabled" (Demo).
:
- , - « » PNG- - . - CSS3: text-shadows , box-shadows , gradients borders . , , , : morphing (Demo).
Border-radius – , , , "/"
border-radius: 5em / 2em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; , "disabled" (Demo).
:
- , - « » PNG- - . - CSS3: text-shadows , box-shadows , gradients borders . , , , : morphing (Demo).
Border-radius – , , , "/"
border-radius: 5em / 2em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
, "disabled" (Demo).
:
- , - « » PNG- - . - CSS3: text-shadows , box-shadows , gradients borders . , , , : morphing (Demo).
Border-radius – , , , "/"
border-radius: 5em / 2em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
मैंने विभिन्न सामग्रियों की नकल करने की कोशिश की: "
मैट ", "
ग्लॉसी " और "
ग्लास "। आप स्वयं परिणामों का मूल्यांकन कर सकते हैं (
डेमो ):
एक चमकदार आकार का उपयोग करके बनाया गया है
: शीर्ष पर एक पृष्ठभूमि ढाल के साथ चयनकर्ता के
बादफ़ोकस के लिए, आप HTML5 विशेषता
संतोषी = "सत्य" का उपयोग करने का प्रयास कर सकते हैं, जिसके परिणामस्वरूप एक मज़ेदार संपादन योग्य बटन (
डेमो ):
लचीलापन:
ऊपर वर्णित सभी प्रयोगों को इस तरह के "मैनुअल" सूची के रूप में दर्शाया जा सकता है (यहां सभी अतिरिक्त वर्ग नाम हैं जो आप फायरबग या अन्य उपकरणों का उपयोग करके अपने आप से खेल सकते हैं):
- रंग: नारंगी , गुलाबी , नीला , हरा , पारदर्शी
- फ़ॉन्ट: सेरिफ़
- सामग्री: चमकदार , कांच
- आकार: एक्सएस , एक्सएल
- आकार: गोल , अंडाकार , कोष्ठक , तिरछा , पीठ , चाकू , ढाल , ड्रॉप , मॉर्फ
- केवल आइकन : आइकन
- विकलांग: विकलांग
: के बाद
यह सामग्री केवल एक डेमो संस्करण है, जो कार्य परियोजनाओं पर उपयोग के लिए अभिप्रेत नहीं है। सभी ब्राउज़र इस समाधान का समर्थन नहीं करते हैं। विकास का उद्देश्य नई CSS3 / HTML5 सुविधाओं में से कुछ का उपयोग करने के लिए कुछ तरीकों को दिखाना था
(c) सिमुराईडेमो :
lab.simurai.com/buttons/स्रोत :
github.com/simuraiनतीजतन, मैं सिद्धांत में अवधारणा पर चर्चा करने का प्रस्ताव करता हूं: सुधार के लिए सुझाव, कमियों पर टिप्पणी, रचनात्मक आलोचना ("लेकिन क्या बूटस्ट्रैप नहीं किया ...")।
इसके अलावा, कृपया वोट करें ... धन्यवाद।