Neige sur le blog

Publié le par Vger

Mettre de la neige sur votre blog
(TOUT Niveaux : Confiance, Privilège, Premium)


Il est possible de "mettre de la neige" sur votre blog sans utiliser de javascript.
Cela n'est pas la panacée, car cela crée quelques petits inconvéniants (que je vais survoller ici avec vous) :
Le premier c'est que cela "alourdi" le chargement de votre page (aucune idée de l'incidence sur le "Blog Rank")
Si vous avez déjà beaucoup de gif et/ou d'animations (textes défilant), il vont fonctionné plus lentement (et votre neige aussi)
En deuxième, la neige va passer "derrière" vos textes et images
En troisième dans certain cas il va falloir ruser car si vous avez déjà mis une url dans votre "body" impossible de rajouter en plus l'url pour la neige... (Le forum Design et feuille de style vous aidera au cas par cas si besoin ;))
Pour les fonds "Neige" que je présente, deux sont "transparent", les trois autres ont leur propre fond (blanc)
Je vous conseille fortement de les enregistrer !
Pourquoi ?
Car si vous faite un lien direct et que je déplace le gif, que je l'efface, etc... et bien vous le perdrez aussi sur votre blog ;)
1) clic droit "Enregistrer l'image sous..."
2) Ensuite chargez l'image dans un sous dossier d'Over-blog (pourquoi un sous dossier ? Pour ne pas perdre un album photo)... si vous ne savez pas comment faire consulter la FAQ : Importer des photos
Les deux avec fond "transparent",
ces deux images permettent de garder une couleur de fond ou dans certain cas de se mettre par dessus une image de fond (comme ici [Voir aussi l'article d'accueil])...

Neige (anim") pour fond d'écran 01 - http://c.s.s.over-blog.com/   Neige (animé) pour fond d'écran 02 - http://c.s.s.over-blog.com/

Les trois avec le fond blanc :
ces trois images vont donc cacher dans tout les cas votre fond :

Neige (animé) fond blanc 01 - http://c.s.s.over-blog.com/   Neige (animé) fond blanc 03 - http://c.s.s.over-blog.com/  Neige (animé) fond blanc 02 - http://c.s.s.over-blog.com/

Complément d'infos :
Pour mettre la neige dans votre CSS :
Si dans votre ligne body vous n'avez pas encore mis de "background-image" pas de probleme vous rajoutez ceci (après le dernier ; et avant } ) :

background-image:url(http://idata.over-blog.com.mon-fond.gif); background-repeat:repeat; background-position:center; background-attachment:fixed;

Notes :
http://idata.over-blog.com.mon-fond.gif à corriger par l'adresse ou est votre image (nan sérieux, j'en ai déjà eu me dire ca fonctionne pas ! :o/  )

Si vous avez un "background" ou un "background-color" il restera en place et la neige "passera" dessus.

Si vous avez un modèle de la série "200" vous pouvez jouer à mettre la même ligne de comande dans "#main" si vous n'y avez pas mis d'url

Vous pouvez aussi ne mettre la commande que dans certains articles, l'article d'accueil, le haut de page (entête), le bas de page (pied de page), comme je l'ai fait, mais ne perdez pas de vue le poids final...
Pour ce faire la ligne de commande html est en deux partie et est à mettre en mode "Source" ; en tout début (avant toutes les ligne déjà présente) :
<div style="background-image: url(http://idata.over-blog.com/mon_image.gif);">
et en fin :
</div>

Vous pouvez aussi mettre uniquement dans les articles, les modules, vos com, etc... directement via le CSS (même ligne de commande que donnée dans le "body" mais à mettre dans "l'identifiant" désiré


Publié dans Noël

Commenter cet article

omni tech support 18/12/2014 13:38

I liked the way in which you created the snow in the blog. This is all the CSS wonder effect. I am going to create this in my blog. The url that you have attached with the article have helped me a lot.

L'équipe LTV 14/12/2010 16:40



display: inline;
    padding: 0;}

.box-content ul {    margin: 10px 0;}

.box .box-footer {display: block;}

.box.presentation {    line-height: 1.4em;}

.box.presentation a, .box.presentation a:hover {
    text-decoration: underline;
    border: 0;
    padding: 0;
    background: none;}

.box.presentation h3 {
    margin: 5px 0pt;
    text-transform: uppercase;
    font-size: 1.3em;}

.box.presentation h3 a {    text-decoration: none;}

.listAll em {
    font-style: normal;
    text-transform: capitalize}

.listAll a {text-decoration: underline;}
/* calendrier */

.box.calendrier {
    padding-left: 0;
    padding-right: 0;}

.box.calendrier .box-titre {
    padding-left: 15px;
    padding-right: 15px;}

#cl_1_0 .box{width:100%;}

.calendarTable1 {
    width: 100%;
    font-size: .9em;}

.calendarTable1 {    padding: 0;}

.calendarTop1 {    background-color: #1b1b1b;}

.calendarHeader1 {background-color: #1b1b1b;}

.calendarDays1 {
    background-color: #1b1b1b;
    color: #E3E3E3;}

.calendarTable1 {    background: transparent;}

.calendarToday1, .calendarToday1 a, .calendarToday1 a:hover {color: #000;}

/* recommander */
#miniGlobal #divNewsletter h2.center{
    margin:10px 10px 0 10px;
    padding: 0 0 5px 0;}

#divNewsletter {
    margin: 0px auto;
    padding: 5px 0;}

#divNewsletter h2{
    border-bottom: 1px solid #000000;
    margin-bottom: 0px;}

#divNewsletter form{
    border-top: 1px solid #2b383f;
    width: 554px;
    margin: 0 auto;
    padding: 0;}

#divNewsletter form{    padding-bottom: 10px;}
#divNewsletter form p{    margin: 15px 0;}
#divNewsletter form .floatR{margin: 0 0 10px 0;}

/*    overflow: hidden;*/
.linkRecomm {    text-transform: capitalize;}

/* album */
.box.album .center, .box.aleaim .center {    text-align: center;}

/* syndication */
.w3c li a {
    border: 0;
    padding: 0;}

.w3c li a:hover {    background: transparent;}
/* recherche */

.box.recherche input {    padding: 3px 4px;}

.box.recherche input.button {
    padding: 2px 5px;
    border-width: 1px;}
/* @end */

/* @group comments */
.afterReactions .spanAddComment, input.button, .afterReactions a {
/*    color: #FFF;*/}

.spanLinkComment {
    padding-left: 3px;}

.commentMessage {
    margin: 0;
    padding:5px;
    background-color: #292929;
    font-size: 1.1em;
    line-height:normal;
    border: 0;}

.commentOption {
    font-size: 10px;
    text-align: right;
    margin-bottom: 1px;
    padding: 1px 10px 2px 10px;
    color: #9c9c9c;}

.commentOption a {color: #9c9c9c;}

.responseMessage, .responseOption {    margin-left: 20px;}


h2.h2commentMessage {
    margin: 0;
    font-size: 16px;
    color: #FFF;}

#cl_1_1 .column_content div em{display: inline;}

/*
.afterReactions .spanAddComment {
    font-size: 1.1em;
    text-transform: capitalize;
    font-weight: bold;
    padding: 3px 5px;}
*/

/*.afterReactions .spanAddComment a {    text-decoration: none;}*/

#miniGlobal .center {margin: 10px;}

#miniGlobal h2 {font-size: 1.6em;}

#img_key {vertical-align: middle;}
/* @end */

/* @group list all */
.resumeArticle {    margin-top: 5px;}

.articles{    font-family: Tahoma, Arial, Helvetica, sans-serif;}

.listArticles {
    font-size: 1.1em;
    line-height: 1.5em;
    padding: 10px 0;
    border-bottom-style: solid;
    border-bottom-width: 1px;}

.listArticles a, .listArticles a:hover {
    font-weight: bold;
    text-decoration: underline;}

.listArticles a:hover {
    font-weight: bold;
    text-decoration: underline;}

.listArticles a, .listArticles a:hover {
    font-size: 1em;
    font-weight: bold;
    text-decoration: underline;}
/* @end */

/* @group misc */
#ln_2 {
    zoom: 1;
    background-repeat: no-repeat;}

#cl_1_1, #cl_1_2, #cl_1_0 {position: relative;}

#debug_hidden {display: none;}

.GcheTexte {
    float: left;
    margin: 3px;}

.DrteTexte {
    float: right;
    margin: 3px;}

.CtreTexte {
    margin: 3px auto;
    display: block;}

.hitcitation {
    font-style: italic;
    text-align: justify;
    padding: 5px 20px;
    background: transparent !important;}

.hitencart {
    text-align: justify;
    font-weight: bold;
    margin: 5px 0px;
    padding: 5px 5px;}

.hitimportant {
    font-weight: bold;
    font-weight: bold;
    font-size: 120%;}

.hitperso1 {font-style: italic;}

.hitperso2 {font-weight: bold;}

#legals {padding: 20px 0;}
/* @end */

/* @group list all */
.resumeArticle {background: transparent;}

.listArticles {
    border-color: #3D3D3D;
    padding: 10px;
    margin: 0;}

li.community_list {    padding: 5px 10px;}
/* @end */

/* @group pagination */
.pagination {padding: 15px 0px;}

.pagination b.currentPage {color: #FFF;}

.nextPage, .textNext, .previousPage, .textPrevious,.textLast,.textFirst {
    border: 1px solid #3D3D3D;
    border-top-color: #525252;
    text-decoration: none;
    background: #393939;
    padding: 3px;
    text-transform: uppercase;}
/* @end */

/* @group search */
.divTitleSearch h2 {
    margin: 10px 0 14px 0;
    font-size: 18px;}

.divSearchConcepts {
    font-size: 12px;
    margin-bottom: 10px;}

.divSearchConcepts h3, h3.searchResultsTitle {font: normal 12px Arial, Helvetica, sans-serif;}

.searchResult {
    padding: 10px 0 0 0;
    font-size: 11px;
    color: #CCC;}

.searchResult div {
    color: #FFF;
    font-size: 12px;}

.searchResult h3, .divSearchResults h3 {
    font-size: 13px;
    margin-bottom: 4px;}

#search{    width: 630px;}

#search_content{    margin: 0 10px 0 0;}

#search_content ul,
#search_content ul li{
    list-style: none;
    margin: 0;
    padding: 0;}

#search_content ul li{    padding: 15px 0;}
.box.pub .box-content{
    margin: 0;
    padding: 5px 0;}

.error {
    border:2px dashed red;
    color:red;
    display:block;
    font-weight:bold;
    margin:3px;
    padding:5px;
    text-align:center;}

.ok {
    border:2px dashed #00CC99;
    color:#00CC99;
    display:block;
    font-weight:bold;
    margin:3px;
    padding:5px;
    text-align:center;}

.date{}
.topic {}
.topic a {text-transform: lowercase;}
.publishedBy{}

.article .date, .dateExtrait .date,
.article .topic, .dateExtrait .topic,
.article .publishedBy, .dateExtrait .publishedBy,
.article .community, .dateExtrait .community{display:inline; line-height: 1.5em;    margin: 0px; padding: 1



Ltvteam 14/12/2010 16:37



Salut, j'ai essayé de mettre la neige sur mon blog (la même que sur ton blog) mais ça foir à chaque fois :$


 


Mon script est le suivant:


 


et en fin :


body, html {padding: 0px; margin: 0px;}
#global{padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}
.cl {float:left;}
.clear {clear:both;}

/* modele */
#cl_0_0 {margin:0px 0px 15px 0px; padding:0px; width:100%;}
#cl_1_0    {margin:0 10px 0 0; width:625px; padding:4px}
#cl_1_1    {margin:0px; width:302px; }
#cl_2_0 {width:100%; margin:15px 0 0 0 ;}
.box {width:100%; overflow:hidden;}


/* common screen */
/* @group general */

* {
    margin: 0;
    padding: 0;
    outline: none;}

body {font: normal 10px Arial, Helvetica, sans-serif;}

#global {background-repeat: repeat-x;}

#miniGlobal {
    color: #e3e3e3;
    margin:0px auto;
    padding: 10px;
    font-size: 1.1em;}

#cl_0_0 .column_content{padding:10px 0 20px 0;}

img {border: 0;}

a {text-decoration: underline;}

a:hover {text-decoration: underline;}

h1, h2, h3 {
    font-weight: bold;
    font-family: Tahoma, "Arial Narrow", Arial, 'Trebuchet MS', Helvetica, sans-serif;}

input, textarea {
    border: 0;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 2px 5px;
    background-repeat: no-repeat;
    background-color: #FFFFFF;}

input.button, input.hitSubmit, input.submit {
    border: 0;
    font-family: bold 12px Arial, Helvetica, sans-serif;
    padding: 2px 5px 1px;
    text-transform: uppercase;
    overflow: visible;
    cursor: pointer;
    font-weight: bold;}

input.checkbox, input.radio {
    background: none;
    border: 0;
    color:#FFF;}

input.button, input.hitSubmit, input.submit/*, .afterReactions .spanAddComment */ {
    background-repeat: repeat-x;
    border-width: 1px;
    border-style: solid;}

textarea {margin: 5px 0;}

legend {
    padding-left: 5px;
    padding-right: 5px;}

ul, ol, li{
    list-style: none;
    list-style-position: outside;}
/* @end */

/* @group header */
#cl_0_0 .column_content{
    height: auto!important;
    min-height:115px;
    height:115px;}

#cl_0_0 .column_content table,
#cl_0_0 .column_content form{    margin: 0 auto!important;}

#header {
    font-size: 1.2em;
    background-repeat: no-repeat;
    background-position: top;}

#top {
    text-align: left;
    padding: 5px 10px;}

#top h1 {
    padding: 0px;
    margin: 0px;
    font-size: 4em;
    width: 910px;}

.topLien {
    text-decoration: none;
    color: #FFF;}


#top .box-content {
    padding: 0px;
    background: transparent;
    border: 0px none;}

#top .box-titre {display: none;}

#top .box-footer {display: none;}
/* @end */

/* @group footer */
#footer p {
    margin: 0;
    padding: 0;}

#footer .box-content {
    padding: 0px;
    background: transparent;
    border: 0px none;}

#footer .box-titre {display: none;}

#footer .box-footer {display: none;}
/* @end */

/* @group content */
#ln_0 {
    padding: 10px 0;
    zoom: 1;}
