Le CSS-Shapes sono ancora una realtà?

Question

Continuo a trovare siti che parlano di CSS-Shapes; dove l'idea è che invece di rettangolare posso usare i CSS per creare testi che prendono un numero di forme come circolare. Ma i siti web che trovo hanno codici che non funzionano. E poi quando guardo il loro codice sorgente (dato che hanno gli esempi sul loro stesso sito), si scopre che tutti gli esempi che hanno sono immagini - al contrario del codice reale. Quindi sto chiedendo qui. E 'ancora vero questo CSS-Shape? Voglio rendere un testo all'interno di un semicerchio. È così che scopro su CSS-Shapes.

Answer 1

Per creare un semicerchio è possibile creare un elemento <div> e lo stile con raggio di confine, qualcosa di simile:

#semicircle { 
    width: 200px; 
    height: 100px; 
    border-radius: 100px 100px 0 0; 
    background: green; 
} 

Poi, se si vuole mettere un po 'il testo in esso si può semplicemente inserire un <span> al suo interno , in modo che il codice HTML sarà simile a questa:

<div id="semicircle"> 
    <span>Some text</span> 
</div> 

e poi lo stile del testo per posizionarla dove si desidera all'interno del genitore <div>.

Answer 2

Sì e no. Le forme CSS "reali" non sono ancora supportate da una vasta gamma di browser.

Vedi http://caniuse.com/#feat=css-shapes

Ma un cerchio può anche essere fatta aggiungendo angoli arrotondati per un elemento, che è supportato da tutti i principali browser, IE9.

Vedi: http://caniuse.com/#feat=border-radius

Quindi, a meno che non hai bisogno di questo per lavorare in IE8 troppo, è possibile aggiungere testo in un cerchio in puro CSS. E per IE8, il testo verrà visualizzato altrettanto bene, solo in un quadrato o in un rettangolo invece che in un cerchio, in modo che possa essere una soluzione accettabile per te.

Non hai specificato un sito web specifico, ma molto spesso, i siti web sullo sviluppo web contengono articoli su nuove funzionalità che potrebbero non essere (o non ampiamente) ancora supportate, il che è anche il motivo per cui possono avere immagini per mostrare cosa sembrerà quando sarà disponibile.

Come sottolineato da Niet the Dark Absol nei commenti, la soluzione border-radius non racchiude effettivamente il testo in un cerchio. Il testo si comporterà come se l'elemento fosse ancora rettangolare. Se hai bisogno di fare in modo che il testo segua la forma del cerchio e necessiti di supporto per l'attuale generazione di browser, avrai bisogno dell'aiuto di JavaScript. Il TextMorph library sembra fare il trucco. L'ho cercato su Google, quindi non ho esperienza con esso, ma sembra promettente.