La rivincita di position:fixed
september 2011 by hanicker
Parliamoci chiaro, il valore fixed per l'attributo position dei CSS è una figata.
.classe {
position:fixed;
}
Portarsi in giro per la pagina menù o widget è comodo e funzionale. Non che il position:fixed sia una novità e non che sia poi questa gran magia da realizzare, ma IE6 non lo supportava nativamente (ecco uno dei trick per emularlo se siete ancora così pazzi da supportare IE6) e in molti non lo usavano.
Oggi come oggi invece è utilizzatissimo, specialmente da quei siti web che vogliono mostrare una colonna di contenuti sempre visibile...
Con jQuery (o javascript in generale) possiamo addirittura decidere quando un elemento deve essere fisso o scrollare insieme al resto della pagina... jQuery Waypoint è un esempio di quello che è possibile fare oggi, con tanto di callback al passaggio del box in determinati punti della pagina.
Sticky scroller è un altro plugin jQuery utilissimo, così come Contained Sticky Scroll: il secondo in particolare scrolla il contenuto del box desiderato senza uscire dai "bordi" del box che lo contiene.
Segui @naponews su twitter!
CC BY-NC-SA 2006 - 2011 · La rivincita di position:fixed
HTML_e_CSS
JavaScript
css
position:fixed
from google
.classe {
position:fixed;
}
Portarsi in giro per la pagina menù o widget è comodo e funzionale. Non che il position:fixed sia una novità e non che sia poi questa gran magia da realizzare, ma IE6 non lo supportava nativamente (ecco uno dei trick per emularlo se siete ancora così pazzi da supportare IE6) e in molti non lo usavano.
Oggi come oggi invece è utilizzatissimo, specialmente da quei siti web che vogliono mostrare una colonna di contenuti sempre visibile...
Con jQuery (o javascript in generale) possiamo addirittura decidere quando un elemento deve essere fisso o scrollare insieme al resto della pagina... jQuery Waypoint è un esempio di quello che è possibile fare oggi, con tanto di callback al passaggio del box in determinati punti della pagina.
Sticky scroller è un altro plugin jQuery utilissimo, così come Contained Sticky Scroll: il secondo in particolare scrolla il contenuto del box desiderato senza uscire dai "bordi" del box che lo contiene.
Segui @naponews su twitter!
CC BY-NC-SA 2006 - 2011 · La rivincita di position:fixed
september 2011 by hanicker
WebPutty Hosts and Maintains CSS For Your Site [Video]
august 2011 by hanicker
Need to maintain CSS from anywhere? Signup for a (currently) free WebPutty beta account to host and serve your site's Cascading Style Sheets (CSS). The in-browser CSS editor offers a side-by-side preview pane with instant updating and is compatible with CSS extention Sass (SCSS) and Compass, an open-source CSS authoring framework.. More »
Webapps
CSS
Development
from google
august 2011 by hanicker
5 file da aggiungere ai vostri siti web
june 2011 by hanicker
E niente, leggevo questo articolo di Six Revisions e mi sono accorto che non ho nessuno di questi 5 file sul mio blog.
P3P.xml – for user privacy
Geo.kml (and Geo.rdf) – for geolocation
Humans.txt – for attribution
vCard.vcf – digital business card
PICS.rdf – declares a website to be safe (or not safe) for young web users
E' ora di porre rimedio: dettagli al post linkato
CC BY-NC-SA 2006 - 2011 · 5 file da aggiungere ai vostri siti web
Web_e_Web_2.0
css
html
privacy
from google
P3P.xml – for user privacy
Geo.kml (and Geo.rdf) – for geolocation
Humans.txt – for attribution
vCard.vcf – digital business card
PICS.rdf – declares a website to be safe (or not safe) for young web users
E' ora di porre rimedio: dettagli al post linkato
CC BY-NC-SA 2006 - 2011 · 5 file da aggiungere ai vostri siti web
june 2011 by hanicker
How to Make a Web Site: The Complete Beginner's Guide [Video]
april 2011 by hanicker
Last week we taught you how to make a web site from start to finish, including finding a reliable web host to host your site. Here's the complete guide so you have access to all the lessons in one convenient location. More »
Night_School
Clips
code
coding
CSS
Developing
Feature
FTP
HTML
Lifehacker_night_school
Lifehacker_Video
Programming
Teach_Yourself
Video
Web_Hosts
Web_Site
Web_site_development
from google
april 2011 by hanicker
Responsive design
january 2011 by hanicker
Su smashing magazine è uscito un bellissimo articolo che parla di responsive web design.
Leggetevelo: grazie alle media query css (e non solo) è possibile creare un unico design che vada bene sia per pc che per dispositivi mobili, tablet e altri cazzabubboli
HTML_e_CSS
css
responsive_webdesign
from google
Leggetevelo: grazie alle media query css (e non solo) è possibile creare un unico design che vada bene sia per pc che per dispositivi mobili, tablet e altri cazzabubboli
january 2011 by hanicker
CarouFredSel: Creare Slider Animati Orizzontali e Verticali
october 2010 by hanicker
CarouFredSel è un interessante Plugin jQuery che permette in modo semplice e intuitivo di creare slider orizzontali e verticali di determinati contenuti HTML.
Questo slider (o carosello) è configurabile molto facilmente e si adatta con altri plugin esterni come effetti Lightbox
Il Plugin è personalizzabile al 100% anche grazie agli stili CSS e JavaScript, è possibile vedere le sue potenzialità dalla pagina demo.
Vediamo insieme come installare e utilizzare questo slider.
Installazione jQuery
Prima di tutto andiamo a richiamare tra <head> e </head> la libreria jQuery e il cuore del Plugin.
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-2.4.3-packed.js"></script>
Una volta inseriti questi due richiami dovremo aprire un JavaScript dove indicare il nome dell’ ID del DIV che vorremo animare.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#item1").carouFredSel();
});
</script>
Come vedete il div che faremo animare dovrà avere ID = item1.
Ora andiamo a vedere la parte HTML base da inserire per diverse tipologie di contenuto.
Per le immagini
<div id="item1">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
</div>
Per una paginazione
<ul id="item1">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
<li> u </li>
<li> F </li>
<li> r </li>
<li> e </li>
<li> d </li>
<li> S </li>
<li> e </li>
<li> l </li>
</ul>
Per un contenuto HTML
<div id="item1">
<div>
<h3>Infinity</h3>
<p>A concept that in many fields refers to a quantity without bound or end.</p>
</div>
<div>
<h3>Circular journey</h3>
<p>An excursion in which the final destination is the same as the starting point.</p>
</div>
<div>
<h3>jQuery</h3>
<p>jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>
</div>
<div>
<h3>Carousel</h3>
<p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p>
</div>
</div>
Caratteristiche
Ecco alcune caratteristiche fondamentali di questo Plugin jQuery.
Trasforma qualsiasi tipo di elemento HTML in uno slider orizzontale o verticale.
Scorre uno o più oggetti contemporaneamente.
Scorre automaticamente o con l’interazione dell’utente.
Ridimensiona automaticamente larghezza e altezza.
Ottimizzato per navigazione da tastiera.
Disponibili eventi personalizzati, metodi e molte opzioni.
Compatibile con i più diffusi (jQuery) lightbox-plugins.
GET e (re) SET opzioni di configurazione dopo l’esecuzione.
Esempi Extra
Inoltre vi segnalo questi esempi e metodi di implementazione dello slider.
Slider Base
Slider con diversi contenuti
Slider con interazione utente
Uso di funzioni Callback
Uso di eventi personalizzabili
Slider con diverse dimensioni di contenuto
Slider personalizzato da eventi
Slider + Lightbox
Uso di 15 Slider simultanei
Abbiamo la possilità di leggere la documentazione per la configurazione del plugin sul sito ufficiale oppure seguire il Forum.
Inoltre vi segnalo la possbilità di creare il codice Slider con un Wizard automatico.
Questo Plugin è molto simile ad un altro che avevo gia segnalato, jQuery Slider.
Altro
Design
Grafica
Immagini
Sviluppo
CSS
HTML
JavaScript
jQuery
Plugin
from google
Questo slider (o carosello) è configurabile molto facilmente e si adatta con altri plugin esterni come effetti Lightbox
Il Plugin è personalizzabile al 100% anche grazie agli stili CSS e JavaScript, è possibile vedere le sue potenzialità dalla pagina demo.
Vediamo insieme come installare e utilizzare questo slider.
Installazione jQuery
Prima di tutto andiamo a richiamare tra <head> e </head> la libreria jQuery e il cuore del Plugin.
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-2.4.3-packed.js"></script>
Una volta inseriti questi due richiami dovremo aprire un JavaScript dove indicare il nome dell’ ID del DIV che vorremo animare.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#item1").carouFredSel();
});
</script>
Come vedete il div che faremo animare dovrà avere ID = item1.
Ora andiamo a vedere la parte HTML base da inserire per diverse tipologie di contenuto.
Per le immagini
<div id="item1">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
</div>
Per una paginazione
<ul id="item1">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
<li> u </li>
<li> F </li>
<li> r </li>
<li> e </li>
<li> d </li>
<li> S </li>
<li> e </li>
<li> l </li>
</ul>
Per un contenuto HTML
<div id="item1">
<div>
<h3>Infinity</h3>
<p>A concept that in many fields refers to a quantity without bound or end.</p>
</div>
<div>
<h3>Circular journey</h3>
<p>An excursion in which the final destination is the same as the starting point.</p>
</div>
<div>
<h3>jQuery</h3>
<p>jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>
</div>
<div>
<h3>Carousel</h3>
<p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p>
</div>
</div>
Caratteristiche
Ecco alcune caratteristiche fondamentali di questo Plugin jQuery.
Trasforma qualsiasi tipo di elemento HTML in uno slider orizzontale o verticale.
Scorre uno o più oggetti contemporaneamente.
Scorre automaticamente o con l’interazione dell’utente.
Ridimensiona automaticamente larghezza e altezza.
Ottimizzato per navigazione da tastiera.
Disponibili eventi personalizzati, metodi e molte opzioni.
Compatibile con i più diffusi (jQuery) lightbox-plugins.
GET e (re) SET opzioni di configurazione dopo l’esecuzione.
Esempi Extra
Inoltre vi segnalo questi esempi e metodi di implementazione dello slider.
Slider Base
Slider con diversi contenuti
Slider con interazione utente
Uso di funzioni Callback
Uso di eventi personalizzabili
Slider con diverse dimensioni di contenuto
Slider personalizzato da eventi
Slider + Lightbox
Uso di 15 Slider simultanei
Abbiamo la possilità di leggere la documentazione per la configurazione del plugin sul sito ufficiale oppure seguire il Forum.
Inoltre vi segnalo la possbilità di creare il codice Slider con un Wizard automatico.
Questo Plugin è molto simile ad un altro che avevo gia segnalato, jQuery Slider.
october 2010 by hanicker
jStackmenu: Menu Dock stile Mac in CSS + JavaScript
may 2010 by hanicker
jStackmenu è un piccolo file JavaScript + CSS che permette di trasformare una qualsiasti lista in HTML in un menu in stile Dock Mac.
Abbiamo la possibilità di provare una demo, scaricare i file sorgenti e leggere una ricca documentazione all’uso.
Tramite questo piccolo script potremo facilmente controllare l’apertura e chiusura, la direzione, la dimensione e il tempo dell’animazione.
Questo script sarà sicuramente utile per creare dei menu a cascata originali e fuori dagli schemi ottimizzando lo spazio.
Ottimo esempio di come creare un menu accattivante con un pò di JavaScript e CSS.
Design
Grafica
Immagini
Sviluppo
CSS
JavaScript
jQuery
MAC
Menu
from google
Abbiamo la possibilità di provare una demo, scaricare i file sorgenti e leggere una ricca documentazione all’uso.
Tramite questo piccolo script potremo facilmente controllare l’apertura e chiusura, la direzione, la dimensione e il tempo dell’animazione.
Questo script sarà sicuramente utile per creare dei menu a cascata originali e fuori dagli schemi ottimizzando lo spazio.
Ottimo esempio di come creare un menu accattivante con un pò di JavaScript e CSS.
may 2010 by hanicker
Template CSS gratuito per fotografi e designer
march 2010 by hanicker
CssTemplateHeaven ci presenta Classic Luxory, un elegantissimo template adatto alla realizzazione di un portfolio fotografico o di un sito di foto personali, ma può anche tranquillamente essere convertito facilmente in un tema per CMS come Wordpress o Joomla.Il template si compone fondamentalmente di 3 pagine: la home, la galleria fotografia e una pagina generica, ma ovviamente voi potrete personalizzarlo inserendo tutte le pagine che vorrete.
Cliccare qui per scaricare Classic Luxury Template
CSS
Fotografi
Templates
designer
from google
Cliccare qui per scaricare Classic Luxury Template
march 2010 by hanicker
CSSColorEditor, un tool online per modificare visivamente i colori CSS
march 2010 by hanicker
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!
(...)Continua a leggere CSSColorEditor, un tool online per modificare visivamente i colori CSS, su Geekissimo
© Martina Oliva (Bugeisha) per Geekissimo, 2010. |
Permalink |
2 commenti |
Aggiungi su del.icio.us
Hai trovato interessante questo articolo? Leggi altri articoli correlati nelle categorie Applicazioni Online, Css.
Post tags: applicazione online, codici, colori, Css, CSSColorEditor, modifiche css, visiva
Applicazioni_Online
Css
applicazione_online
codici
colori
CSSColorEditor
modifiche_css
visiva
from google
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!
(...)Continua a leggere CSSColorEditor, un tool online per modificare visivamente i colori CSS, su Geekissimo
© Martina Oliva (Bugeisha) per Geekissimo, 2010. |
Permalink |
2 commenti |
Aggiungi su del.icio.us
Hai trovato interessante questo articolo? Leggi altri articoli correlati nelle categorie Applicazioni Online, Css.
Post tags: applicazione online, codici, colori, Css, CSSColorEditor, modifiche css, visiva
march 2010 by hanicker
CSS KillSwitch
march 2010 by hanicker
Cliente moroso? Cliente deficiente? Accesso all'FTP negato e password cambiate? Spegnetegli il sito con CSS KillSwitch.
Facile da implementare (facile anche da far fuori per un esperto, occhio) è un asso nella manica in più per i webdesigner con problemi ad ottenere pagamenti da parte dei propri clienti.
Io ve lo segnalo, speriamo non vi serva mai! Voi usate meccanismi del genere per proteggere il vostro lavoro? Se sì, quali?
HTML_e_CSS
css
from google
Facile da implementare (facile anche da far fuori per un esperto, occhio) è un asso nella manica in più per i webdesigner con problemi ad ottenere pagamenti da parte dei propri clienti.
Io ve lo segnalo, speriamo non vi serva mai! Voi usate meccanismi del genere per proteggere il vostro lavoro? Se sì, quali?
march 2010 by hanicker
Framework CSS3 con supporto all’HTML 5
february 2010 by hanicker
Per chi come me si sta avvicinando piano piano al mondo dell’HTML 5 e dei CSS3 volevo segnalare un framework che potrà aiutarvi nell’utilizzo di queste nuove tecnologie mantenendo allo stesso tempo il supporto per i vecchi browser come internet explorer 6. Potrete finalmente fare uso dei nuovi tag come header, nav, section, article, footer o i nuovi campi input come url, email, etc oppure le nuove proprietà dei css3 come :selection, gli angoli arrotondati o l’obra sul testo.
Cliccare qui per scaricare 52framework
CSS3
HTML_5
framework
CSS
html5
from google
Cliccare qui per scaricare 52framework
february 2010 by hanicker
Shutup.css Silences Web Site Comments [CSS]
february 2010 by hanicker
While we happen to love comments and the lively discussion that occurs in them, we understand that not everybody wants to see the comments left by other internet users. Shutup.css lets you apply a custom stylesheet and eradicate comments across the web.
It's as simple as it sounds. Download the Shutup.css file at the link below and apply it to your custom styles in your web browser. For most browsers you can find custom style sheets under the advanced settings. If you're a Firefox user you can download Stylish to manage styles and give you finer control over which sites the Shutup.css file is applied to—it also makes toggling it on and off easier.
Once you have the style applied to your browser nearly all web sites with comments will no longer be displaying them. The screenshot above shows the end of a Lifehacker article with the style sheet not applied and then applied, removing the comments. Easy but effective.
Have a favorite user style hack? Prefer just to silence YouTube comments? Share it in the comments below.
Shutup.css [via Make]
CSS
Comments
Filters
Information_overload
UserStyles
from google
It's as simple as it sounds. Download the Shutup.css file at the link below and apply it to your custom styles in your web browser. For most browsers you can find custom style sheets under the advanced settings. If you're a Firefox user you can download Stylish to manage styles and give you finer control over which sites the Shutup.css file is applied to—it also makes toggling it on and off easier.
Once you have the style applied to your browser nearly all web sites with comments will no longer be displaying them. The screenshot above shows the end of a Lifehacker article with the style sheet not applied and then applied, removing the comments. Easy but effective.
Have a favorite user style hack? Prefer just to silence YouTube comments? Share it in the comments below.
Shutup.css [via Make]
february 2010 by hanicker
Framework CSS Per la realizzazione di un sito
january 2010 by hanicker
MarkerCSS è un completo framework css utile per realizzare il layout di un sito in modo semplice e veloce senza ogni volta perdere tempo per creare da zero un nuovo foglio di stile.
Questo framework è strutturato con otto css distinti in grado di definire: layout, bordi, background, links, form, testo, colori e tabelle e utilizzabili anche separatamente in base alle proprie esigenze.
Il suo utilizzo è abbastanza semplice e consiste nell’aggiungere, sugli elementi che vogliamo, una o più classi in modo da formattarlo a nostro piacimento, per esempio aggiungendo la classe w10 “<div class=”w10″></div>” otteremo un elemento con larghezza 10px e unendo a questo div la classe p5 “<div class=”w10 p5″></div>” avremo un contenitere largo 10px e con un padding di 5 px.
Se non avete compreso appieno il suo funzionamento vi rimando ad una pagina dove potrete trovare una serie di esempi.
Dopo un rapido testo di questo Framework sono giunto alla conclusione che per i miei gusti è troppo macchinoso infatti l’utilizzo di tante classi per formattare un elemento mi fa optare quasi all’utilizzo degli stili inline, comunque se si prende l’abitudine ad usarlo potrebbe diventare davvero un potente strumento di lavoro.
CSS
framework
from google
Questo framework è strutturato con otto css distinti in grado di definire: layout, bordi, background, links, form, testo, colori e tabelle e utilizzabili anche separatamente in base alle proprie esigenze.
Il suo utilizzo è abbastanza semplice e consiste nell’aggiungere, sugli elementi che vogliamo, una o più classi in modo da formattarlo a nostro piacimento, per esempio aggiungendo la classe w10 “<div class=”w10″></div>” otteremo un elemento con larghezza 10px e unendo a questo div la classe p5 “<div class=”w10 p5″></div>” avremo un contenitere largo 10px e con un padding di 5 px.
Se non avete compreso appieno il suo funzionamento vi rimando ad una pagina dove potrete trovare una serie di esempi.
Dopo un rapido testo di questo Framework sono giunto alla conclusione che per i miei gusti è troppo macchinoso infatti l’utilizzo di tante classi per formattare un elemento mi fa optare quasi all’utilizzo degli stili inline, comunque se si prende l’abitudine ad usarlo potrebbe diventare davvero un potente strumento di lavoro.
january 2010 by hanicker
related tags
Altro ⊕ applicazione_online ⊕ Applicazioni_Online ⊕ Clips ⊕ code ⊕ codici ⊕ coding ⊕ colori ⊕ Comments ⊕ css ⊖ CSS3 ⊕ CSSColorEditor ⊕ Design ⊕ designer ⊕ Developing ⊕ Development ⊕ Feature ⊕ Filters ⊕ Fotografi ⊕ framework ⊕ FTP ⊕ Grafica ⊕ html ⊕ html5 ⊕ HTML_5 ⊕ HTML_e_CSS ⊕ Immagini ⊕ Information_overload ⊕ JavaScript ⊕ jQuery ⊕ Lifehacker_night_school ⊕ Lifehacker_Video ⊕ MAC ⊕ Menu ⊕ modifiche_css ⊕ Night_School ⊕ Plugin ⊕ position:fixed ⊕ privacy ⊕ Programming ⊕ responsive_webdesign ⊕ Sviluppo ⊕ Teach_Yourself ⊕ Templates ⊕ UserStyles ⊕ Video ⊕ visiva ⊕ Webapps ⊕ Web_e_Web_2.0 ⊕ Web_Hosts ⊕ Web_Site ⊕ Web_site_development ⊕Copy this bookmark: