छवि के परिपत्र क्रॉपिंग के लिए सीएसएस/जेएस

Question

मेरे डिजाइनर ने मुझे एक नज़र दिया कि मुझे दोहराने में सक्षम होना अच्छा लगेगा, लेकिन मुझे यह सुनिश्चित नहीं है कि ऐसा कैसे किया जाए।

• पहले भाग अवतार के परिपत्र फसल है
• दूसरे भाग स्पीच बबल

मैं बैकएंड में पहले भाग कर के लिए खुला रहा हूँ है (यह एक वर्ग अपलोड है) , लेकिन एक सीएसएस/जेएस समाधान होना पसंद करेंगे।

Answer 1

स्पीच बबल भाग के लिए मैं इस ट्यूटोरियल सुझाव देते हैं। http://nicolasgallagher.com/pure-css-speech-bubbles/ मैं इसे अक्सर विचारों के लिए उपयोग करता हूं और सीखता हूं कि इसे स्वयं कैसे करें। मैं आपको एक ट्यूटोरियल देता हूं क्योंकि मैं चाहता हूं कि आप इसे सीखें। अगर आपने मुझे कोड दिया है जिसके लिए कुछ मदद की ज़रूरत है, तो मैं आपको इसे ठीक करने के तरीके पर एक उत्तर दूंगा। क्या आपके पास अभी तक कोई कोड है?

इसके अलावा फसल के लिए, मुझे लगता है कि ऐसा करने का एक त्वरित तरीका आपकी छवि के चारों ओर एक स्क्वायर रैपर div बना देता है, फिर इसे एक सीमा-त्रिज्या (सीएसएस) दें जो पक्षों में से एक की लंबाई का आधा है। छिपाने के लिए अतिप्रवाह सेट करें और आप सेट हैं।

चीयर्स!

Answer 2

सर्कुलर छवि के लिए आप सीएसएस की सीमा-त्रिज्या का उपयोग कर सकते हैं: बस इसे काफी बड़ा बनाएं ताकि गोलाकार कोनों को स्पर्श किया जा सके।

.profile-img { 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
} 

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

http://css-tricks.com/snippets/css/css-triangle/