#ln_1 {
    padding: 0;
    background-repeat: repeat-y;
    zoom: 1;
    }

.box h2 {
    line-height: 20px;
    text-transform: uppercase;}

.box-content p {
    margin: 0;
    padding: 3px;}

div.box-content h1{
    font: bold 1.4em/1.8em Tahoma, Arial, Verdana;
    line-height: normal;}

div.box-content ul{overflow: hidden;}
/* @end */

/* @group articles */
.article {padding:0;}

.article font {line-height: normal;}

.contenuArticle {
    padding: 0px;
    margin: 0px;
    text-align: justify;    }

.divTitreArticle h2{
    border: 0;
    font-weight: bold;
    padding: 5px 0px;
    font-size: 1.4em;}

.divTitreArticle h2 a {    text-decoration: none;}

.page .divPageTitle{
    border: 0;
    font-weight: bold;
    padding: 5px 10px;}

.contenuArticle img {
    border-style: solid;
    border-width: 1px;
    padding: 3px;
    background-color: #494949;
    border-color: #3A3A3A;}

.contenuArticle img.GcheTexte {
    float: left;
    margin: 3px 10px 3px 0;}

.beforeArticle,
.dateExtrait {
    padding: 0 0 5px;
    margin: 0;
    text-align: right;
    font-size: 0.95em;}

.cl ul {
    margin: 0;
    padding: 0;}

.contenuArticle, .extrait { font-size: 1.1em;}

.contenuArticle p {
    margin: 10px 0;
    padding: 0;}

.contenuArticle ul {
    margin: 10px 0;
    padding: 0;}

.contenuArticle ul li {
    margin: 0 0 5px 0;
    padding: 0 0 0 11px;
    background-repeat: no-repeat;
    background-position: 0 4px;}

.extraitArticle {    margin:0;}

.hrExtrait {display: none;}

.afterArticle {
    text-transform: capitalize;
    font-style: italic;}

.afterArticle, .plusExtrait {
    margin: 0px;
    padding: 5px 0 10px;
    font-size: .95em;
    text-align: right;}

.afterArticle a {text-decoration: underline;}

.afterArticle a:hover {    text-decoration: none;}

.afterReactions {
    margin-top: 0px;
    padding: 15px 10px;
    font-size: 1.1em;
    text-align: center;}

/* @end */

/* @group sidebar */
.box {
    font-size: 1.1em;
    line-height: 1.3em;
    margin: auto auto 1px;
    padding: 0;
    zoom:1;
    }

.box.pub {
    padding-left: 0;
    padding-right: 0;}

.box.pub .box-content{padding: 5px 0; width: 100%;}

.box.pub .box-titre {padding: 5px 10px;}

.box.pub .box-content h2 {    font: bold 1.2em Tahoma, "Trebuchet MS", Arial, Helvetica, sans-serif;}

.box.pub .box-content div div h2, .box.pub .box-content div div div {padding: 0 10px;}

.box.pub table {    width:92%; padding: 0; margin: 0 auto; background: #000000; color: #fff;}
.box.pub table input.inputmini{width: 90%;}

.box li a, box li a:hover {color: #e3e3e3;}

.box img {background: transparent;}

.box-titre {padding-bottom: 5px;}

.box li {
   
    list-style-type: none;}

.box li {border-bottom-color: #3D3D3D;}

.box li:hover {background-color: #393939;}

 .box .articlerecent li, .micropayment li, .micropayment li,
 .box.articlerecent li:hover, .micropayment li:hover,
.box.album li,
.box.album li:hover,
.box.categorie li,
.box.categorie li:hover,
.box.commentrecent li,
.box.commentrecent li:hover,
.box.archive li ,
.box.archive li:hover {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: block;
    padding: 5px 5px;
    text-decoration: none;}

 .box .articlerecent a, .micropayment a, .micropayment a,
.box.album a,
.box.categorie a,
.box.commentrecent a,
.box.archive a {    text-decoration: none;}

.box li a.newWindow {
    border: 0;
&



ehpad 10/12/2010 11:47



Bonjour à tous,


Pouvez vous me dire comment faire une fois ke j'ai mis l'image dans un dossier ?



nessa :0091: 30/11/2010 16:48



c'est super ça ! j'ai mis le scrips dans mon entete mais la neige ne tombe pas du haut j'ai mis mon probleme sur le forrum ici http://forum.over-blog.com/thread-2700041.html


 


bizzz