immagin top

19.1.12

CSS: bordi effetto 'cucito'

19.1.12

Quello che ho scovato oggi su designzzz.com è un altro effetto fantastico da dare con il CSS.
Il foglio di stile si sta rivelando un vero e proprio alleato, se non voglio ricorrere al background ;) .
Il suo nome è 'stitched' (sarà cucito probabilmente, ma tanto quel che conta è il risultato XD ) e l'effetto che viene fuori ve lo mostro
Se vuoi sapere come si fa ad ottenere questo effetto 'cucitura' tanto simpatico continua a leggere.
Se vuoi sapere come si fa ad ottenere questo effetto 'cucitura' tanto simpatico continua a leggere.


Visto che forza????????
Dunque per avere l'effetto 'cucito' nei vostri 'div' devi semplicemente copiare e incollare questo codice nel tuo foglio di stile:

.stitched {
padding: 5px 10px;
margin: 10px;
background: #f29a79;
color: #fff;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 3px;
-moz-box-shadow: 0 0 0 4px #f29a79;
-webkit-box-shadow: 0 0 0 4px #f29a79;
box-shadow: 0 0 0 4px #f29a79;
}

Poi il tuo 'div' con il selettore 'class' stitched inseriscilo nel post, o nella sidebar se all'interno del gadget HTML/Javascript, semplicemente copiando e incollando il codice, e sostituendo TUO CONTENUTO con ciò che vuoi che appaia al'linterno.

esempio
<div class='stitched'> TUO CONTENUTO </div>
Se il div esiste già aggiungi solo class='stiched', come da esempio qui sopra.

La prima cosa che mi è venuta in mente è che ci si potrebbe fare un menu carinissimo con questo effetto!
Intanto lo uso l'ho usato per 'incorniciare' i miei 'consigli' .
E tu che ne pensi???

AGGIORNAMENTO

Prima il codice non funzionava,e mi dispiace, per una stupida mia dimenticanza... in pratica anziché scrivere stitched, ho scritto stiched, scordando quindi una T.
Sorry!!!

14 commenti:

  1. ciao questo effetto mi piace molto, forse perchè mi piace cucire! complimenti sei davvero molto brava.Divento tua follower così è la volta buona che imparo qualcosa! ciao a presto

    RispondiElimina
  2. Grazie per esserti unita alle altre :D Io ho fatto altrettanto, è molto interessante il tuo blog ;)
    A presto!

    RispondiElimina
  3. ma il div class poi dove lo devo mettere? non sono mica riuscita io :(

    RispondiElimina
    Risposte
    1. Hai ragione, devo modificare il post (che è vecchiotto) e indicare meglio come inserirlo...

      Elimina
    2. Ciao Sabrina! Ricopia e reincolla il codice, perchè avevo scordato di scrivere una T nel codice e non usciva nulla ;)

      Elimina
  4. Ciao sono in attesa anche io della modifica del post per sapere dove inserire il div. Grazie!!

    RispondiElimina
    Risposte
    1. Ciao! Guarda il div lo puoi inserire anche nel post, o nella sidebar se devi, semplicemente copiando e incollando il codice, e sostituendo TUO CONTENUTO con ciò che vuoi che appaia al'linterno :)

      Elimina
  5. ma che cos'è un div? ho preso i primi post ma non riesco comunque a capirti

    RispondiElimina
    Risposte
    1. Un div è un elemento dell'HTML che racchiude in sè altri elementi...una sorta di scatola nel quale vengono inseriti i contenuti del blog ;)

      Elimina
    2. ah ok grazie :)
      ma ilfoglio di stile dove lo trovo?

      Elimina
    3. Puoi vedere questo mio video tutorial in cui spiego dove inserire i codici nel CSS (ovvero il foglio di stile) ;)

      Elimina
  6. Bellissimo effetto e grazie mille! Inserito!

    RispondiElimina
  7. bellissimo l'ho provato sul mio blog e funzionaaaaa!!! Grazie

    RispondiElimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*