Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    111

    Testo con effetto zoom + linee laterali

    Ciao a tutti,
    in ogni pagina del sito web vorrei inserire un titolo prima di iniziare a scrivere l'articolo.
    Il titolo vorrei crearlo prendendo esempio da questo sito (www.leccerent.net) "IL TUO VIAGGIO NEL SALENTO"

    Come posso crearlo con l'effetto a comparsa + le due linee orizzontali a ds e sin. del testo?

    Grazie a tutti
    Andrea

  2. #2
    Puoi direttamente trarre ispirazione da quel sito: barre laterali sono ottenute semplicemente tramite :before e :after, mentre l'effetto di zoom è ottenuto tramite animation: guarda nel foglio di stile di quel sito le parti che riguardano
    animation-name: zoomIn;
    "Le uniche cose che sbagli sono quelle che non provi a fare."
    Atipica

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    111
    Ci avevo già provato senza successo, per questo poi ho scritto qui...
    Ho copiato sia l'html sia il CSS che ho estratto grazie a Chrome ma non va...
    Mi aiuti?

  4. #4
    Per le barre gialle:

    *#dm *.dmBody h1.u_1277373936::before {


    • display: inline-block !important;
    • margin: 0 20px 8px 0 !important;
    • height: 3px !important;
    • content: " " !important;
    • text-shadow: none !important;
    • background-color: #fec601 !important;
    • width: 140px !important;}




    per l'animazione dell'elemento h1:

    h1 {animation-name:zoomIn}

    Per l' animazione:

    Non riesco a trovartelo io, ma devi cercare nei css di quella pagina una cosa che dica:

    @keyframes

    con dentro

    animation-name:zoomIn;

    Ciao!
    "Le uniche cose che sbagli sono quelle che non provi a fare."
    Atipica

  5. #5
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    111
    Perfetto!. Grazie

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.