Joomla.it Forum

Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : aldociana 14 Aug 2014, 17:08:55

: Effetto ombra in div presente in un articolo
: aldociana 14 Aug 2014, 17:08:55

Buongiorno,


Ho creato questa slideshow http://flechelle.biz/joom25w/index.php/modelos/110


Per farlo ho usato un plugin che mi permette di caricare il codice html su un articolo, Jumi mi pare che si chiami.


Jumi nella descrizione, dichiara di poter eseguire anche php, css e java, perņ alcuni effetti grafici come l'ombra sotto la div grande della slide non me li prende.


Vi faccio vedere il css della slideshow:


#slider {width: 640px;
height: 320px;
margin: 35px auto 0;
position: relative;
background: #FFF;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);}

#slider:before, #slider:after {content: '';
position: absolute;

width: 60%;
height: 20px;

-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);

-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);

left: 10px;
bottom: 13px;
z-index: -1}

#slider:after {left: auto;
right: 10px;

-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg)}

#slider ul {width: 140px;
height: 30px;
padding: 0 0 0 0;
position: absolute;
z-index: 9;
list-style: none;

left: 50%;
margin-left: -70px;
bottom: 8px}

#slider ul li:first-child {margin-left: 16px}

#slider ul li {float: left;
margin-right: 12px;
margin-top: 14px}

#slider ul li:last-child {margin-right: 0}

#slider ul li a {width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #AAA;
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6), 0 1px 1px 0 white;
border-radius: 50%}

#slider ul li a:hover {background: #888}

#slider img {position: absolute;
left: 0;
top: 0;
opacity: 0;

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease}

#slider img:target {opacity: 1}

#slider img#five {opacity: 1}

#slider img:not(:target), #slider img:target ~ img#five {opacity: 0}

#slider ul li a[href="#five"] {background: #777}

#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {background: #777}

#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {background: #AAA}
#creditiangelneo {float: right; font-size: 10px; font-style: italic; margin-right: 20px}

img {
  border: none;

Secondo voi sbaglio qualcosa io o non tutto č permesso?


Grazie


Saluto


Aldo