Css – Geekissimo

CSS FilterLab: un sito web per ottenere i codici dei filtri CSS

Se siete dei web designer sicuramente farete uso dei CSS. Come sicuramente saprete, questo tipo di linguaggio vi permette di applicare una determinata formattazione al sito in modo da definire il “volto” delle pagine web. Esistono infiniti codici che vi consentono di intervenire su quasi ogni aspetto visivo, ma per poterli applicare dovrete necessariamente conoscerli.

Sul web si trova ogni tipo di informazione, ma per convenienza potrete decidere di inserire nei preferiti il comodo sito chiamato CSS FilterLab! Il servizio web vi consente di ottenere, in pochissimi click, tutti i codici dei migliori filtri CSS che renderanno i contenuti del vostro sito web visivamente più interessanti.

Esperimento Google Chrome Movi.Kanti.Revo

Google trasforma il Cirque du Soleil in un esperimento sensoriale per Chrome

Al fine di dimostrare quelle che sono le effettive potenzialità di Chrome big G ha realizzato un nuovo, interessante ed affascinante esperimento che ha coinvolto, in primis, il Cirque du Soleil, il celebre circo costituito da soli acrobati, giocolieri e mimi.

Il nuovo esperimento firmato Google prende il nome di Movi.Kanti.Revo, derivante dall’Esperanto ed il cui significato è, letteralmente, “moversi, cantare e sognare”.

Movi.Kanti.Revo, così come spiegato da Google, è un esperimento decisamente unico nel suo genere, un’esperienza web sensoriale tutta basata sulle gesture mediante cui, appunto, ciascun utente ha la possiiblità di viaggiare attraverso un mondo magico.

L’esperimento, nello specifico, permette all’utente di seguire un misterioso personaggio in un mondo surreale nel quale si imbatterà negli spettacoli della celebre compagnia circense andando però a coinvolgere in tutto e per tutto l’utente poiché movimenti e voce saranno rilevati.

IE9 RC VS Firefox 4 VS Chrome 9: nuovi test comparativi

Siamo all’alba di una nuova guerra dei browser. Internet Explorer con il lancio della versione 9 RC ha confermato di avere tutte le carte in regola per riconquistare il terreno perduto negli ultimi mesi (in Europa è stato superato da Firefox), Firefox 4 dopo un estenuante periodo di beta testing si avvia finalmente a “sbocciare”, mentre Chrome, il sempre aggiornatissimo browser di Google, continua a percorrere la strada che l’ha portato a fregiarsi in pochissimo tempo della versione 9 stabile.

I tempi, insomma, sono maturi per cominciare a misurare sul campo le performance di questi nuovi “sfidanti”. E quale miglior test se non quello relativo alla velocità dei motori Javascript (quello che ci permette di) per iniziare a prendere coscienza delle reali potenzialità di tutti i browser protagonisti della prossima “battaglia navale” informatica? Nessuno, quindi limitiamo i fronzoli e passiamo subito ai dati.

Stylebot, personalizzare istantaneamente l’aspetto delle pagine web direttamente da Chrome

Per la gioia di tutti i web designer o, molto più semplicemente, per quella di tutti coloro che amano dilettarsi nel costruire e modificare alcuni degli elementi costituitivi delle pagine web, ecco in arrivo, a tal proposito, una nuova ed interessantissima estensione interamente dedicata a Google Chrome.

Lo strumento in questione è Stylebot, una risorsa gratuita la quale, una volta applicata al browser web, consentirà di personalizzare l’aspetto delle pagine web visualizzate in base a quello che è il proprio gusto personale andando dunque ad agire come una sorta di editor HTML / CSS, analogamente, o quasi, a quanto offerto da Firebug per Firefox.

Ciò che però differenza Stylebot da quest’ultimo sta proprio nel fatto che le modifiche apportate a tutte le varie ed eventuali pagine web d’interesse potranno essere salvate direttamente all’intero del proprio browser, in modo tale da poter visionare agevolmente il tutto anche in un secondo momento.

CSSColorEditor, un tool online per modificare visivamente i colori CSS

Andare a sostituire la combinazione di colori del proprio sito web sfruttando i CSS può risultare un compito tanto noioso quanto, al contempo, complicato per i meno esperti che si ritrovano a doversi destreggiare tra righe e righe di codici di varia natura.

Proprio per questa ragione, potrebbe risultare una scelta piuttosto saggia ricorrere all’utilizzo di un apposito strumento mediante cui semplificare di gran lunga la cosa, rendendo quelle che sono le copiose operazioni di ricerca e modifica dei codici facilmente gestibili e “individuabili”.

CSSColorEditor si propone di fare esattamente questo!

MenuBuilder, come creare menù CSS direttamente online

Chi gestisce un sito internet o una pagina web personale di certo è ben consapevole di quanto possa essere importante avere a propria disposizione una serie di validi strumenti mediante cui organizzare il tutto nel migliore dei modi.

Proprio a questo proposito, trovo che, per i meno esperti, ricorrere all’utilizzo di apposite risorse online per la creazione di determinati elementi, possa risultare un operazione piuttosto proficua e, ammettiamolo, anche divertente e soddisfacente.

Stripemania, pratico generatore di background a strisce

Se siamo al lavoro su un blog, o più in generale su qualche sito web, potremo essere alla ricerca di

Come creare una semplice TV con HTML e Javascript

Anche gli effetti grafici più semplici possono risultare complessi da realizzare in Javascript, fortunatamente per agevolare la scrittura dei nostri script ci viene incontro la libreria script.aculo.us che in accopiata con Prototype permette di ottenere veloci e semplici transizioni. In questo esempio sfrutteremo script.aculo.us e il suo effetto SwitchOff per creare una nostra TV in HTML e Javascript da accendere e spegnere quando vogliamo e, per non farci mancare niente, potremo anche decidere cosa mandare in onda!

Un’immagine della TV che abbia l’area dello schermo trasparente, in modo che sotto si veda il “film” scelto. Nel nostro caso abbiamo scelto la mitica scena di Spiderpork, vera punta di diamante del divertentissimo Simpson – Il Film. Una GIF animata che ci dia l’illusione che nello schermo ci sia un filmato e non un’immagine statica, molto semplice da realizzare ma di sicuro effetto. Le funzioni Javascript serviranno a dare l’illusione di spegnere/accendere lo schermo.

Inseriamo un separatore tra i Widget di blogger!

Terza domenica del mese, come ogni giorno, anche oggi, noi di Geekissimo è qui a tenere compagnia a ogni Geek, con notizie, trucchi e ancora di più. Nell’articolo di oggi, vi mostro come inserire dei separatori tra i vari Widget dei temi di Blogger.

Per separare i Widget, nella maggior parte delle volte, sono usate delle immagini che aumentano in bene, almeno si spera, la grafica del vostro blog presente sulla piattaforma Blogger / BlogSpot. Le modifiche riguardano solamente il file CSS del tema, quindi un minimo impegno per un bel risultato. La prima cosa che vi ricordo di fare è quella di salvare sul PC, un backup del file CSS, in modo da poterlo ripristinare nel caso vi si presentino problemi dopo aver applicato le modifiche.

CSS Text Wrapper, disporre il testo in qualsiasi direzione

Ogni bravo geek, e mi riferisco nella fattispecie ai webmasters, deve conoscere quell’arsenale di trucchetti semplici ma efficaci, per incantare il visitatore. Non necessariamente effetti 3D o Flash, intendiamoci, è anche sufficiente disporre un certo testo in una forma particolare, per esempio. La “tradizione classica”, tramandata dai webmasters ai discepoli, permette di disporre il testo adoperando sapientemente i DIVs tags.

Una tradizione che tuttora sussiste, ma ormai non sono poi così tanti coloro che si servono di questa tecnica con tanta abilità. Nel webmastering, ed in generale nell’informatica, la semplificazione delle operazioni è un obiettivo sempre valido. A questo proposito, dunque, esiste un servizio web che permette di allineare graficamente il testo secondo due direttrici e di fornirne la relativa stringa HTML/CSS da incorporare: sto parlando di CSS Text Wrapper.

20 utili risorse per imparare il linguaggio CSS

La nobile arte del webdesign è apparentemente semplice, ma per chi (come me) prova gusto a disegnare e strutturare pagine web soltanto in codice, beh… Allora occorre essere veramente appassionati. Il webdesign pone le sue basi intorno ad un linguaggio veramente versatile: il CSS (Cascading Style Sheet – Foglio di stile a cascata).

I fogli di stile CSS sono una delle migliori soluzioni per strutturare la grafica di una pagina web in modo razionale e lineare. Qui vi proponiamo una lista di venti utilissime risorse per apprendere ed utilizzare al meglio questo linguaggio:

Modifichiamo il menu del nostro WordPress con uno più web 2.0!

In questi ultimi mesi, ci sono sempre più amici blogger che mi chiedono qualche consiglio su come migliorare il tema del loro blog. Molte volte mi viene naturale dirgli di inserire elementi Web 2.0, come per esempio bottoni, immagini e tanto altro. Oggi voglio segnalare a tutti i lettori di Geekissimo, come creare un menu a due linee, sul vostro tema WordPress.

Le cose fondamentali da sapere prima di iniziare con il tutorial, è che in questa guida andremo a modificare il file CSS del tema, e quello Header.php sempre del tema di WordPress. Prima di iniziare con le modifiche, vi consiglio di effettuare un Bakcup del tema completo, in modo da poterlo rimettere in caso di problemi. A questo punto, iniziamo con la guida, dopo il salto trovate tutte le informazioni su come creare il vostro Menu a due linee.

KompoZer, un ottimo editor web per Linux

Gli strumenti per il web disponibili per i sistemi operativi GNU/Linux sono tantissimi, ed ognuno si distingue per una caratteristica. Uno dei più apprezzati e diffusi è certamente KompoZer, un editor web WYSIWYG, ovvero What You See Is What You Get (letteralmente, ciò che vedi è ciò che ottieni). Con KompoZer è possibile creare pagine web in maniera semplice e rapida, avendo sempre a disposizione un’anteprima dei risultati ottenuti.

Sviluppato in seno al progetto Mozilla, è nato dalle ceneri di un altro celebre editor realizzata dalla stessa casa, Nvu, il cui sviluppo è ormai terminato da tempo. Nato per essere estremamente semplice da utilizzare ma allo stesso tempo dotato di feature tali da poter competere con altri software più celebri e rinomati, si è lentamente ritagliato il suo spazio nel mondo degli editor web.

Video Tutorial: come inserire una firma HTML, RTF o CSS in Gmail con AutoHotKey

Uno dei limiti degli userscript funzionanti in Firefox grazie all’estensione Greasemonkey è che, in servizi web avanzati come Gmail, ogni minimo cambiamento di questi ultimi finisce con l’annullare il corretto funzionamento degli script. Ed a quel punto non rimane che attendere aggiornamenti dagli autori, che (ahinoi) molto spesso non arrivano.

Uno degli userscript più utilizzati dagli utenti di Gmail è sicuramente quello che permette di inserire una firma automatica in HTML in ogni messaggio, ma anche quest’ultimo è spesso soggetto a malfunzionamenti. Ed allora che ne dite di bypassare tutto ciò e vedere insieme a noi come inserire una firma HTML, RTF o CSS in Gmail con AutoHotKey? Basta un programmino gratuito ed open source, uno script funzionante con tutti i browser ed il gioco è fatto.

Ecco come procedere passo passo, mentre sopra trovate una versione video del medesimo tutorial:

+ Leggi tutto