All Articles Dreamweaver
Erstellen großartiger Text mit CSS3 in Dreamweaver
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

Wenn Sie wurden mit dem Bedienfeld CSS-Stile auf Stil Ihrer Webseiten in Dreamweaver dann werden Sie sich bewusst sein, von den Restriktionen, die Sie in Bezug auf das Design gelegt. Uni-Farben, Standard-Schriftarten, Block etc. Alle Formen interessant, aber nicht wirklich anspruchsvollen CSS-Fähigkeit.

Also in diesem Artikel Im gehend, zeigen Ihnen einige CSS, Ihre Styles in Dreamweaver, die wirklich schaffen wird einige tolle Designs hinzufügen.

Lasst uns durch die Schaffung eines Div-Tag enthalten, die dieses wunderbare Stil wird Ihr gerade erstellen zu starten.


Schritt 1 - Hinzufügen eines AP-Div

Beginnend mit einem leeren HTML-Dokument öffnen Sie das Bedienfeld Einfügen und setzen Sie ihn auf Layout. Von der Layout-Optionen wählen AP Div zeichnen.

Div drawn

Div gezogen


Verwenden Sie das Tool, um ein AP-Div zeichnen (das ist nur ein div-Tag mit einer ID # Stil automatisch angewendet, die Position und Größe-Parameter). Verwenden Sie die Eigenschaft Systemsteuerung, um die Größe AP-Div mit Höhe: 400px und Breite: 400px.


Schritt 2 - Nennen Sie die AP-Div

Öffnen Sie den AP-Elemente-Panel und Umbenennen der APDiv1 zu MyStyle. Öffnen Sie das Bedienfeld CSS-Stil und Sie werden sich, dass Umbenennung der AP-Div auch wieder die Namen ID MyStyle Stil. Dies ist der Stil, den Sie editieren werden.


Schritt 3 - Finden Sie den CSS-Code

Schalten Sie um auf dem Split-Ansicht, so dass Sie sowohl das Bild und den Code erstellt youve sehen können. Blättern Sie bis zum Abschnitt und Sie erhalten einen Code-Abschnitt hervorgehoben, die rosa # MyStyle {} sagt zu sehen. Das ist Ihre CSS und alle Einstellungen dafür, dass Sie gerade erstellen, wird in-zwischen den beiden {} setzen.


Schritt 4 - Hinzufügen einige Inhalte

Um Zeit zu tippen, Kopieren und Einfügen über einen Textabsatz in der Div indem Sie auf das AP-Div-gezogen in der Design-Ansicht zu speichern, sodass der Cursor wird aktiv und die Tastenkombination Befehlstaste-V zum Einfügen.

rounded corners

abgerundeten Ecken


TIPP: Vergrößern Sie den Radius groß, um genau die Hälfte Ihrer Breite und Höhe (also in diesem Fall 200px) und in der Vorschau noch einmal .... Hey erhalten Sie einen perfekten Kreis!


Schritt 6 - Gradient Hintergrund

Das Hinzufügen eines Gradienten Hintergrund ist ein wirklich schönes Design-Effekt, aber Sie sollten immer bedenken, dass nicht alle Versionen von allen Browsern unterstützen. Also immer nur verwenden, um ein Bild zu verbessern. Immer entwerfen Dinge mit mehreren Browsern im Auge und haben eine solide füllen ebenfalls zur Verfügung.

gradient background

Hintergrund mit Farbverlauf


Der folgende Code erstellt diesen Hintergrund mit Farbverlauf:

background-color: # 666666;

background-image:-moz-linear-Gradienten (oben, # 666666, # 333333 40,0%);

background-image:-webkit-linear-Gradienten (oben, # 666666, # 333333 40,0%);

background-image:-o-linear-Gradienten (oben, # 666666, # 333333 40,0%);

background-image:-ms-linear-Gradienten (oben, # 666666, # 333333 40,0%);

background-image: linear-Gradienten (oben, # 666666, # 333333 40,0%);


Testen Sie es in wenigen Browsern, wenn du kannst, um den Effekt zu sehen. Schließlich lässt fügen Sie etwas Punsch auf den Text.


Schritt 7 - Steigern Sie die Text-

Ive hinzugefügt Weiß auf den Text, um sie zeichnen sich besser gegen die Steigung. Auch Ive Schlagschatten in den Text eingefügt. Wie mit dem Farbverlauf Schlagschatten funktioniert nur mit neueren Versionen von Webbrowsern dont immer auf ihn verlassen.

drop shadow

Schlagschatten


Dieser Code fügt die Farbe und Schlagschatten:

color: # FFFFFF;

text-shadow: 2px 2px 3px # 000000;


Schritt 8 - Bessere Font?

Schließlich habe ich eine bessere Schrift und etwas Padding, um etwas Platz um den Text zu erstellen.

Better text

Besser Text


Durch das Hinzufügen dieser Zeilen:

font-weight: normal;

text-align: left;

font-family: Georgia, serif;

font-size: 18.0px;

line-height: 140%;

padding: 10px;


Hier ist der Code, den ich hinzugefügt, um das zu erreichen. Erneut seine lohnen, für die Browserkompatibilität zu sehen, wo einige Code wird erst in einigen Browsern und Lager daran, wenn Sie entwerfen Ihre Seiten zu arbeiten.

Browser wird sich die ganze Zeit zu unterstützen, CSS3 und HTML5 so dont zu fürchten, sie zu nutzen aktualisiert, nur bewusst sein. Was mehr ist es nicht nur die traditionellen Web-Browser sind Sie in der Lage, für die mit diesem Code wie Safari, Chrome und Firefox etc. zielen Es funktioniert auch sehr gut auf iOS und Android auch. Wenn das nicht machen, es lohnt sich, was wird dann?



Related Videos
Comments (0)

You must be logged in to comment.

What's New in Logic 10.4.5
Logic Pro X 10.4.5
Dream It. Do It.
Do you want to learn What's New in Logic 10.4.5?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: