सीमा

के साथ शुद्ध सीएसएस स्पीच बबल तो मैं एक शुद्ध सीएसएस भाषण बबल http://bit.ly/zlnngM पर काम कर रहा हूं, लेकिन मैं http://bit.ly/zUgeZi पर देखे गए पूरे भाषण बबल को घेरना चाहता हूं। मैं निम्नलिखित मार्कअप का उपयोग कर रहा हूँ;सीमा

<div class="speech-bubble"><p>This is a speech bubble created using only CSS. No images to be found here...</p></div

और मैंने अब तक इसे निम्न प्रकार से स्टाइल किया है;

.speech-bubble { 
margin: 3em; 
width: 320px; 
padding: 10px; 
background-color:rgba(250, 250, 250, 0.95); 
color: #666; 
font: normal 12px "Segoe UI", Arial, Sans-serif; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
border: 10px solid rgba(0,0,0,0.095); 
} 

.speech-bubble:before 
{ 
content: ""; 
border: solid 20px transparent; /* set all borders to 10 pixels width */ 
border-top: 0; /* we do not need the top border in this case */ 
border-bottom-color:rgba(250, 250, 250, 0.95); 
width: 0; 
height: 0; 
overflow: hidden; 
display: block; 
position: relative; 
top: -30px; /* border-width of the :after element + padding of the root element */ 
margin: auto; 
} 

.speech-bubble p { 
margin-top: -15px; 
font-size: 1.25em; 
}

आप देख सकते हैं मैं केवल सामग्री बॉक्स (.speech-बुलबुला) नहीं बल्कि कॉल आउट करने के लिए एक सीमा जोड़ सकते हैं (.speech-बुलबुला: से पहले) मेरी सीमा भी transparant होने की आवश्यकता होगी। निश्चित नहीं है कि यह मायने रखता है लेकिन यह ध्यान में रखना कुछ है। कोई सलाह?

स्रोत

2012-01-17 Jedda

सिर्फ एसवीजी पृष्ठभूमि, अपने सरल का उपयोग करें। – c69

@ c69 बस एसवीजी के साथ खेलना शुरू कर दिया लेकिन मैं यह देखने के लिए उत्सुक था कि यह शुद्ध सीएसएस के साथ किया जा सकता है या नहीं। चीयर्स ... – Jedda

हाँ, यह ** ** किया जा सकता है, लेकिन यह ** ** नहीं होना चाहिए। – c69

आप बहुत करीब हैं। आपको एक और त्रिभुज सीमा को परत करने के लिए बस :before और :after दोनों का उपयोग करने की आवश्यकता है।

यहाँ एक jsfiddle है: http://jsfiddle.net/rgthree/DWxf7/ और सीएसएस इस्तेमाल किया:

.speech-bubble { 
    position:relative; 
    width: 320px; 
    padding: 10px; 
    margin: 3em; 
    background-color:#FFF; 
    color: #666; 
    font: normal 12px "Segoe UI", Arial, Sans-serif; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border: 10px solid rgba(0,0,0,0.095); 
} 
.speech-bubble p { 
    font-size: 1.25em; 
} 

.speech-bubble:before, 
.speech-bubble:after { 
    content: "\0020"; 
    display:block; 
    position:absolute; 
    top:-20px; /* Offset top the height of the pointer's border-width */ 
    left:20px; 
    z-index:2; 
    width: 0; 
    height: 0; 
    overflow:hidden; 
    border: solid 20px transparent; 
    border-top: 0; 
    border-bottom-color:#FFF; 
} 
.speech-bubble:before { 
    top:-30px; /* Offset of pointer border-width + bubble border-width */ 
    z-index:1; 
    border-bottom-color:rgba(0,0,0,0.095); 
}

स्रोत

2012-01-17 16:20:35 rgthree

अच्छा काम साथी! बहुत बहुत धन्यवाद ... – Jedda

यह फ़ायरफ़ॉक्स में एक बदसूरत मिनी-सीमा प्रदान करता है (विंडोज़ पर)। मुझे अपने भाषण बबल के साथ एक ही समस्या है। –

उत्तर

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