Qualche pizzo per quest'inverno

Buongiorno! Qui è arrivato il freddo, accompagnato da un vento gelido.
Quest'anno l'autunno non l'ho quasi percepito: il clima è stato proprio strano {lo so, lo so: non ci sono più le mezze stagioni}! Che sia anche per questo che sono così indietro coi miei progetti natalizi?
Basta, è proprio tempo che mi dedichi a qualche creazione invernale e festiva!

Intanto vi mostro un paio di orecchini che in questi giorni freddissimi mi stanno piacendo molto, per la loro eleganza e leggerezza.

Sono fatti di pizzo, sufficientemente rigido da non aver richiesto di essere inamidato. Adoro questo grigio perla, leggermente cangiante. Ho deciso di aggiungervi tre piccoli strass per renderli ancora più luminosi.
Vorrei farne molti altri su questo genere, spero di mostrarveli presto!

Un saluto da Bailey, che ora ha 4 mesi ed è una gatta grande e birichina!

Come scegliere lo sfondo del blog #4

Eccoci al post conclusivo sui background!
Dopo aver valutato cosa vogliamo per il nostro sfondo, arriva il momento di implementare il tutto.
Anche qui mi rivolgerò principalmente agli utenti Blogger, ma il linguaggio CSS vale ovviamente per qualsiasi piattaforma.
Il designer modelli di Blogger ci lascia compiere facilmente quasi tutte le operazioni; tuttavia a volte questo sistema smette “misteriosamente” di funzionare. Questo può accadere per vari motivi: forse perché il template che abbiamo scelto non lo supporta appieno, oppure per via di modifiche che abbiamo apportato “a mano” al codice, che sono andate a sovrascrivere i selettori che normalmente lo fanno funzionare.
Che fare allora? Rassegnarsi a non poter più cambiare sfondo? Assolutamente no! Modificare il codice che regola il background dall'editor HTML è facile... Però ricordate di fare il backup del modello prima di metterci mano!

Andiamo su “Modifica HTML”, premiamo CTRL+F e nella casella di ricerca che spunterà scriviamo body. Scorriamo finché non troviamo un codice CSS simile a questo:

body {
font: normal normal 15px Arimo;
color: #333333;
background: #ffffff none no-repeat scroll center center;
}

Il vostro codice sarà un po' diverso, ma sicuramente ci saranno il selettore body e il suo attributo background. Questo è quello che ci interessa.
Prima di apportare le modifiche, cerchiamo di capire cosa regolano i valori che vediamo nell' esempio.

• #ffffff: è il codice che regola il colore di fondo. È composto da 3 o 6 lettere e/o numeri preceduti dal cancelletto (#) e nel mio caso si tratta del bianco.
• none: non ci sono immagini. Qualora avessi un'immagine di sfondo, al posto di questo valore ci sarebbe un link.
• no-repeat: sempre se avessi un'immagine, con “no-repeat” essa non si ripeterebbe per la finestra del browser. Se volessi utilizzare un pattern, che quindi deve ripetersi per avere senso, avrei dovuto scrivere repeat.
• scroll: se avessi un pattern, con questo valore lo sfondo scorrerebbe insieme al contenuto quando scendiamo con la barra di scorrimento o con la rotella del mouse. Se invece scrivessimo al suo posto fixed, questo non succederebbe: il pattern continuerebbe a ricoprire l'intera finestra, ma scorrendo in giù si muoverebbe solo il contenuto. Può essere un effetto gradevole, dando una sorta di tridimensionalità al blog.
• center center: specifica, sempre nel caso in cui ci sia un'immagine, in quale modo dev'essere posizionata, sia orizzontalmente che verticalmente. In questo caso sarebbe centrata nello schermo (salvo poi ripetersi con l'attributo “repeat” e quindi occuparlo tutto). Altri valori che si possono usare sono top, bottom, left e right.

Ora, se vogliamo un colore solido di sfondo, cerchiamo il codice corrispondente alla tinta che desideriamo. Potete farlo qui: una volta trovato il colore, copiate e incollate il valore al suo posto nel codice CSS.
Se invece vogliamo un'immagine o un pattern, per prima cosa dobbiamo caricarla/o da qualche parte in rete per ricavarne un link diretto, così come abbiamo visto nel post precedente.
Ora, al posto di none, scriviamo url(“”) e dentro le virgolette incolliamo il nostro link. Oppure, se già abbiamo un'immagine nel modello ma vogliamo cambiarla, semplicemente cambiamo il link.
Finito!
Ecco un esempio di come potrebbe essere il CSS di uno sfondo con pattern:

background: #ffffff url(“http://yoursite.com/image.jpg”) repeat fixed top center;

Questo è tutto! Spero di essere stata esaustiva ma non troppo criptica per chi non si sente “esperto”.
Per qualsiasi dubbio, lasciatemi un commento!

Lezioni precedenti:
1. Cenni generali.
2. Colori solidi e pattern: cosa fare e cosa evitare.
3. Come usare un'immagine che occupi l'intera finestra del browser come sfondo.

Di ritorno con un nuovo look

Finalmente! Queste due settimane sono state un vero caos, tra salute altalenante (solo fastidi, niente di serio) e tante faccende da sbrigare... Ma ora posso dire di aver terminato il restyling del mio blog!
Mi scuso immensamente per come sono sparita: non ho risposto ai commenti per tempo, non ho visitato i blog che seguo abitualmente, non ho cazzeggiato su Pinterest (… vabbè... fatti miei questi XD). Il fatto è che ogni minuto libero che ho trascorso al pc l'ho voluto dedicare a questo progetto, altrimenti me lo sarei trascinato incompleto nei secoli dei secoli.
Come forse ho già accennato, trovo assai faticoso lavorare per me stessa: sono una perfezionista dai gusti estremamente variegati, temo che se dovessi fare da cliente a qualcun altro che si occupa di design diventerei il suo incubo peggiore ;)

Ho deciso di andare veramente sul super, iper minimale, curatissimo nelle proporzioni e nei dettagli. Questo mi fa sentire rispecchiata nel mio accenno di disordine compulsivo ossessivo!...
Avrei voluto usare più forme, ma nessuna bozza mi convinceva. Alla fine ho deciso che di me avrebbero continuato a parlare i colori, che sono complementari ma allo stesso tempo molto armonici, e il mix di font senza grazie e corsivo, a rappresentare il mio amore per il design pulito, ma anche per l'handmade. Due colori e due font possono benissimo parlare della personalità del nostro sito/blog, non è detto che per forza servano immaginette, grafichine e grafichette! Poi ovviamente qualcosa c'è, come il disegno del mio header, che ho mantenuto, e la freccina del pulsante "torna su". Qualche forma stondata e alcuni tratteggi completano l'insieme.

Ho anche riorganizzato il menù di navigazione e creato delle etichette coerenti (spero), dato nuova vita alla pagina Chi sono e messo i contatti più in evidenza. A volte rischiamo di trascurare queste due pagine, ma si tratta di un grosso errore! Invito chiunque abbia un sito o un blog a renderle complete e accattivanti, essendo spesso le prime pagine che un lettore visita.

Cercando di muovermi sempre più in direzione social e SEO-friendly, ho unificato l'account Blogger con quello di Google+: credo di aver fatto le cose per bene e non dovrei essere diventata una no-reply blogger, ma qualora vi accorgeste di qualcosa di strano, fatemelo sapere! Ho sempre sottovalutato e trascurato G+, ma più si va avanti e più diventa inevitabile lo scontro, per guadagnare autorevolezza sui motori di ricerca: mi ci devo abituare...

Che altro dire? Spero che le mie fatiche abbiano dato buoni frutti, se vi va fatemi sapere cosa ne pensate!
E adesso passo a visitare i miei amati blog...

Con questo post partecipo al Linky Party by Topogina:

Blogpal+Swap di ottobre: la mia esperienza!

Anche ottobre è volato via e con esso si è concluso il primo appuntamento BlogPal+Swap organizzato dalla fantastica Alex di C'è Crisi.Questo evento ha fatto incontrare me e Barbara, del blog Manimente. Dalla nostra collaborazione sono nate due interviste e due tutorial gemellati a tema Halloween.

Non abbiamo strafatto, non abbiamo azzardato migliaia di progetti complicati, ma è stato bello anche per questo: nel rispetto del nostro tempo e della nostre personali modalità di espressione creativa, abbiamo dato vita ad un rapporto che ci ha arricchite come blogger e che molto probabilmente si protrarrà anche in futuro!

Quando è arrivato il momento dello swap, a entrambe è venuto spontaneo chiedere all'altra un indizio su cosa avrebbe gradito ricevere...
Ecco dunque cos'ho realizzato per Barbara:

Questo è il nuovo header per il suo blog.
Trattandosi di un regalo e non di una commissione, non c'è stata una bozza che abbiamo discusso insieme: mi sono limitata a chiedere quali fossero le sue preferenze in fatto di colori, anche in vista di un futuro restyling del blog.
Barbara mi ha detto di amare gli azzurri, ma che forse era più orientata a tonalità neutre. Ho quindi deciso di cercare un compromesso...
Per la grafica, ho voluto rappresentare a tuttotondo le passioni dell'autrice di Manimente: creatività artigianale fatta di feltro, di pittura country e di scrapbooking... cercando, al contempo, di mantenere l'insieme minimale e pulito.
Quando Barbara mi ha detto che l'header le era piaciuto e che l'aveva implementato sono stata davvero felice! Questo progetto è stato un po' un salto nel buio per me, senza bozze da rivedere e approvare.
Via mail ci siamo anche scambiate qualche consiglio su come migliorare grafica e organizzazione dei contenuti e, vedendo il blog di Barbara dopo il restyling, sono stata davvero fiera di lei perché è stata bravissima e ha fatto un bel balzo in avanti: passate a trovarla e giudicate anche voi!

Ma veniamo alla parte migliore (almeno per me!): ieri pomeriggio è arrivato il pacchettino di Barbara.
Sono rimasta davvero di stucco: io le avevo chiesto qualcosa che potesse contenere un'immagine della mia micetta Bailey e lei mi ha mandato un portafoto a dir poco fantastico...

Ha tutto quello che mi piace: è shabby ma minimale, delicato nei colori e c'è persino qualche pois... Tutto curato nei dettagli, un lavoro bello e fine. È una creazione che percepisco esser stata creata appositamente per me e questo le conferisce un valore aggiunto enorme...
Non vedo l'ora di sfruttarlo! Ho pensato che mi piacerebbe metterci una foto non solo con Bailey, ma che la ritragga insieme a me e al mio compagno. Un piccolo ritratto di famiglia... :)
Urge qualcuno che ce la scatti, questa foto! Spero di mostrarvi la cornice con la sua immagine, sul mio comodino, quanto prima...

Ringrazio di cuore Barbara e Alex per la bella esperienza.
Non parteciperò all'edizione di novembre di BlogPal, né probabilmente a quella di dicembre, per via dei troppi progetti che già ho in ballo (ne uscirò mai?), ma spero vivamente di rifarmi con gennaio!

Vi consiglio di partecipare almeno una volta perché sono davvero esperienze che arricchiscono e creano legami... però fatelo con serietà e rispetto nei confronti della vostra abbinata: se pensate di non farcela, o se avete troppe altre cose per la testa, lasciate perdere o rimandate a un altro mese...

Come scegliere lo sfondo del blog #3

Buongiorno! Proseguiamo con le nostre lezioni sugli sfondi per il nostro blog.

Abbiamo già visto qualche cenno generale e qualcosa di più specifico su tinte unite e pattern, ma oggi mettiamo più carne al fuoco: scopriremo come impostare come sfondo un'immagine che copra l'intera finestra del browser, senza ripetersi e senza lasciare “buchi”.
Ecco un esempio:

Purtroppo non ho ancora molta confidenza con Wordpress e per quanto riguarda l'interfaccia il mio discorso si rivolgerà agli utenti Blogger, ma il codice CSS che riporto ovviamente vale per qualsiasi piattaforma.

La premessa è che vi serve una buona immagine di partenza. Dev'essere sufficientemente leggera (cercate di non superare i 300 Kb), ma con una buona qualità (non deve risultare sgranata) e con delle corrette proporzioni (per evitare che prendendo le proporzioni della finestra del browser diventi “allungata” e deforme).

Blogger consiglia di utilizzare un'immagine 1800x1600 pixel, soddisfacente compromesso per soddisfare le risoluzioni dello schermo più comuni. Vi occorre, quindi, un'immagine con proporzioni larghezza/altezza di questo tipo, che potete ottenere abbastanza facilmente se avete un po' di confidenza con un qualsiasi programma di grafica.

A proposito, una regola generale per la gestione delle immagini digitali: mai, mai e poi mai allargare un'immagine piccola per portarla ad una dimensione più grande. Risulterebbe sfocata e “quadrettosa”, assolutamente sgradevole.

Solo e se disponiamo di un'immagine adatta e ottimizzata come sopra possiamo procedere, ma prima facciamo il backup del nostro modello!

Vi consiglio di aprire un nuovo blog di prova e iniziare da lì per vedere se il risultato vi soddisfa, così da non dover pasticciare sul vostro blog pubblico.

Per il mio esempio sono partita da uno dei modelli Travel di Blogger, che dispone già di uno sfondo semitrasparente per i contenuti, rendendo più d'impatto l'immagine senza sacrificare la leggibilità.

La prima cosa da fare è caricare sul web la vostra immagine di sfondo, in modo da ricavarne un link diretto. Potete farlo su siti come Photobucket, oppure caricarla su un post stesso del vostro blog, che però non pubblicherete e salverete come bozza (io ad esempio faccio sempre così).

L'importante è che ricaviate un link.

Ora dall'interfaccia di Blogger andate su Modello → Personalizza → Avanzato → Aggiungi CSS.

Copiate questo codice:

html, body {
background: url('sfondo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Ora sostituite 'sfondo.jpg' col link alla vostra immagine (mantenendo le virgolette) e cliccate su “Applica al blog”.

Ta-daaaan, finito!

La vostra immagine si ridimensionerà a seconda della dimensione della finestra in cui è visualizzata, quindi risulterà sempre intera, senza ripetersi in maniera antiestetica.

Attenzione: chi naviga con browser obsoleti, come Internet Explorer versione 6 o 7, potrebbe non visualizzare correttamente il vostro background: essi, infatti, non supportano questo tipo di funzionalità CSS {fatevi un favore se li usate: passate a Chrome o Firefox!}.
Sta a voi scegliere se rischiare che qualche potenziale lettore che utilizza questi vecchi browser non veda il vostro sfondo.

Comunque, se utilizzate questo sistema e riscontrate problemi, vi prego di farmelo sapere...

Altre lezioni:

1. Cenni generali.

2. Colori solidi e pattern: cosa fare e cosa evitare.
4. Implementazione.

Con questo post partecipo al Linky Party by Topogina:

Medaglietta per gatto... con la pastina!

Buongiorno a tutti! Finalmente è arrivato il tanto atteso ponte: io e il mio compagno stiamo per partire alla volta di Savona per passare il weekend coi nostri amici. Certo, senza raffreddore sarebbe stato meglio...

La piccola Bailey sarà ospite dei miei suoceri.

Non sono particolarmente contenta di lasciare la mia micetta per tre giorni, per quanto sappia che sarà in ottime mani...

Gradualmente ho abituato Bailey a portare collarino e medaglietta, bellissimi, entrambi fatti a mano e acquistati su Etsy.

Collarino acquistato da FunkyMutt. Non credo che da questo si deduca che il mio programma preferito è Doctor Who...

Solo che la sua medaglietta attuale riporta il mio numero di telefono di casa: poco utile se siamo via!

Medaglietta da FetchAPassionTags. Parte dei proventi di questo negozio va a Rescue worldwide, il che mi sembra un buon motivo per passare da loro! La chiavetta è una mia aggiunta.

Allora ho pensato di creargliene una seconda con le mie mani, contenente il recapito dei miei suoceri.

A questo scopo ho usato la pasta polimerica, che ho “stampato” con nome e numero di telefono con strumenti a dir poco professionali. Udite udite: la pastina!

Quando vidi questo tutorial su Pinterest pensai “peccato che da noi 'ste americanate di pasta non si trovano”, e invece la pastina alfabeto l'ho trovata eccome, per puro caso, mentre facevo la spesa!

Ecco quindi il risultato...

Sulla medaglietta più scura c'è il numero di telefono dei miei suoceri, che per ovvi motivi di privacy non ho fotografato.

… e la mia creazione indossata dalla modella...

Che ve ne pare? Avrei voluto decorarle coi pigmenti per far risaltare meglio le letterine, ma ero in dubbio sulla loro sicurezza nel caso in cui Bailey cercasse di morderle... Se avete consigli a riguardo, fatemi sapere!

Vi auguro di passare un sereno weekend!