Tag: css3 Pagina 1 di 2

5-tutorial-formeecss3comedisegnareefarbattereuncuoreconcssejavascript

Forme e CSS3: come disegnare e far battere un cuore con CSS e JavaScript

Basta un pizzico di fantasia e le tecnologie web oggi a nostra disposizione ci consentono di sbizzarrirci nel creare oggetti, forme e disegni sulle nostre pagine in maniera mai vista prima. In questo tutorial impareremo a creare, animare e auscultare un cuore pulsante.

fai pubblicità su html5today.it
5-tutorial-trasformazionicssunorologioanalogicoconbarbaradursoalpostodeisecondi

Trasformazioni CSS: un orologio analogico con Barbara D’Urso al posto dei secondi

Le trasformazioni CSS3 sono uno strumento molto potente e utile per dare vita alle nostre pagine web in maniera nativa, efficiente e ottimizzata. Tra le tante possibilità che avremmo con questi strumenti, abbiamo deciso di creare un demo che sicuramente riempirà di gioia i cuori dei tanti fan della nostra diva: signore e signori, ecco a voi un orologio analogico a Barbara D’Urso.

1347357144-hot

Gradienti e sfumature con i CSS3

Dall’arrivo dei CSS3, sono stati risolti molti problemi che in precedenza erano dei veri e propri grattacapi per grafici e sviluppatori. Tra queste ci sono le possibilità di generare gradienti e dare una sfumatura trasparente ad un determinato elemento.

1343205181-hot

Trasformazioni 3D con CSS e HTML5

Ottenere effetti 3D sulle nostre pagine web, fino ad oggi, è stato sempre parecchio complicato, richiedendo plugin esterni come Flash o soluzioni complessi come WebGL. Vediamo invece come è possibile usare CSS per ottenere fantastici effetti 3D con pochissimo sforzo

1335428586-transparency

Gestire opacità e trasparenza con i CSS

Con l’avvento dei CSS3 e la sua relativa diffusione tra i principali browser, oggi possiamo realizzare dei gradevoli effetti di trasparenza sugli elementi (div) presenti in una pagina HTML. Vediamo in questo tutorial il codice e alcuni esempi per imparare a gestire questi effeti.

1333441402-22

Creiamo del testo 3D usando solo CSS3

Grazie ad HTML5 e CSS3 molti effetti grafici un tempo possibili e realizzabili solo attraverso l’uso di programmi come Photoshop sono oggi realizzabili con poche semplici regole CSS. Vediamo come dare un effetto 3D ad una qualsiasi scritta sulle nostre pagine web

Creare animazioni di rollover con CSS3

I CSS3 sono, almeno per il sottoscritto, entrati ormai nell’olimpo delle tecnologie risolvi-problemi. Eh già perchè tramite i CSS3 oggi possiamo fare talmente tante di quelle animazioni, effetti web o lavori in generale da non far assolutamente rimpiangere Flash

1311755919-adobe_edge_sm

Adobe Edge, creare animazioni in HTML5, CSS3 e jQuery

Da quando Steve Jobs dichiarò di utilizzare l’HTML5 al posto di Flash si è scatenato l’inferno. Tra botte e risposte di Adobe e Apple sono nate diverse soluzioni, proposte, idee: in particolare Edge, un programma per creare animazioni direttamente in HTML5, CSS3 e jQuery.

1310484887-Wrong_Way_by_JannaMarieisaTragedy

CSS selectors: interazione visuale con un form

Alterare l’aspetto di un form durante l’utilizzo può facilitare l’utente nella compilazione dei campi. Se prima l’unica possibilità era Javascript ora i CSS Selectors possono aiutarci nei comportamenti di base fornendoci strumenti estremamente utili per tutti i web developer.

fai pubblicità su html5today.it
1309773817-hot

Effetti di animazione e rollover con i CSS3

Con l’arrivo dei CSS3 è oggi possibile creare delle animazioni sui nostri menu senza l’ausilio di Flash e JavaScript. Tramite transition-property possiamo gestire l’animazione, deciderne la durata e impostare variazioni impensabili fino a poco tempo fa con HTML e CSS.

1309243726-600px-SVG-Logo2.svg

Lavorare in HTML5 e SVG files con Illustrator CS5

Dato lo sviluppo sempre più massiccio di HTML5 e CSS3, Adobe ha sviluppato un package di aggiornamento per poter creare pagine in HTML5 che lavori immagini vettoriali in SVG. Leggiamo come scaricarlo e vediamo il video per imparare ad usarlo immediatamente

1308561537-fonts_thumb

CSS3 @font-face: Google Fonts e altri strumenti online

Come essere sicuri di scegliere il tipo di font adatto per tutti i browser? I pack precompilati ci vengono in aiuto, oppure ci pensa Google Fonts! Scopriamo in questo tutorial come utilizzare la font factory per inserire sul nostro sito dei font belli e cross-browser

1306486829-1

lolwut: piccolo ma simpatico gioco online tutto in jQuery e CSS3

Ecco lolwut, altro esempio di semplice ma simpaticissimo gioco online che utilizza solo tecnologie “open”, ovvero un po’ di jQuery e tanto CSS3. Acchiappate al volo i mostriciattoli cadenti mentre un panorama coloratissimo e un po’ naif scorre orizzontalmente nel nostro browser

1306312756-Typographic_Portrait_by_PopeyeFrancom

CSS3 @font-face: i tuoi font preferiti sul sito

Stanco dei soliti font standard sulla tua pagina web? Con la proprietà @font-face è ora possibile utilizzare praticamente ogni tipo di font senza dover ricorrere a Photoshop e immagini che renderebbero l’indicizzazione e il posizionamento del tuo sito più difficile e meno efficace

1306221921-32ebd38c907359ec_Squatting-Hamstring-Stretch

Gestione dei box flessibili con HTML5 e CSS3

Organizzare la distribuzione degli elementi su una pagina web quando si hanno dei DIV affiancati è sempre stato molto difficile. Grazie alle proprietà box-flex di CSS3 non è più un problema: con una semplice sintassi è ora possibile definire esattamente come si devono distribuire i vari box

1306134987-VectorSeamlessRetroPatternWithRoundedSquares

Angoli arrotondati con border-radius CSS3

Disegnare figure con angoli arrotondati non è più un problema: con la proprietà CSS3 border-radius è possibile farlo via codice senza dover ricorrere alle immagini, usando una proprietà ormai supportata da tutti i browser più diffusi e usati su Internet

1305179255-1

Gradienti, bordi e ombre come Photoshop – online e in CSS!

Proprio quando pensi di aver trovato e usato tutti i tool online utili a rendere la vita più semplice di un developer HTML5/CSS3, ecco che ti trovi davanti a Layer Styles, uno strumento per creare bordi, gradienti e ombre come Photoshop – ma online e che produce CSS3

fai pubblicità su html5today.it
1304687932-macchina-da-scrivere

Tutorial CSS3: testo lungo a capo con word-wrap

Se una parola è troppo lunga rispetto alla lunghezza del suo contenitore è possibile mandarne a capo una porzione con la proprietà word-wrap di CSS3. Questa proprietà introdotta da IE è adesso adottata da tutti browser e dunque può essere utilizzata senza problemi di compatibilità.

1303459539-download

Multi-column CSS3: impaginare i contenuti in colonne

Rendere più usabile il layout dei contenuti è possibile: tramite la proprietà CSS3 multi-column si potranno disporre contenuti su più colonne in perfetto stile giornalistico e agevolare la lettura di lunghi testi.

1303307125-anti-aliasing.thumbnail

Uso alternativo del text-shadow: simulare l’anti-alias

La lettura prolungata di testi sul web può a volte risultare faticosa per l’utente: in assenza di un’impostazione ad hoc per l’antialias sul browser di turno proviamo a ricreare un effetto similare con la proprietà text-shadow introdotta da CSS3 e supportata oggi da quasi tutti i browser

1302963496-flash

HTML5 mobile: ottimizzare un interfaccia Flash con HTML5 e CSS3

Se l’antipatia fra Apple e Flash è cosa ormai provata, lo stesso non si può dire di Android. Questo sistema operativo supporta in maniera più o meno completa Flash: vediamo dunque in questo tutorial come ottimizzare la nostra interfaccia Flash a seconda delle caratteristiche del device.

1302179028-1297933689_1814498298_da84cf27d5_b

Ombreggiatura dei testi? Niente Photoshop, con CSS3 c’è text-shadow

Ricorrere a Photoshop o ad altri programmi di grafica per ottenere ombreggiature sul testo può non essere più necessario: la proprietà text-shadow introdotta da CSS3 e piuttosto ben supportata dai vari browser permette di ricreare un effetto similare in modo facile e (quasi) universale

1302081134-strobe-motion-ta-08

CSS3 transitions: tutorial completo sulle transizioni con CSS3

Già da qualche anno effetti di transizione – ad esempio cambiare gradualmente lo sfondo – arricchiscono le nostre pagine. La specifica CSS3 definisce un modulo per creare queste transitions in maniera semplice e nativa, senza la necessità di JavaScript e programmazione

1300649114-ipad-iphone-android-tethering01

HTML5 mobile: ottimizzare una pagina per iPhone e iPad con CSS3

Qual è il problema numero uno con i quali designer e developer sono costretti a imbattersi ogni volta? Pensare il proprio sito non più (o non solo) per diversi browser e diverse piattaforme ma anche per diversi device. Vediamo come ottimizzare un sito per iPhone e iPad con CSS3

1296474258-thumbnail.php

Gradient: le sfumature con CSS3. Il tutorial completo

I gradienti sono da sempre stati croce e delizia di grafici e webdesigner: piacciono a tutti, tutti li vogliono e così adesso che si possono utilizzare direttamente nel CSS la vita è ancora più facile!

Powered by