besoin d'aide css

bg62

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

Gzyg

Il faut jouer avec la propriété opacity sur le conteneur de ton texte.


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


à plus,

Gzyg

bg62

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' ...

gcyrillus-nomade

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.

bg62

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

bg62

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