Effetto parallasse con bordi inclinati
Autor: Giampiero P.
Besucht 2139,
Followers 2,
Geteilt 0
Ciao, sto cercando di realizzare un effetto parallasse a tutto schermo con i bordi superiori e inferiori leggermente inclinati, ma non sono riuscito a rovare il metodo giusto... potete darmi qualche idea sul come realizzarli?
Gepostet am
cosa intendi per: "leggermente inclinati"
hai un link di un esempio?
intendi... di inserire un immagine inclinato?
Autor
una cosa tipo questa... http://templates.thesunweb.com/live_demo/free/08/index.html
devi creare un'immagine (in .png - con lo sfondo trasparente) con l'angolazione che desideri e poi caricarla nello "stile righe"
ti allego un esempio
io faccio così :-)
vedi la parte bianca che scrolla ? ecco devi creare un jpg bianco inclinato ed inserire , come sfondo in style righe
ops stavamo rispondeno nello stesso momento ... ora basta che inserisci il file png dato da Maurizio in stile righe :-)
comunque la soluzione proposta è molto artigianale. Ti consiglio di scaricare il template che hai segnalato e studiartelo bene bene... per "inclinare" necessitano un paio di codici html da inserire
@Maurizio, se inserisce in stile righe, non servono i codici
Autor
Ho gia provato a scaricare il template, ma purtroppo è per la proff. e io ho solo la evo. e non riesco a vedere come è stato fatto... anche perchè vorrei farlo a tutto schermo (proprio come la versione del template) e con la soluzione dell'immagine PNG non sono riuscito a trovare la soluzione... ho sempre le bande laterali vuote... non è che avete un esempio...?
Buonasera,
questo è il codice che ha inserito per inclinare la riga, naturalmente tramite il browser devi individuare la riga che vuoi inclinare.
Con l'editor decidi i colori
#imPageRow_6{ top: 50px; width: 100%; -webkit-transform: skewY(2deg); -moz-transform: skewY(2deg); -o-transform: skewY(2deg); -ms-transform: skewY(2deg); -sand-transform: skewY(2deg); }
naturalmente il mio esempio ha l'header ma nel sito che hai preso a modello hanno lavorato solo con le righe quindi header a zero
nella sezione esperto della pagina aggiungi il seguento codice (prima della chiusura del tag HEAD)
<style>
#imHeader, #imHeaderBg{
height: 0px;
}
#imPageRowGraphics_1, #imPageRowGraphics_5, #imPageRowGraphics_14{
background-attachment: fixed;
}
/* LINE CSS */
#imPageRow_2{
top: -50px;
width: 100%;
-webkit-transform: skewY(-3deg);
-moz-transform: skewYskewY(-3deg);
-o-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-sand-transform: skewY(-3deg);
}
#imPageRow_4{
bottom: -50px;
z-index: 2;
width: 100%;
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-o-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-sand-transform: skewY(3deg);
}
#imPageRow_5{
margin-bottom: -90px;
}
#imPageRow_6{
top: 50px;
width: 100%;
-webkit-transform: skewY(2deg);
-moz-transform: skewY(2deg);
-o-transform: skewY(2deg);
-ms-transform: skewY(2deg);
-sand-transform: skewY(2deg);
}
#imPageRow_8{
bottom: 50px;
width: 100%;
-webkit-transform: skewY(-2deg);
-moz-transform: skewY(-2deg);
-o-transform: skewY(-2deg);
-ms-transform: skewY(-2deg);
-sand-transform: skewY(-2deg);
}
#imPageRow_13{
bottom: -50px;
width: 100%;
z-index: 2;
-webkit-transform: skewY(2deg);
-moz-transform: skewY(2deg);
-o-transform: skewY(2deg);
-ms-transform: skewY(2deg);
-sand-transform: skewY(2deg);
}
#imPageRowContent_13, #imCell_48{
width: 100%;
}
#imCellStyleGraphics_48{
background-color: white;
}
/* #imPageRow_15{
margin-bottom: -50px;
margin-top: -50px;
z-index: 3;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-sand-transform: rotate(2deg);
} */
/* END LINE CSS */
/* GALLERY CSS */
@media (min-width: 960px){
#imPageRowContent_10, #imGroup_3, #imCell_14, #imCell_33, #imCell_30, #imCell_34, #imCell_31, #imCell_35, #imCell_32, #imCell_36, #imCellStyle_14, #imCellStyle_33, #imCellStyle_30, #imCellStyle_34,
#imCellStyle_31, #imCellStyle_35, #imCellStyle_32, #imCellStyle_36{
width: 100%;
}
#imGroup_4, #imGroup_5, #imGroup_6, #imGroup_7{
width: 25%;
}
#imObjectImage_14, #imObjectImage_33, #imObjectImage_30, #imObjectImage_34, #imObjectImage_31, #imObjectImage_35, #imObjectImage_32, #imObjectImage_36{
max-width: 100%;
}
}
#imTextObject_01_tab0 > div{
text-shadow: 2px 2px #000000;
}
@media (max-width: 959px) and (min-width: 720px){
#imPageRowContent_10, #imGroup_3, #imCell_14, #imCell_33, #imCell_30, #imCell_34, #imCell_31, #imCell_35, #imCell_32, #imCell_36, #imCellStyle_14, #imCellStyle_33, #imCellStyle_30, #imCellStyle_34,
#imCellStyle_31, #imCellStyle_35, #imCellStyle_32, #imCellStyle_36{
width: 100%;
}
#imGroup_4, #imGroup_5, #imGroup_6, #imGroup_7{
width: 50%;
}
}
@media (max-width: 719px) and (min-width: 0px){
#imPageRowContent_10, #imGroup_3, #imCell_14, #imCell_33, #imCell_30, #imCell_34, #imCell_31, #imCell_35, #imCell_32, #imCell_36, #imCellStyle_14, #imCellStyle_33, #imCellStyle_30, #imCellStyle_34,
#imCellStyle_31, #imCellStyle_35, #imCellStyle_32, #imCellStyle_36{
width: 100%;
}
#imGroup_4, #imGroup_5, #imGroup_6, #imGroup_7{
width: 100%;
}
}
/* END GALLERY CSS */
/* CONTACT FORM CSS */
#imObjectForm_43_1, #imObjectForm_43_2, #imObjectForm_43_3, #imObjectForm_43_4{
padding: 15px !important;
}
#imObjectForm_43_5{
padding-right: 50% !important;
}
#imObjectForm_43_submit{
padding: 15px 25px !important;
}
#imObjectForm_43_buttonswrap{
margin-top: -40px !important;
}
/* END CONTACT FORM CSS */
</style>
codice estratto dal template a cui fai riferimento
..."forse" sarebbe meglio "prendere" solo ciò che serve e non proprio tutto-tutto
anche perchè prendendo tutto, sballa tutto il resto...
ovviamente!!! Il codice è quello integrale da personalizzare in relazione alle proprie esigenze ;-)