Css e grid layout

Oggi per puro caso ho scoperto un framework CSS per la creazione semplificata di layout più o meno complessi, tramite l’ottimo blog di Laburno.net, ho scoperto (in realtà l’avevo gia visto di sfuggita qualche giorno come plugin per Symfony) un altro ottimo framework, Blueprint.

Comunque rimaniamo in tema, per chi non sapesse cos’è un grid layout (io non l’ho sapevo assolutamente….) vi raccomando di leggere quest’ottimo articolo del W3c, un titolo poco originale “Passato, presente e futuro dei layout in CSS”, dove si passa dal CSS1 fino ad arrivare appunto ai grid layout proposti per il CSS3, veramente un ottimo articolo.

I grid layout sono praticamente un evoluzione delle tabelle (eh si, son tornate), solo concettualmente nel senso della divisione in righe e colonne della pagina, ma con degli indubbi vantaggi e un occhio di riguardo a chi di mestiere fa il web designer.

Inoltre non perdetevi anche questo articolo di Laburno, dove viene implementato passo passo un grid layout utilizzando il framework Blueprint.

Altri articoli interessanti:

• Cutting and sewing grid-based design: Part 1, working with other people’s comps
• Grid-based design: Part 2, Designing blog theme templates.

Wordpress Plugin: Wp-image-dropshadow (ombre sulle immagini)

Ho appena creato un prototipo di un plugin, al momento sono solo poche righe di codice (giusto delle inclusioni), che permette di aggiungere dinamicamente con css e Javascript le ombre sulle immagini (come questa che vedi nel post).

Non so se gia esiste un plugin che faccia questo lavoro, ma non l’ho trovato (non è che ci abbia perso molto tempo), quindi non ho perso tempo e ne ho creato uno.

Non ho avuto tempo di creare una piccola interfaccia di amministrazione, ma nei prossimi giorni lo farò senz’altro, per adesso il funzionamento è molto semplice, basta copiarlo nella dir dei plugin ed attivarlo.

Poi, bisogno modificare il file js/shadyhotness.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Behaviour.register({
 
  '.PostContent img' : function(element) {
 
    var wrap1 = document.createElement("div");
 
    wrap1.className = "wrap1";
 
    wrap1.setAttribute("class", "wrap1");
 
    var wrap2 = document.createElement("div");
 
    wrap2.className = "wrap2";
 
    wrap2.setAttribute("class", "wrap2");
 
    var wrap3 = document.createElement("div");
 
    wrap3.className = "wrap3";
 
    wrap3.setAttribute("class", "wrap3");    var outerNode = element.parentNode;
 
    outerNode.insertBefore(wrap1, element);
 
    wrap1.appendChild(wrap2);
 
    wrap2.appendChild(wrap3);
 
    outerNode.removeChild(element);
 
    wrap3.appendChild(element);
 
  }
 
});

La riga incriminata è la 2, esattamente “.Postcontent img”, cioè tutte le immagini che sono dentro la classe .PostContent (che rispecchia il mio CSS), quindi cambiare “.Postcontent” con la tua classe CSS che racchiude i post.

Vi prometto che farò un interfaccina di amministrazione al più presto.

Il codice è stato preso da: http://sporkmonger.com/2006/01/15/the-shady-hotness

Il plugin utilizza lo script Behaviour.js. dove potete trovare tutta la documentazione.

Potete scaricare il plugin qui: wp-image-dropshadow.tar.gz

Attendo vostri feedback

I miei delicious dal 18th Agosto al 19th Agosto

Bookmark dal 18th Agosto al 19th Agosto:

• tutorial photoshop su youtube -
• 21 temi per wordpress -
• 10 temi per wordpress -
• temi per wordpress -
• Free Software Sticker Book -
• Code Snippets - find durable events between two dates -
• tutorial photoshop su youtube -
• 21 temi per wordpress -
• 10 temi per wordpress -
• temi per wordpress -
• Free Software Sticker Book -
• Code Snippets - find durable events between two dates -

Cerca