Crea sito

  

  

 

ೡ Ciao e grazie di esser qui!......Nel mondo di Lily of
the Valley non poteva mancare una paginetta dedicata all'Amore!
Amore per gli animali per la famiglia per la natura e per il country!
Tantissime immagini,gif,sorpresine, quadretti d'appendere e ricettine
da portare sempre con te e poi script e pillole di style! *__*

 

 

 

 


Immagino ti sarai chiesto da dove provengono le immagini che utilizzo... La maggior parte sono opera mia! Prendo gli schemi del punto e croce in quanto non sono molto abile come pittrice e con tanto impegno e volontà compongo,pixel dopo pixel la figura che ho scelto ed eventualmente procedo con qualche animazione! Mi capita però alle volte d'imbattermi nel Web in un'immagine a cui non posso resistere........... controllo allora i permessi e con l'editor grafico open source GIMP ritaglio col lazo o con la forbice magica la sezione che mi piace! Clicco al centro della selezione, copio ed incollo in un foglio nuovo a sfondo trasparente.....Tutto qui! ^__^

 

In questa pagina avrai sicuramente notato degli effetti speciali,alcuni ottenuti con degli script,altri semplicemente con i fogli di stile! Partiamo proprio da questi ultimi. Due esempi sono già presenti qui dove stai leggendo....la scrollbar colorata *__* con lo sfondo di un'immagine a quadretti e con dimensioni più sottili di quelle di default. Ebbene tutto ciò è ottenuto grazie ai comodissimi CSS!
I codici css per scrollbar:
div.scrollbar2 {
height : px;
width :px; overflow-y : scroll;
margin-left :auto;
margin-right : auto;
}
#style-2::-webkit-scrollbar-track { /*Sfondo scroll*/
background-image:url(' URL IMMAGINE');
border-radius : px;
background-color : #E4FDE1;
}
#style-2::-webkit-scrollbar { /*Angoli scroll*/
width : px;
background-color : #FFAA82;
border-radius : px;
}
#style-2::-webkit-scrollbar-thumb { /* scroll*/
background-image:url('URL IMMAGINE');
border-radius : px;
background-color :#f9d350;
}

Come richiamarli nella pagina html:
<div class="scrollbar" id="style-2" > <table style="width:200px; height:90px;" > <tr> <td>
Scrivi Scrivi Scrivi Scrivi
Scrivi Scrivi Scrivi Scrivi
Scrivi Scrivi Scrivi Scrivi
Scrivi Scrivi Scrivi Scrivi
Scrivi Scrivi Scrivi Scrivi
Scrivi Scrivi Scrivi Scrivi
Scrivi Scrivi Scrivi Scrivi
Scrivi Scrivi Scrivi Scrivi
</td> </tr> </table> </div>

Facilissimo, di grand'effetto e sicuramente rende più graziosa la tua pagina web,vero?

 

           



Il secondo effetto di cui ti parlavo lo trovi qui a lato,mi riferisco all'immagine della bambina col cesto di mele...affiancata al contenitore della scrollbar! Com'è possibile? Ovviamente con i CSS e questo è il codice:
<img style="float:right;" src="url immagine " alt="">

Puoi scegliere right come ho fatto io,oppure left!

 

           



Ancora un'effetto (poi mi fermo ^-^) ottenuto con i fogli di stile è il div inclinato come quello qui sopra che contiene l'insegna del menu!
I codici css sono i seguenti:
div.rotate_right
{ width:84px;
height:64px;
margin-left:10px;
padding:0px 0px 0px 0px;
border:0px solid #BFBFBF;
background-image:url(' URL IMMAGINE ');
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-webkit-transform:rotate(-8deg); /* Chrome, Safari, Opera */
transform:rotate(-8deg);
}

Per una rotazione verso sinistra il valore di rotazione deve essere positivo,cioè invece che -8 devi mettere 8 !
Il codice da richiamare nella pagina html è questo:
<div class="rotate_right"> </div>

Avrai sicuramente notato il carretto con i fiori ed il miele...sei riuscito a spostarlo? No?? Ma dai, come faresti con uno vero,dal manubrio! Scherzi a parte il div che contiene quell'immagine ma che sopratutto puoi posizionare dove vuoi e spostare esattamente come i post-it del tuo ufficio, si ottiene con uno script coadiuvato dai soliti css!

Dunque...tra <head> e </head> devi inserire questo codice ed i css:
<script type="text/javascript" src="http://lilyofthevalley.altervista.org/script_utili/Drag/dom-drag.js"></script>
<style type="text/css">
#root {
background-image: url('URL IMMAGINE');
position:absolute;
height:128px;
width:296px;
border:0px solid #333;
}
#handle {
border:0px solid #333;
margin:2px;
padding:1px;
width: 60px;
height:70px;
font-weight: bold;
} </style>

Questi i tag per richiamarli tra <body> e </body>:
<div id="root" style="left:60px; top:100px;">
<div id="handle"></div>
</div>
<script language="javascript">
var theHandle = document.getElementById("handle");
var theRoot = document.getElementById("root");
Drag.init(theHandle, theRoot);
</script>



Le ricettine,piccole e graziose da trasferire sul tuo pc,tablet o telefono! Purtroppo ancora non ho il programmino giusto per fartele compilare in modo autonomo quindi ho riportato alcune ricette famose che si trovano in giro. Se hai piacere di averne una tua su uno dei miei sfondi,ma non sei pratico di editor di grafica o comunque di pc,posso compilartela io! Mi puoi contattare tramite la chat-box qui a fianco oppure privatamente dalla pagina contact.Il link lo trovi proprio qua sopra,nel menu di navigazione!

  

  

  


  

  

  

ೡ Dopo tanto parlare finalmente è arrivato il momento delle sorpresine!
Scegli il cuoricino amoroso che più ti piace ed il 14 Febbraio 2015 riceverai
un dolcissimo regalo! Se ti piace l'idea e vorresti preparare anche tu dei regali
trovi lo script nella sezione dedicata ad Halloween!

  

 

 

 

 

ೡQui sotto trovi le ricettine di cui ti parlavo in bacheca!
Io non consiglio di stamparle ma ovviamente decidi poi tu...
Passa il mouse sopra una delle ricette in tabella qui sotto per ingrandirla
e se vuoi trasferirla sul tuo Pc basta un click col pulsante destro e salvi!

  

 

  

  

 

 

 

Se vuoi linkarmi,preleva
la mia country doll!


  

  

  

 

 


 

 



e...

  

Quanto ti è piaciuta la
sezione San Valentino?


  Your Rating: star ratingstar ratingstar ratingstar ratingstar rating  [  ]
  Rate this page:

  





Back Top