Cómo agregar sombra al slider con jQuery

  • Autor Autor joelandy14
  • Fecha de inicio Fecha de inicio
joelandy14

joelandy14

VIP
Iota
Verificado
Verificación en dos pasos activada
Suscripción a IA
Hola, estoy haciendo una pagina web en html con dreamweaver cs5 , pero he quedado estancado un un slider , pues lo que pasa que de descargado de esta pagina

Kwicks for jQuery
demo:
Newscast Demo

y hice todo me salio todo pero, lo unico que no me sale es la sombra que hay entre la imagenes, he intentado hacer la imagen en .PNG , pero no funciona pues este sale blanco y no transparente.

alguien tiene experiencia en esto? le agradeceria mucho.
 
Añadele box-shadow a #featured.

Creo que a eso te refieres 😛7:
 
Camilo Garcia dijo:
Añadele box-shadow a #featured.

Creo que a eso te refieres 😛7:
Hacer clic para expandir...

Hola, te explico mejor haber si me puedes ayudar.
Insertar CODE, HTML o PHP: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="estructura/estructura.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin-top: 0px;
}
</style>

		<link rel='stylesheet' type='text/css' href='jquery.kwicks.css' />
		<style type='text/css'>
			.kwicks {
				width: 900px;
				height: 240px;
			}
			.kwicks > a {
				width: 900px;
				height: 240px;
				/* overridden by kwicks but good for when JavaScript is disabled */
				margin-left: 55px;
				float: left;
			}

			#panel-1 { 
			background-image:url(img%20slider/img1.jpg);
				height: 240px;
	width: 900px;
			 } 
			#panel-2 { background-image:url(img%20slider/img2.png
			);}
			#panel-3 { background-image:url(img%20slider/img5.png); }
			#panel-4 { background-image:url(img%20slider/img4.png); }
		</style>

</head>



 
 
  <div id="featured" class='kwicks kwicks-horizontal'>
 
			<a href='#' id='panel-1'></a>
			<a href='#' id='panel-2'></a>
			<a href='#' id='panel-3'></a>
			<a href='#' id='panel-4'></a>
		</div>
        
        
        
        
        
        

y en el div esta asi:
		<script src='examples/js/jquery-1.8.1.min.js' type='text/javascript'></script>
		<script src='jquery.kwicks.js' type='text/javascript'></script>
		
		<script type='text/javascript'>
			$(function() {
				$('.kwicks').kwicks({
					size: 222.8,
					maxSize : 700,
					spacing : 3,
					behavior: 'menu'
				});
			});
		</script>
 
 
 
        
        
         </div>
 
Sep, añadele box-shadow al #featured 😉

Saludos
 
Camilo Garcia dijo:
Sep, añadele box-shadow al #featured 😉

Saludos
Hacer clic para expandir...

pero en donde? es mi primer trabajo como diseñador de web. 😕

pd. y si pudieras tambien los textos. (que salen abajo de la img)

gracias
 
Última edición:
joelandy14 dijo:
pero en donde? es mi primer trabajo como diseñador de web. 😕

pd. y si pudieras tambien los textos. (que salen abajo de la img)

gracias
Hacer clic para expandir...

Entre las etiquetas style (aunque te recomendaría usar una hoja de estilos aparte):

Insertar CODE, HTML o PHP: 
.featured + .featured {
    box-shadow: -10px 0 10px rgba(0,0,0,.3); /*Es un ejemplo, podrías experimentar con los valores*/
}
 
Lo que dice esta bien ahora para el texto es text-shadow 😉
 
No es ningun Box-Shadow, esa sombra negra es una imagen bueno un degrade y le agregan un poco de estilo.
Este sería la imagen:
overlay.png


Te falta el style.css, lo podrias dar para ver donde iría porque en el sitio para descargar no lo veo o como lo has trabajado?

Insertar CODE, HTML o PHP: 
<-- ESTO IRIA EN EL CSS GENERAL-->
#featured, .featured, .fadeout, .newsselect{ 
height:320px; 			/*this changes the height of the image slider*/
}

#top .newsslider .fadeout{
right:155px;
}

#top .fadeout{
position:absolute;
width:200px;
display:block;
right:0px;
z-index: 4;
}


<---ESTE IRIA EN EL CSS DEL SLIDER-->>
#top .fadeout{
background: transparent url([url]http://www.kriesi.at/themes/newscast/wp-content/themes/newscast/images/skin1/overlay.png[/url]) repeat-y right top;
}
 
Última edición:
Chamako dijo:
No es ningun Box-Shadow, esa sombra negra es una imagen bueno un degrade y le agregan un poco de estilo.
Este sería la imagen:
overlay.png


Te falta el style.css, lo podrias dar para ver donde iría porque en el sitio para descargar no lo veo o como lo has trabajado?

Insertar CODE, HTML o PHP: 
<-- ESTO IRIA EN EL CSS GENERAL-->
#featured, .featured, .fadeout, .newsselect{ 
height:320px; 			/*this changes the height of the image slider*/
}

#top .newsslider .fadeout{
right:155px;
}

#top .fadeout{
position:absolute;
width:200px;
display:block;
right:0px;
z-index: 4;
}


<---ESTE IRIA EN EL CSS DEL SLIDER-->>
#top .fadeout{
background: transparent url([url]http://www.kriesi.at/themes/newscast/wp-content/themes/newscast/images/skin1/overlay.png[/url]) repeat-y right top;
}
Hacer clic para expandir...

descarga directa:
https://github.com/jmar777/kwicks/zipball/v2.0.0

- - - Actualizado - - -

no me ha funcionado ninguno.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba