Mājas lapa » Kodēšana » 6 Cool attēla paraksti ar CSS3

    6 Cool attēla paraksti ar CSS3

    CSS3 ir patiešām spēcīgs. Tas bija agrāk, ka mums ir vajadzīgi attēli vai JavaScript koda līnijas, lai veiktu vienkāršu pārejas efektu. Mūsdienās to var izdarīt tikai ar CSS3.

    Šajā apmācībā mēs parādīsim, kā izveidot attēla parakstus ar dažādām pārejām, vienkārši izmantojot CSS3.

    • Demo
    • Lejupielādes avots

    Pārlūka atbalsts

    Šis virsraksts būs ļoti atkarīgs no transformācijas un pārejas īpašībām, kas ir salīdzinoši jaunas funkcijas, tāpēc būtu saprātīgi ņemt vērā pārlūkprogrammas atbalstu, kas nepieciešams, lai vienmērīgi izpildītu parakstu.

    Tālāk ir norādītas pārlūkprogrammas, kas jau atbalsta pārveidošanu un pāreju:

    • Internet Explorer 10+ (vēl nav izlaists)
    • Firefox 6+
    • Chrome 13+
    • Safari 3.2+
    • Opera 11+

    Tagad sāksim pamācību.

    HTML struktūra

    Mums ir 6 attēli; katrs attēls ar atšķirīgu paraksta stilu.

     
     
       
    Vienkāršs apzīmējums
          
      
       
    Pilns uzraksts
     
    Lorem ipsum dolor sit amet, conseptetuer adipiscing elit, sed diametra nummh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
          
      
       
    Fade Caption
     
    Lorem ipsum dolor sit amet, conseptetuer adipiscing elit, sed diametra nummh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
          
      
       
    Slide Caption
     
    Lorem ipsum dolor sit amet, conseptetuer adipiscing elit, sed diametra nummh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
          
      
     
       
    Tas ir rotējošs virsraksts
     
    Lorem ipsum dolor sit amet, conseptetuer adipiscing elit, sed diametra nummh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
          
     
      
       
    Free Style Caption
     
    Lorem ipsum dolor sit amet, conseptetuer adipiscing elit, sed diametra nummh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.

    Pamata CSS

    Pirms jebkura elementa veidošanas vienmēr ir labs sākums atiestatīt visas īpašības, izmantojot šo CSS atiestatīšanu, un piešķirt tām noklusējuma stila vērtības, tāpēc visi pārlūkprogrammas sniegs tādu pašu rezultātu (izņemot, iespējams, IE6).

    Stili tiks atdalīti style.css failā, tāpēc mūsu HTML fails izskatīsies kārtīgi. Tomēr neaizmirstiet pievienot saites stilu galvas atzīmes iekšpusē, lai piemērotu faila stila noteikumus.

    Labi, sāksim veidot elementu, sākot ar html tagu un galveno iesaiņojuma ID:

     html fona krāsa: #eaeaea;  #mainwrapper font: 10pt normāls Arial, sans-serif; augstums: auto; starpība: 80px auto 0 auto; teksta saskaņošana: centrs; platums: 660px;

    Image Box stils

    Mēs izmantojam dažus kopīgus stilus lodziņos, kuros ir attēli. Kastes tiks parādītas blakus, izmantojot peldošo kreiso pusi. Ņemiet vērā, ka mēs arī pievienojām pārplūdi: slēptu īpašumu; tas padarīs visus objektus, kas iet caur divām, slēpt.

    Mēs arī paziņojam par pārejas īpašumu katram lodziņā esošajam attēlam, ja mums vēlāk būs nepieciešama attēla pāreja.

     #mainwrapper .box border: 5px ciets #fff; kursors: rādītājs; augstums: 182px; peldēt: pa kreisi; starpība: 5px; pozīcija: relatīvais; pārplūde: slēpta; platums: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; kastes ēna: 1px 1px 1px 1px #ccc;  #mainwrapper .box img position: absolūti; pa kreisi: 0; -webkit pāreja: visi 300ms vieglumu; -moz-pāreja: visi 300ms vieglums; -o-pāreja: visi 300ms vieglums; -ms-pāreja: visi 300ms vieglums; pāreja: viss 300ms vieglums;

    Paraksts Kopējais stils

    Parakstam būs daži kopīgi stili un arī pārejas īpašums. Tā vietā, lai izmantotu necaurredzamību, mēs izmantojam RGBA krāsu režīmu ar 0,8, lai alfa kanāls padarītu parakstu mazliet caurspīdīgu, neietekmējot tekstu iekšpusē.

     #mainwrapper .box .caption fona krāsa: rgba (0,0,0,0,8); pozīcija: absolūta; krāsa: #fff; z-indekss: 100; -webkit pāreja: visi 300ms vieglumu; -moz-pāreja: visi 300ms vieglums; -o-pāreja: visi 300ms vieglums; -ms-pāreja: visi 300ms vieglums; pāreja: viss 300ms vieglums; pa kreisi: 0;

    Paraksts 1

    Pirmajam parakstam būs vienkāršs pārejas efekts, ko parasti izmanto parakstam. Paraksts tiks parādīts no apakšas, kad virzāmies virs attēla. Lai to atrisinātu, parakstam būs fiksēts augstums 30px, un mēs izmantojam tā apakšējo pozīciju -30px, lai to paslēptu zem attēla.

     #mainwrapper .box .simple-caption augstums: 30px; platums: 200px; displejs: bloks; apakšā: -30px; līnijas augstums: 25pt; teksta saskaņošana: centrs;

    2. virsraksts

    Otrajam tipam ir pilns attēla / lodziņa izmēra platums un augstums (200x200px), un pāreja būtu līdzīga bīdāmo durvju efektam tikai tad, ja tā slīdēs no augšas uz leju.

     #mainwrapper .box .full-caption platums: 170px; augstums: 170px; tops: -200px; teksta izlīdzināšana: pa kreisi; polsterējums: 15px;

    Paraksts 3

    Trešajam virsrakstam būs izbalējis efekts. Tātad, mēs pievienojām necaurredzamību: 0 sākotnējam stāvoklim.

     #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption necaurredzamība: 0; platums: 170px; augstums: 170px; teksta izlīdzināšana: pa kreisi; polsterējums: 15px;

    4. virsraksts

    Ceturtais virsraksts tiks slīdēts no kreisās uz labo pusi, tāpēc mēs sākotnēji nostiprinājām 200px pa kreisi (pa kreisi: 200px).

     ** 4. virsraksts: Slide ** / #mainwrapper .box .slide-caption platums: 170px; augstums: 170px; teksta izlīdzināšana: pa kreisi; polsterējums: 15px; pa kreisi: 200px;

    Paraksts 5

    Piektajam virsrakstam būs rotējošs efekts. Griezīsies ne tikai paraksti, bet arī attēls. Tas ir vairāk kā pozīcijas maiņa, pagriežot.

    Tātad, mēs pievienojam transformācijas īpašumu ar -180 grādu rotāciju, ja vien nevēlaties, lai monitoru rotētu, lai lasītu parakstu.

     #mainwrapper # box-5.box .rotate-caption platums: 170px; augstums: 170px; teksta izlīdzināšana: pa kreisi; polsterējums: 15px; tops: 200px; -moz-transform: rotēt (-180deg); -o-transformēt: rotēt (-180deg); -webkit-transform: rotēt (-180deg); transformēt: rotēt (-180deg);  #mainwrapper .box .rotate platums: 200px; augstums: 400px; -webkit pāreja: visi 300ms vieglumu; -moz-pāreja: visi 300ms vieglums; -o-pāreja: visi 300ms vieglums; -ms-pāreja: visi 300ms vieglums; pāreja: viss 300ms vieglums;

    Paraksts 6

    Pēdējam parakstam būs mēroga transformācija. Tomēr iepriekšējos parakstos tajā esošais teksts tiešām parādīsies kopā ar .caption pārejas nobīdi. Šajā sadaļā mēs padarīsim to nedaudz atšķirīgu.

    Teksts parādīsies pēc pārejas maiņas. Tātad, mēs pievienojam pārejas kavējumu tekstam, šajā gadījumā h3 un p tagam.

     #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p pozīcija: relatīvais; pa kreisi: -200px; platums: 170px; -webkit pāreja: visi 300ms vieglumu; -moz-pāreja: visi 300ms vieglums; -o-pāreja: visi 300ms vieglums; -ms-pāreja: visi 300ms vieglums; pāreja: viss 300ms vieglums;  #mainwrapper .box .scale-caption h3 -webkit-pārejas kavēšanās: 300ms; -moz-pārejas kavēšanās: 300ms; -o-pārejas aizkave: 300ms; -ms-pārejas aizkave: 300ms; pārejas aizkave: 300ms;  #mainwrapper .box .scale-caption p -webkit-pārejas kavējums: 500ms; -moz-pārejas kavēšanās: 500ms; -o-pārejas aizkave: 500ms; -ms-pārejas aizkave: 500ms; pārejas aizkave: 500ms;

    Padarīsim tos pārvietot

    Nākamajā sadaļā mēs definēsim paraksta uzvedību, kad mēs virzāmies virs attēliem vai lodziņiem.

    Paraksts uzvedība 1: parādās.

    Pirmajam parakstam mēs vēlētos, lai tas parādās (no apakšas), kad mēs virzāmies virs kastes. Lai risinātu šo kustību, mēs izmantojam transformācijas īpašumu un tālāk redzamais CSS kods norāda uz virsrakstu, lai pārvietotu 100% no sava svara uz augšu.

     #mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transformēt: translateY (-100%); -webkit-transform: translateY (-100%); pārveidot: translateY (-100%);

    Ja jūs nesaņemat punktu, ka tulkojumam ir negatīva vērtība, iespējams, vispirms izlasiet šo pamācību, lai iegūtu plašāku ieskatu.

    Paraksts uzvedība 2: pārvietojiet to uz leju.

    Turpretim otrais virsraksts pārvietosies no augšas. Tātad, mums būs pozitīva vērtība tulkojumam.

     #mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transformēt: translateY (100%); -webkit-transform: translateY (100%); pārveidot: translateY (100%);

    Paraksts uzvedība 3: Fade in.

    Trešais uzraksts faktiski ir vienkāršākais. Kad lodziņš ir novietots, virsraksts necaurspīdīgums mainīsies uz 1, padarot to redzamu, un tā kā parakstu klasē esam pievienojuši pārejas īpašumu, pārejai vajadzētu darboties nevainojami.

     #mainwrapper .box: hover .fade-caption dūmainība: 1;

    Paraksts uzvedība 4: pabīdiet to pa kreisi.

    Kā jau iepriekš minēts, šis virsraksts tiks slīdēts pa kreisi, taču attēls arī izbīdīsies pa labi. Tātad, šeit mums ir 2 CSS deklarācijas.

    Zemāk redzamais CSS kods norāda, ka tad, kad mēs pārvietojamies virs kastes, virsraksts slīdēs 100% no tās platuma pa kreisi. Ņemiet vērā, ka mēs tagad izmantojam tulkojumuX, jo mēs vēlamies, lai slaids pārvietotos horizontāli no labās uz kreiso pusi.

     #mainwrapper .box: hover .slide-caption fona krāsa: rgba (0,0,0,1)! svarīga; -moz-transform: translateX (-100%); -o-transformēt: translateX (-100%); -webkit-transform: translateX (-100%); dūmainība: 1; pārveidot: translateX (-100%);

    Kad mēs virzāmies virs kastes, attēls tiks izbīdīts pa kreisi.

     #mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transformēt: translateX (-100%); -webkit-transform: translateX (-100%); pārveidot: translateX (-100%);

    Paraksts uzvedība 5: pagrieziet to.

    Šis virsraksts atšķiras no pārējās, jo tas nepārvietosies no labās vai kreisās puses, bet rotēs. Kad kaste ir novietota uz virsmas, attēls, kas satur attēlu un parakstu, rotēs -180 pretēji pulksteņrādītāja virzienam, paslēpjot attēlu un parādot parakstu.

     / ** Rotēt Caption: hover Uzvedība ** / #mainwrapper .box: hover .rotate fona krāsa: rgba (0,0,0,1)! Svarīga; -moz-transform: rotēt (-180deg); -o-transformēt: rotēt (-180deg); -webkit-transform: rotēt (-180deg); transformēt: rotēt (-180deg);

    Paraksts uzvedība 6: mērogojiet to.

    Šis virsraksts apvienos vairākus pārveidošanas efektus. Kad kaste ir ieslēgta, attēls no sākotnējā izmēra palielinās par 140% (1,4).

     #mainwrapper .box: hover # image-6 -moz-transform: skala (1.4); -o-transformācija: skala (1.4); -webkit-transform: skala (1.4); transformācija: skala (1.4);

    Un, ja redzējāt CSS iepriekš Paraksts 6 Virsraksts, mēs esam noslēguši tekstu pa kreisi pa 200px. Šis CSS kods norāda tekstu, lai pārietu uz sākotnējo pozīciju. Tātad teksts vienlaikus slīdēs no kreisās uz labo pusi.

     #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transformēt: translateX (200px); -webkit-transform: translateX (200px); pārveidot: translateX (200px);
    • Demo
    • Lejupielādes avots

    Kopsavilkums

    Lai gan šīs CSS funkcijas ir atdzistas, tomēr tās vēl nav plaši pielietojamas, jo iepriekš minētie pārlūkprogrammas atbalsta ierobežojumi. Tomēr turpiniet eksperimentēt ar šīm jaunajām funkcijām, jo ​​tas nākotnē veidos tīmekļa lapu.

    Kredīti

    Attēla sīktēli apmācībā tiek ņemti no šādām vietnēm (ekrānuzņēmums):

    • Book Apart
    • Archiduchesse
    • Vlog
    • Hongkiat
    • Apsveikuma saimniecība
    • Mark Ecko
    6 Būtiskie (bet garlaicīgi) uzdevumi
    6 Aizraujoši melnā piektdiena piedāvājumi dizaineriem
    6 labākie divu faktoru autentifikācijas WordPress spraudņi [Atsauksme]
    Nākamais raksts
    6 CSS triki, lai pielāgotu saturu vertikāli
    Iepriekšējais raksts
    6 labākie veidi, kā nosūtīt lielus failus tiešsaistē