C'è un modo per creare una forma poligonale complessa da qualsiasi immagine in CSS da usare nella proprietà delle regioni?

Sto cercando di trovare un modo per convertire qualsiasi immagine nera in una forma poligonale.C'è un modo per creare una forma poligonale complessa da qualsiasi immagine in CSS da usare nella proprietà delle regioni?

Il problema che sto cercando di risolvere è costituito da due fasi:

immagine convertire in un poligono
Riempire il poligono con testo

Sto lottando con il primo passo . Dato che non ho trovato alcun "convertitore", l'unica idea che mi rimane è quella di convertire un'immagine in un formato SVG (se non è già un SVG), quindi recuperare i dati vettoriali e incollarli all'interno del CSS forma poligonale (analogamente a quanto fatto con Raphaël.js).

È questo l'unico approccio?

Vincoli:

io non voglio fare un sacco di div che andranno a comporre una forma.
Non desidero utilizzare JavaScript per questa attività.
Se una forma è complessa, deve essere un poligono.

Di seguito sono riportati alcuni esempi di ciò che sto cercando di fare (sono interessato solo ai poligoni complessi).

Eventuali suggerimenti su tipi di approcci devo usare?

Immagini tratte da Adobe: http://adobe.github.com/web-platform/samples/css-exclusions/

fonte

2013-02-21 acudars

Purtroppo questo non è ancora venuto per essere. [Ecco un articolo] (http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/) che fornisce maggiori informazioni sulle funzionalità future che assomigliano a ciò che si desidera utilizzando le regioni CSS –

Questo risponde quasi la mia domanda: http://sarasoueidan.com/blog/css-regions-with-shapes-for-readability/index.html – acudars

È possibile utilizzare un'immagine per la scatola di mascheramento, dettagli in this article e un esempio in questo link (webkit campione soltanto)

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

Risultato:

enter image description here

** EDIT **

Moar chiudere tecnici tagliente !!

avete bisogno di andare a http://html.adobe.com/webplatform/enable/ nella cromato o sezione canarino cromo troverete una riga che dice:

Per attivare forme, Regioni, e metodi di fusione:

copia e incolla chrome: // flags/# enable-experimental-web-platform-features nella barra degli indirizzi , quindi premere invio.

Fare clic sul collegamento "Abilita" all'interno di quella sezione.

Fare clic sul pulsante "Riavvia ora" nella parte inferiore della finestra del browser.

Nota: è possibile abilitare più funzioni prima del riavvio.

Ecco i draghi !!

Se sei abbastanza coraggioso, attiva le funzionalità sperimentali e soffrirai tutta la rigidità delle potenti forme dalle immagini! woow :)

qui si ha una penna di esempio che funziona solo quando si aveva attivato le funzioni sperimentali =>http://codepen.io/anon/pen/yhIbE

Se tutto è andato bene, si potrebbe vedere una silhouette anatra e un'anatra nel successivo paragrafo , ed è tutto non è tagliato o troncato ha tutto il testo avvolto;)

enter image description here

e 'tutto molto sperimentale, ma un giorno si sarà in grado di fare queste cose in tutti i browser, perché ogni aspetto dettagliato nella questo post è nella bozza del W3C.

Cheers!

EDIT:

Trovato un bell'articolo su questo argomento: http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html

fonte

2014-02-18 13:30:16 markcial

che taglia il testo, quindi è inaccettabile – acudars

la soluzione è molto tagliente , lo vuoi ancora? è necessario per attivare alcune funzionalità sperimentali sui nuovi browser – markcial

C'è un modo per creare una forma poligonale complessa da qualsiasi immagine in CSS da usare nella proprietà delle regioni?

risposta

Problemi correlati