Jekyll2018-12-14T12:59:01+01:00http://www.accentiweb.it/feed.xmlAccentiWebAppunti di Web Design e dintorniAkabitAnimazioni CSS (di nuovo)2018-12-14T12:11:32+01:002018-12-14T12:11:32+01:00http://www.accentiweb.it/2018/12/14/animazioni-css-di-nuovo<p>Torniamo sulle animazione realizzate con solo CSS per segnalare un sito con animazioni piuttosto interessanti ed accompagnate da dettagliati tutorial.
<!-- more -->
Trovate il sito in questione al link:
<a href="https://cssanimation.rocks">https://cssanimation.rocks</a></p>
<p>Eccone un esempio (scusateper la poca precisione nel giro intorno alla terra, ma mi è scomodo metterla a posto dentro un post):</p>
<style>
.earth {
position: relative;
top: calc(50% - 350px);
left: calc(50% - 100px);
}
.earth img {
height: 200px;
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.moon-container {
position: relative;
top: calc(50% + 510px);
left: calc(50% - 50px);
}
.moon {
animation: spin 20s linear infinite;
background: none;
height: 50px;
pointer-events: none;
transform-origin: 25px;
width: 50px;
}
.moon img {
height: 50px;
transform: translateX(-160px) translateY(-160px);
width: 50px;
}
.earth img, .moon img {
border-radius: 50%;
box-shadow: 0 0 12em 1em rgba(110, 140, 200, .6);
}
@keyframes spin {
to {
transform: rotateZ(360deg);
}
}
</style>
<article class="earth-demo">
<div class="earth">
<img src="https://cssanimation.rocks/images/random/earth.png" />
</div>
<div class="moon-container">
<div class="moon">
<img src="https://cssanimation.rocks/images/random/moon.png" />
</div>
</div>
</article>
<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>{"picture"=>"/assets/images/mauriziocav.jpg", "twitter"=>"akabit"}Torniamo sulle animazione realizzate con solo CSS per segnalare un sito con animazioni piuttosto interessanti ed accompagnate da dettagliati tutorial.Animatevi gente2018-12-03T18:12:31+01:002018-12-03T18:12:31+01:00http://www.accentiweb.it/2018/12/03/animatevi-gente<p>Oggi mi ha preso così, che ci volete fare? Sopportate questi titoli idioti ::smile::
Nella precedente era internet le animazioni erano una prerogativa esclusiva di Flash (il male!), con l’avvento dell’HTML5 e del CSS3 per fortuna le cose son cambiate.
<!-- more -->
Quello che vi segnalo è <a href="https://www.creativebloq.com/inspiration/css-animation-examples">questo articolo dove si passano in rassegna 18 tipi di animazioni</a> non esagerate, alcune molto eleganti, per portare personalità nei siti, spiegare idee complesse in modo rapido e semplice e guidare le azioni degli utenti.</p>
<p>link: <a href="https://www.creativebloq.com/inspiration/css-animation-examples">https://www.creativebloq.com/inspiration/css-animation-examples</a></p>{"picture"=>"/assets/images/mauriziocav.jpg", "twitter"=>"akabit"}Oggi mi ha preso così, che ci volete fare? Sopportate questi titoli idioti ::smile:: Nella precedente era internet le animazioni erano una prerogativa esclusiva di Flash (il male!), con l’avvento dell’HTML5 e del CSS3 per fortuna le cose son cambiate.La ripetizione dei gradienti!2018-12-03T17:51:18+01:002018-12-03T17:51:18+01:00http://www.accentiweb.it/2018/12/03/la-ripetizione-dei-gradienti<p>Scusate lo sporco gioco della traduzione maccheronica, era per cercare di rendere meno grigio questo lunedì quasi invernale.
Invece più seriamente parliano di come ripetere delle sfumature per creare qualcosa di originale sfruttando i Gradients del CSS3.
<!-- more -->
<a href="https://www.hongkiat.com/blog/css3-repeating-gradients/">Questo articolo</a> ci spiega come farlo <strong>senza</strong> usare immagini ma solo con puro CSS.</p>
<p>link: <a href="https://www.hongkiat.com/blog/css3-repeating-gradients/">https://www.hongkiat.com/blog/css3-repeating-gradients/</a></p>{"picture"=>"/assets/images/mauriziocav.jpg", "twitter"=>"akabit"}Scusate lo sporco gioco della traduzione maccheronica, era per cercare di rendere meno grigio questo lunedì quasi invernale. Invece più seriamente parliano di come ripetere delle sfumature per creare qualcosa di originale sfruttando i Gradients del CSS3.Web design: 29 strumenti per accelerare il flusso di lavoro2018-11-27T18:25:00+01:002018-11-27T18:25:00+01:00http://www.accentiweb.it/2018/11/27/web-design-29-strumenti-per-accelerare-il-flusso-di-lavoro<p>Gli strumenti giusti di progettazione Web possono semplificare il flusso di lavoro, aiutando a lavorare in modo più intelligente ed efficiente.
Dopotutto, è meglio investire le energie nella risoluzione dei problemi, deliziando gli utenti creando bellissimi layout ;-)
<!-- more -->
Per fortuna, vengono continuamente rilasciati nuovi strumenti di <a href="https://www.akabit.it/web-design-progettazione-restyling">web design</a> per semplificare i processi e ridurre i tempi e gli sforzi, in particolare nella progettazione dell’interfaccia utente.</p>
<p>In <a href="https://www.creativebloq.com/features/best-web-design-tools">questo articolo</a> troverete 29 interessanti strumenti di web design per questo 2018, che aiuteranno a diventare più produttivi. Alcuni sono nuovi di zecca; altri sono in giro da un po ‘. Ma tutti hanno il potenziale per farti risparmiare tempo, energia e budget nei tuoi progetti di web design.</p>
<p>Link: <a href="https://www.creativebloq.com/features/best-web-design-tools">https://www.creativebloq.com/features/best-web-design-tools</a></p>{"picture"=>"/assets/images/mauriziocav.jpg", "twitter"=>"akabit"}Gli strumenti giusti di progettazione Web possono semplificare il flusso di lavoro, aiutando a lavorare in modo più intelligente ed efficiente. Dopotutto, è meglio investire le energie nella risoluzione dei problemi, deliziando gli utenti creando bellissimi layout ;-)Specialista vs generalista: qual è il percorso migliore?2018-11-27T18:09:05+01:002018-11-27T18:09:05+01:00http://www.accentiweb.it/2018/11/27/specialista-vs-generalista-qual-e-il-percorso-migliore<p>È una domanda di quelle che generano discussioni infinite nel <a href="https://www.immaginaria.net/internet-e-dintorni-web-design">settore web</a>. Dovresti specializzarti in uno specifico linguaggio di programmazione, disciplina, strumento di web design o metodologia o offrire una vasta gamma di capacità di progettazione e sviluppo?
<!-- more -->
Non esiste una risposta semplice valida per tutti. Ma ci sono alcuni indizi su quale strada sarebbe meglio intraprendere e che potrebbe adattarsi meglio per ciascuno di noi. In <a href="https://webdesigntips.blog/more-website-design-news/specialist-vs-generalist-whats-the-best-route/">questo lungo articolo</a>, parlano con esperti di tutto il settore per ottenere i loro consigli su come scegliere il percorso migliore per te.</p>
<p>Link: <a href="https://webdesigntips.blog/more-website-design-news/specialist-vs-generalist-whats-the-best-route/">https://webdesigntips.blog/more-website-design-news/specialist-vs-generalist-whats-the-best-route/</a></p>{"picture"=>"/assets/images/mauriziocav.jpg", "twitter"=>"akabit"}È una domanda di quelle che generano discussioni infinite nel settore web. Dovresti specializzarti in uno specifico linguaggio di programmazione, disciplina, strumento di web design o metodologia o offrire una vasta gamma di capacità di progettazione e sviluppo?Flexbox, guide all’uso2018-11-26T13:11:17+01:002018-11-26T13:11:17+01:00http://www.accentiweb.it/css/guide/tutorial/2018/11/26/flexbox-guide-alluso<p>Come ben saprete <a href="https://www.w3.org/TR/css-flexbox-1/">Flexbox</a> è la via del futuro per l’impaginazione web: l’implementazione dei vari browser è ad un punto, ed anche le specifiche ufficiale del W3C sono a livello di <em>Candidate Recommendation</em>.
<!-- more -->
Quindi vi segnalo 2 ottime guide per iniziare a sviluppare CSS con questo metodo.</p>
<p>La prima è un <a href="https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35">tutorial</a> piuttosto completo di @js_tut: https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35</p>
<p>La seconda è una <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">guida</a> di <a href="https://css-tricks.com/author/chriscoyier/">Chris Coyer</a> dove poter tornare velocemente in caso di bisogno: https://css-tricks.com/snippets/css/a-guide-to-flexbox/</p>
<p>Buon lavoro!</p>{"picture"=>"/assets/images/mauriziocav.jpg", "twitter"=>"akabit"}Come ben saprete Flexbox è la via del futuro per l’impaginazione web: l’implementazione dei vari browser è ad un punto, ed anche le specifiche ufficiale del W3C sono a livello di Candidate Recommendation.Risorse grafiche gratuite2018-11-21T18:08:50+01:002018-11-21T18:08:50+01:00http://www.accentiweb.it/2018/11/21/risorse-grafiche-gratuite<blockquote>
<p><em>Pubblicato in origine il 2 marzo 2015.</em></p>
</blockquote>
<p>Ecco un sito interessante per grafici e/o blogger in cerca di risorse gratuite: fotografie, ma anche sfondi, pattern (elementi per sfondi ripetitivi), immagini vettoriali, icone, pennelli per Photoshop, clipart, grafiche in PSD, font (a loro volta classificate in categorie), ecc.
<!-- more -->
E’ possibile effettuare una ricerca testuale all’interno delle singole categorie.</p>
<p>Tutto il materiale è liberamente scaricabile dal sito <a href="https://www.1001freedownloads.com/">1001 Free Downloads</a>.</p>{"picture"=>"/assets/images/daniela.jpg", "twitter"=>"azulette"}Pubblicato in origine il 2 marzo 2015. Ecco un sito interessante per grafici e/o blogger in cerca di risorse gratuite: fotografie, ma anche sfondi, pattern (elementi per sfondi ripetitivi), immagini vettoriali, icone, pennelli per Photoshop, clipart, grafiche in PSD, font (a loro volta classificate in categorie), ecc.Ancora foto gratis2018-11-21T18:08:48+01:002018-11-21T18:08:48+01:00http://www.accentiweb.it/2018/11/21/ancora-foto-gratis<blockquote>
<p><em>Pubblicato in origine il 29 settembre 2014.</em></p>
</blockquote>
<p>Segnalo un altro sito di immagini gratuite ad alta risoluzione (certo non da stamparci un manifesto, ma utilizzabili anche come sfondi). Le immagini sono taggate con un paio di parole chiave (in inglese) ed è possibile fare una ricerca.
<!-- more -->
Le foto sono utilizzabili anche su siti commerciali e non è richiesta l’attribuzione.</p>
<p>La foto del post è presa dal sito: <a href="https://www.pexels.com/">Pexels</a></p>{"picture"=>"/assets/images/daniela.jpg", "twitter"=>"azulette"}Pubblicato in origine il 29 settembre 2014. Segnalo un altro sito di immagini gratuite ad alta risoluzione (certo non da stamparci un manifesto, ma utilizzabili anche come sfondi). Le immagini sono taggate con un paio di parole chiave (in inglese) ed è possibile fare una ricerca.Ancora immagini gratuite2018-11-21T18:08:28+01:002018-11-21T18:08:28+01:00http://www.accentiweb.it/2018/11/21/ancora-immagini-gratuite<blockquote>
<p><em>Pubblicato in origine il 8 novembre 2013.</em></p>
</blockquote>
<p>A chi non serve poter contare su un buon repertorio di immagini gratuite?</p>
<p>Che serva per un blog o per un progetto dimostrativo, avere sottomano qualche indirizzo per andare a caccia dell’immagine giusta torna sempre utile.
<!-- more -->
Ecco dunque alcuni indirizzi utili:</p>
<p><a href="https://pixabay.com/">Pixabay</a> dà la possibilità di effettuare ricerche per parola chiave, anche in italiano.</p>
<p><a href="https://unsplash.com/">Unsplash</a> invece pubblica quotidianamente foto di grande formato, liberamente utilizzabili.</p>
<p><a href="https://www.123rf.com/">123RF</a> offre la possibilità, agli utenti registrati, di scaricare gratuitamente foto di piccolo formato (sufficienti per un blog), e anche di cercare per parola chiave.</p>
<p><a href="https://freerangestock.com/">Free range stock photo</a> permette di scaricare gratuitamente foto e textures per siti web.</p>{"picture"=>"/assets/images/daniela.jpg", "twitter"=>"azulette"}Pubblicato in origine il 8 novembre 2013. A chi non serve poter contare su un buon repertorio di immagini gratuite? Che serva per un blog o per un progetto dimostrativo, avere sottomano qualche indirizzo per andare a caccia dell’immagine giusta torna sempre utile.I caratteri nella progettazione di siti web adattivi2018-11-21T18:08:28+01:002018-11-21T18:08:28+01:00http://www.accentiweb.it/2018/11/21/i-caratteri-nella-progettazione-di-siti-web-adattivi<blockquote>
<p><em>Pubblicato in origine il 21 novembre 2013.</em></p>
</blockquote>
<p>Oggi che una pagina web si deve poter leggere bene da uno smartphone come da un grande monitor fisso, non si può che progettare siti web adattivi (responsive, per dirla all’inglese). Anche la scelta di caratteri e dimensioni ha la sua importanza, perché cambiano anche le condizioni di lettura fra i diversi dispositivi: un monitor fisso sarà a una distanza maggiore dai miei occhi di quanto non sia il telefonino se sto guardando un sito web.
<!-- more -->
In <a href="https://www.awwwards.com/responsive-typography-a-roundup-of-the-best-articles-and-tutorials.html">questo interessante articolo</a>, l’autore passa in rassegna una serie di articoli e guide relative a un aspetto della progettazione adattiva: la tipografia.</p>{"picture"=>"/assets/images/daniela.jpg", "twitter"=>"azulette"}Pubblicato in origine il 21 novembre 2013. Oggi che una pagina web si deve poter leggere bene da uno smartphone come da un grande monitor fisso, non si può che progettare siti web adattivi (responsive, per dirla all’inglese). Anche la scelta di caratteri e dimensioni ha la sua importanza, perché cambiano anche le condizioni di lettura fra i diversi dispositivi: un monitor fisso sarà a una distanza maggiore dai miei occhi di quanto non sia il telefonino se sto guardando un sito web.