45 डिग्री के कोण + बॉक्स छाया - लेकिन सीएसएस

Question

मैं निम्नलिखित डिजाइन से बनाना होगा केवल CSS का उपयोग कर कुछ भी नहीं का उपयोग करना:

क्या आप चित्र में देख रहे हैं एक वेबसाइट कंटेनर के शीर्ष है - "लिंक" मुख्य मेनू का हिस्सा हैं।

जैसा कि यह खड़ा है, मैंने कंटेनर बनाया है लेकिन मुझे यकीन नहीं है कि छवि का उपयोग किए बिना नेविगेशन पर स्लंट बनाने के बारे में कैसे जाना है।

रिकॉर्ड के लिए: मैं एक छवि का उपयोग नहीं करना चाहूंगा क्योंकि ब्राउजर द्वारा प्रदान की गई बॉक्स छाया के साथ स्लेंट मिलान पर बॉक्स छाया की संभावनाएं कम-से-कम हैं, खासकर जब यह एकाधिक ब्राउज़रों की बात आती है।

मैं एक सफेद पृष्ठभूमि और एक बॉक्स छाया के साथ एक स्थित और घुमावदार div की रेखाओं के साथ सोच रहा था, लेकिन मैं इसे अभी तक बनाने में सक्षम नहीं हूं।

कोई विचार?

Answer 1

कुछ ऐसा कहा जाता है जिसे Sandpaper कहा जाता है जो आपको IE में भी अपने तत्वों को बदलने में मदद कर सकता है!

.myDiv { 
    -sand-transform: rotate(45deg); 
} 

आप इसे अपनी साइट में प्लग कर सकते हैं और आप सेट हैं।

इसके अलावा आप अपने प्रश्न में पूछे गए CSS3 ट्रांसफॉर्म का उपयोग कर सकते हैं: "सीएसएस के अलावा कुछ भी नहीं।"

ऐसा करने के लिए आप उपयोग करेंगे:

.myDiv { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/ 
} 

और जोश और रॉबर्ट के लिए धन्यवाद ओपेरा समकक्ष के लिए:

-o-transform: rotate(45deg); 

इंटरनेट एक्सप्लोरर एक फ़िल्टर लागू किया है कि किसी भी पाठ पर ClearType छोड़ देंगे इसके लिए लेकिन आप मुख्य के अंदर खाली अतिरिक्त तत्व जोड़ सकते हैं और इस अतिरिक्त तत्व पर फ़िल्टर लागू कर सकते हैं। इस ClearType बर्बाद नहीं किया जाएगा और एक ही परिणाम हासिल किया जा सकता है।

Answer 2

रोटेशन के लिए, आप देख रहे हैं:

-moz-transform:rotate(45deg); 
-webkit-transform:rotate(45deg); 

ध्यान रखें, कि रोटेशन एक CSS3 विशेषता है, तो आप सभी ब्राउज़र में समान व्यवहार प्राप्त करने के लिए नहीं जा रहे हैं। एक छवि के साथ सिर्फ slant बनाने की बजाय, यह पूरी रूपरेखा को फिर से बनाने के लिए बेहतर होगा। मैं इसके साथ संपर्क करूंगा:

1. हेडर सेक्शन, जिसमें स्लंट, छाया, मेनू पृष्ठभूमि और सामग्री के शीर्ष पर पैडिंग होगी, वहां आपके स्क्रीनशॉट की तरह काफी कुछ होगा।
2. एक ऐसी छवि जो छाया के साथ सामग्री के पूरे शरीर को दोहरा सकती है।
3. पाद लेख अनुभाग।

आप CSS3 विशेषताओं को फिर से बनाने के प्रयास के लिए बाहरी पुस्तकालयों का भी उपयोग कर सकते हैं, लेकिन छवियां सबसे आसान तरीका हो सकती हैं क्योंकि आप जानते हैं कि वे कैसे प्रस्तुत करेंगे।

Answer 3

मुझे लगता है कि आप से http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

यह वास्तव में एक अच्छा संकलन और सीएसएस का उपयोग कर के लिए प्रेरणा है तकनीक का उपयोग कर सकते हैं। का आनंद लें।

पीएस: यह CSS3 रूपांतरणों से सुरक्षित है।

Answer 4

रोटेशन अनावश्यक लगता है। मैं एक सीएसएस त्रिभुज प्रभाव का उपयोग करने की कोशिश करेंगे।

मुझे लगता है कि आपके लिंक ul में हैं, इसलिए आपका सीएसएस ul:before का चयन कर सकता है और इसे सही आकार में बना सकता है।

मुझे नहीं पता कि box-shadow के साथ क्या होगा, लेकिन यह एक शॉट के लायक हो सकता है, और जावास्क्रिप्ट का उपयोग किए बिना आईई में संरेखित करना आसान होगा।