besoin d'aide css

bg62bg62 Member
dans Entraide et S.A.T
bonjour,
je voudrais réaliser le même effet que sur 'coin slider' ( http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/)
mais uniquement en css, pour n'afficher qu'une seule image dans le header avec juste la bande de texte sur cette image (même pas les liens de navigation ou la bande de déroulement du dessous)
donc sans aucun JS ...
mais je râme un peu beaucoup ...
alors si vous avez une idée, grand merci ;)

mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

Réponses

  • GzygGzyg Member
    mai 2012 modifié
    Il faut jouer avec la propriété opacity sur le conteneur de ton texte.


    (si j'ai bien compris la demande...)


    à plus,

    Gzyg
  • bg62bg62 Member
    Gzyg a écrit:
    Il faut jouer avec la propriété opacity sur le conteneur de ton texte.


    (si j'ai bien compris la demande...)


    à plus,

    Gzyg
    merci, mais pas si évident ...
    j'ai 3 appels JS:
    <script type="text/javascript" src="<?php $plxShow->template(); ?>/js/jquery.min.js"></script>
    (qui sert pour ma fonction 'haut de page mais semble avoir une influence sur les 2 choses)
    <script type="text/javascript" src="<?php $plxShow->template(); ?>/js/jquery-1.js"></script>
    <script type="text/javascript" src="<?php $plxShow->template(); ?>/js/coin-slider.js"></script>
    <script type="text/javascript" src="<?php $plxShow->template(); ?>/js/coin-slider.min.js"></script>
    1 appel css:
    <link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/css/coin-slider-styles.css" media="screen" />
    qui contient ceci : 
    /*
	Coin Slider jQuery plugin CSS styles
	http://workshop.rs/projects/coin-slider
*/


.coin-slider { overflow: hidden /*BG hidden*/; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: /* BG 545px*/925px; padding: 10px; background-color: #2365B0; color: #FFFFFF; }

.cs-prev, 
.cs-next { background-color: #2365B0; color: #FFFFFF; padding: 0px 10px; }a
    et le codage dans la partie 'header' : 
    	<div id='coin-slider'>
		<img src='<?php $plxShow->template(); ?>/img/referencement.jpg' title="référencement, blog du référencement" alt="référencement, blog du référencement">
		<span>
					<b>Référencement, référencement efficace, Actualités du net, the Blog </b><br />
				référencement de sites,aide à la création et au référencement de sites,actualités du Net,Liens utiles,Google et autres moteurs,communiqués de presse
				</span>
	</div>
    et du coup je ne sais plus trop quoi supprimer et quoi ajouter pour faire au plus simple et au plus léger ... ?
    (finalement ça reviendrait à avoir la même présentation qu'actuellement, mais sans JS du tout, uniquement l'image avec la bande colorée et le texte au dessus ...)
    si tu as une idée pour ce grand 'nettoyage' ... ;)

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

  • gcyrillus-nomadegcyrillus-nomade Member
    mai 2012 modifié
    bonsoir,

    si cela est juste pour une image, voici une base : 
    <figure>
<img src="http://workshop.rs/projects/coin-slider/games/mini_ninjas.jpg" />
<legend>
<h2>Voilou</h2>
<p>texte explicatif ou descriptif de l'image .</p>
</legend>
</figure>
    et le css 
    figure {display:inline-block;position:relative;border:double;}
legend {position:absolute;left:0;bottom:0;width:100%;background:rgba(0,0,0,0.5);color:white;box-shadow:0 0 3px;}
    ou si tu veut l'effet hover 
    figure {display:inline-block;position:relative;border:double;}
legend {position:absolute;left:0;bottom:0;width:100%;background:rgba(0,0,0,0.5);color:white;box-shadow:0 0 3px;max-height:0;transition:1s;}
figure:hover legend{transition:1s;max-height:100%;}

    Si le choix des balises ne te convient pas, tu peut en changer et garder une imbrication similaire.

    Pour un slide CSS avec plusieurs image, il y a moyen aussi de faire quelque chose qui puisse réagir au clique en boucle, mais dans un sens seulement.

    ++
    Pour ce qui est de coinslider, enleve tout (js et css) si tu ne t'en sert nulle part ailleurs.


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de pluxml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • bg62bg62 Member
    @gcyrillus-nomade
    grand grand merci ;)
    je suis dessus, je patauge un peu, mais ça avance ...
    je te tiens au courant
    @mitiés

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

  • bg62bg62 Member
    super!
    ;)
    grand et encore grand merci à toi, le maître de la CSS !
    la mise à jour est en ligne ...
    pas mal de 'bidouillages' qu'il faut que j'améliore encore surtout au niveau du poids et de la 'vitesse' ...
    donc ... 'resolu' et pour le reste ' en cours '
    @ bientôt

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

Connectez-vous ou Inscrivez-vous pour répondre.