CSS3-overgangen in Dreamweaver CS6
Met de toevoeging van HTML5 en CSS3 worden interactieve websites de verwachte. Nu met DreamweaverR CS6 en het nieuwe CSS-overgangspaneel, u kunt uw eigen interactieve effecten maken zonder dat u code hoeft te schrijven. De output van dit proces is alleen CSS3, zonder JavaScript. Daarom hoeft u zich geen zorgen te maken als de viewer JavaScript heeft ingeschakeld. De overgangen die door Dreamweaver zijn gemaakt, kunnen in elke moderne webbrowser worden afgespeeld.

Laten we eens kijken hoe gemakkelijk het is om onze eigen interactieve overgangen te maken. De overgang kan op elk klasse-, ID- of CSS-element worden toegepast. Het enige wat we moeten doen, is de waarden instellen in het paneel CSS-overgangen.

  1. Onze eerste stap is het selecteren van het element waarop we de overgang willen toepassen. In ons voorbeeld zal het een menulink zijn.

  2. Klik op Venster - CSS-overgangen om het paneel te openen.

  3. Klik in het paneel CSS-overgangen op het plusteken om een ​​overgang toe te voegen.

  4. In het dialoogvenster Nieuwe overgang kunnen we het menu Doelregel gebruiken om uit de voorinstellingen te kiezen of onze eigen naam in te voeren voor de overgang. Laten we de naam .morph typen.

  5. Vervolgens moeten we de actie kiezen die de overgang zal activeren. Kies Hover in het menu Transition On, zodat de overgang wordt geactiveerd wanneer we onze muis over de link plaatsen. Andere keuzes zijn: actief, aangevinkt, uitgeschakeld, ingeschakeld, focus, zweven, onbepaald en doelwit.

  6. Voor de menuoptie hebben we twee keuzes. Laten we de eerste kiezen.

    Gebruik dezelfde overgang voor alle eigenschappen
    Gebruik een andere overgang voor elke eigenschap

  7. Voor de duur en vertraging van de overgang kunnen we seconden of milliseconden gebruiken. Laten we de duur instellen op 1 seconde en de vertraging op 0,05 seconde.

  8. Voor de timingfunctie hebben we verschillende versnellingskeuzes. Laten we Ease Out kiezen.

  9. Om een ​​CSS-eigenschap toe te voegen, klikt u op het plusteken en kiest u er een in de pop-uplijst. Laten we Achtergrondkleur kiezen.

  10. Nadat we een eigenschap hebben gekozen, kunnen we de eindwaarde voor de overgang instellen. Afhankelijk van de eigenschap die we hebben gekozen, geeft het menu Eindwaarde ons het overeenkomstige menu voor die eigenschap. Voor de achtergrondkleur krijgen we de kleurkiezer. Als we de eigenschap Lettertype-gewicht toevoegen, krijgen we een menu met vooraf ingestelde gewichten.

  11. Uiteindelijk moeten we kiezen waar de overgang moet worden gemaakt. Onze keuzes zijn Alleen dit document of Nieuw Style Sheet-bestand. Laten we de eerste gebruiken.

Nadat we op de knop Overgang maken hebben geklikt, kunnen we zien dat de overgang is vermeld in het deelvenster CSS-overgangen, wat aangeeft dat de overgang van morph wordt geactiveerd door de zweefactie en wordt toegepast op het doel a.morph.

Als we de codeweergave controleren, zien we dat de morph-klasse is toegevoegd aan de link.

Wanneer we met onze muis over de link in de liveweergave gaan, verandert de achtergrondkleur.

Maar wat als we de overgang moesten bewerken? We kunnen dit doen via het CSS Transitions-paneel.

  1. Selecteer de a.morph-overgang en het pictogram Bewerken wordt actief (potloodpictogram).

  2. Klik op het pictogram Bewerken om het dialoogvenster Overgang bewerken te openen. Hier kunnen we de waarden naar behoefte wijzigen of een nieuwe eigenschap en eindwaarde toevoegen.

Nu we de morph-overgang hebben gemaakt, kunnen we deze eenvoudig toepassen op andere elementen omdat deze nu beschikbaar is in het menu Doelregel.

* Adobe heeft mij een exemplaar van deze software ter beoordeling verstrekt.

Copyright 2018 Adobe Systems Incorporated. Alle rechten voorbehouden. Schermafbeeldingen van Adobe-producten herdrukt met toestemming van Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst en Flash Paper is / zijn ofwel [a] gedeponeerd handelsmerk [s] of een handelsmerk [s] van Adobe Systems Incorporated in de Verenigde Staten en / of andere landen.


Video-Instructies: html buttons in joomla (Maart 2024).