Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari.
Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità...
Ma cos'è il clipping ?
Il clipping o ritaglio, è quell'’operazione che ci consente di visualizzare un'esatta porzione di un elemento di una pagina web, nascondendo la parte esterna all’area individuata. Può essere effettuata su qualsiasi elemento HTML, e su qualsiasi elemento grafico o SVG.
Possiamo gistinguere in:
il clipping path, ovvero la linea che separa l'area visibile e quella non visibile (nascosta).
la clipping region è l’area visibile, quella all’interno del clipping path.
Vediamo come Bryan James spiega come utilizzare i poligoni per realizzare un ventaglio in CSS con Sass.
1. Creare un set di div
Quello che stiamo cercando di ottenere è un effetto in cui un insieme di forme triangolari partano in seguenza a ventaglio da un punto centrale. Prima di tutto bisogna creare tanti div per quanti poligoni abbiamo bisogno.
Per poter aggiungere la transizione che prevede che i poligoni scorrano come un ventaglio, dobbiamo impostare lo stato originale degli stessi e aggiungiamo un background.
Ricorriamo al metodo trigger per far si che si verifichi l'animazione. Ci limiteremo a mettere un stato "hover" sull'elemento wrapper.
4. Creare Poligoni
I poligoni si creano con poche linee di codice. Possono assumere qualsiasi forma: non sono vincolati a punti o a lati. Tuttavia, nel caso voleste applicare una transizione, come stiamo facendo ora, ricordatevi di usare lo stesso numero di punti, e di utilizzare lo stesso punto all'interno dell'array:
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.
Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni.
Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…
In questo post vi proproniamo una collezione di flat template professionali, perfetti per realizzare siti dal design semplice, pulito ma al tempo stesso accattivante.
Brewery
O come fare bella figura con un amico invitandolo a…
Red Pen
permette di caricare il tuo progetto grafico, condividerlo con una short URL ed ottenere un feedback. Non è necessario il logging in, e non è prensete un interfaccia per…
Oggi vi proponiamo una collezione di 10 ottimi tools online HTML5 che sono stati progettati appositamente per web designer con lo scopo di semplificare l'attività di sviluppo.
Tali strumenti online improntati…
HTML5 introduce due nuovi elementi con un ruolo apparentemente identico:
( http://www.w3.org/TR/html-markup/nav.html )
(http://www.w3.org/TR/html5/interactive-elements.html#the-menu-element )
In realtà i due elementi sono tutt'altro che simili, ed è improbabile che siano utilizzati contemporaneamente.…
Inauguriamo l'articolo settimanale sulle risorse per web designer, sviluppatori web e grafici!
Nella realizzazione di un progetto web ci sono diversi aspetti di cui tenere conto in modo che il risultato…
MENSAJE
OPERACIÓN EJECUTADA
Utilizziamo i nostri cookie e quelli di terzi per migliorare i nostri servizi, compilare informazioni statistiche e analizzare le vostre abitudini di navigazione. Questo ci permette di personalizzare i contenuti che offriamo e di mostrarvi le pubblicità relative alle vostre preferenze. Cliccando su "Accetta tutto" acconsentite alla memorizzazione dei cookie sul vostro dispositivo per migliorare la navigazione del sito web, analizzare il traffico e assistere le nostre attività di marketing. Potete anche selezionare "Solo cookies di sistema" per accettare solo i cookies necessari al funzionamento del sito web, oppure potete selezionare i cookies che desiderate attivare cliccando su "Impostazioni".
Tradotto con www.DeepL.com/Translator (versione gratuita)" o "Rifiuta".
Questi cookie sono necessari per il funzionamento del sito Web e non possono essere disattivati sui nostri sistemi. Generalmente vengono impostate solo in risposta alle vostre azioni di richiesta di servizi, come l'impostazione delle vostre preferenze sulla privacy, l'accesso o la compilazione di moduli. È possibile impostare il browser in modo da bloccare o avvisare l'utente di questi cookie, ma alcune aree del sito non funzioneranno. Questi cookie non memorizzano alcuna informazione di identificazione personale
Performance Cookies
Questi cookie ci permettono di contare le visite e le fonti di traffico in modo da poter valutare le prestazioni del nostro sito e migliorarle. Ci aiutano a sapere quali sono le pagine più o meno visitate e come i visitatori navigano nel sito. Tutte le informazioni raccolte da questi cookie sono aggregate e quindi anonime. Se non consentite l'utilizzo di questi cookie, non sapremo quando avete visitato il nostro sito e non saremo in grado di valutare se ha funzionato correttamente
Cookies Funzionali
Questi cookie consentono al sito Web di fornire una migliore funzionalità e personalizzazione. Essi possono essere impostati dalla nostra azienda o da fornitori esterni di cui abbiamo aggiunto i servizi alle nostre pagine. Se non si consente l'utilizzo di questi cookie, alcuni di questi servizi potrebbero non funzionare correttamente
Cookies Pubblicitari
Questi cookie possono essere impostati attraverso il nostro sito dai nostri partner pubblicitari. Possono essere utilizzati da queste aziende per profilare i vostri interessi e visualizzare annunci pertinenti su altri siti. Non memorizzano direttamente le informazioni personali, ma si basano sull'identificazione univoca del browser e del dispositivo Internet. Se non si consente l'utilizzo di questi cookie, si vedrà una pubblicità meno mirata