2013-02-21 7 views
18

मैं किसी भी काले छवि को बहुभुज आकार में बदलने का कोई तरीका ढूंढने की कोशिश कर रहा हूं।क्या क्षेत्र संपत्ति में उपयोग के लिए सीएसएस में किसी भी छवि से जटिल बहुभुज आकार बनाने का कोई तरीका है?

समस्या मैं हल करने के लिए कोशिश कर रहा हूँ दो चरण होते हैं:

  1. एक बहुभुज
  2. में तब्दील छवि पाठ

मैं पहला कदम के साथ संघर्ष कर रहा हूँ के साथ बहुभुज भरें । जैसा कि मुझे कोई भी "कनवर्टर" नहीं मिला है, मुझे एकमात्र विचार है जिसके साथ मुझे छोड़ा गया है, एक छवि को एक एसवीजी प्रारूप में परिवर्तित करना है (यदि यह पहले से ही एक एसवीजी नहीं है), तो वेक्टर डेटा प्राप्त करें और सीएसएस के अंदर इसे पेस्ट करें बहुभुज आकार (इसी तरह Raphaël.js के साथ किया जाता है)।

क्या यह एकमात्र दृष्टिकोण है?

प्रतिबंध:

  • मैं divs कि एक आकार अप कर देगा की टन बनाने के लिए नहीं करना चाहती।
  • मैं इस कार्य के लिए जावास्क्रिप्ट का उपयोग नहीं करना चाहता हूं।
  • यदि कोई आकार जटिल है तो यह एक बहुभुज होना चाहिए।

नीचे मुझे क्या करना (मैं केवल जटिल बहुभुज में दिलचस्पी रखता हूँ) क्या कोशिश कर रहा हूँ के उदाहरण हैं।

दृष्टिकोण का उपयोग करना चाहिए के प्रकार पर कोई सुझाव दिए गए?

छवियाँ एडोब लिया: this article में http://adobe.github.com/web-platform/samples/css-exclusions/

+0

दुर्भाग्य से यह अभी भी होने के लिए नहीं आया है। [यहां एक लेख है] (http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/) जो जल्द से जल्द क्षमताओं के बारे में अधिक जानकारी प्रदान करता है जो आप चाहते हैं सीएसएस क्षेत्रों का उपयोग –

+0

यह लगभग मेरे प्रश्न का उत्तर देता है: http://sarasoueidan.com/blog/css-regions-with-shapes-for-readability/index.html – acudars

उत्तर

4

आप बॉक्स मास्किंग के लिए एक छवि का उपयोग कर सकते हैं, विवरण और इस link (वेबकिट नमूना केवल)

<style type="text/css"> 
.wrap { 
    height:400px; 
    width:800px; 
    -webkit-mask-box-image:url('silhouette.png'); 
} 
</style> 
<div class="wrap">Large lipsum here...</div> 

में एक नमूना परिणाम:

enter image description here

** संपादित करें **

Moar नुकीला techs बंद !!

आकृतियाँ, क्षेत्र सक्षम करने के लिए, और मोड ब्लेंड:

  • कॉपी और पेस्ट

    आप दर्शाने वाली पंक्ति मिलेगा क्रोम या क्रोम कैनरी खंड में http://html.adobe.com/webplatform/enable/ जाने की जरूरत क्रोम: // झंडे/# सक्षम-प्रयोगात्मक-वेब-प्लेटफार्म-विशेषताएं पता बार में, फिर एंटर दबाएं।

  • उस अनुभाग के भीतर 'सक्षम करें' लिंक पर क्लिक करें।
  • ब्राउज़र विंडो के नीचे 'अभी लॉन्च करें' बटन पर क्लिक करें।

नोट: पुन: लॉन्च करने से पहले कई सुविधाएं सक्षम की जा सकती हैं।

यहां ड्रेगन बनें !!

यदि आप पर्याप्त बहादुर हैं, तो प्रयोगात्मक सुविधाओं को सक्रिय करें और आप छवियों से शक्तिशाली आकारों की सभी अव्यवस्था का सामना करेंगे! woow :)

यहाँ

आप एक नमूना कलम है कि केवल काम करेंगे जब आप प्रायोगिक सुविधाएं सक्रिय था =>http://codepen.io/anon/pen/yhIbE

यदि यह सब ठीक चला गया, तो आप एक बतख सिल्हूट और बाद में पैरा में शून्य पर देख सकते हैं , और यह सभी cutted नहीं है या काटा यह सभी पाठ लिपटे है;)

enter image description here

यह सब बहुत प्रयोगात्मक है, लेकिन किसी दिन आप क्योंकि हर पहलू में विस्तृत, सभी ब्राउज़रों में इस तरह के काम करने के लिए सक्षम हो जाएगा यह पोस्ट डब्ल्यू 3 सी ड्राफ्ट में है।

चीयर्स!

संपादित करें:

विषय के बारे में एक अच्छा लेख मिला: http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html

+0

जो टेक्स्ट को काटता है, इसलिए यह अस्वीकार्य है – acudars

+0

समाधान बहुत तेज है , क्या आपको वह अभी भी चाहिए? नवीनतम ब्राउज़रों पर कुछ प्रयोगात्मक सुविधाओं को सक्रिय करने के लिए आवश्यक है – markcial

संबंधित मुद्दे

 संबंधित मुद्दे