Schlagwort: CSS Grundlagen

Kategorien
Stylesheets Webentwicklung

Schrift und Satz – der Textfluss

CSS Programming Image

Schrift bedeutet, wie die Buchstaben und Wörter geschrieben sind. Zum Beispiel, welche Schriftart und -größe genutzt werden. Das hilft dabei, dass der Text leicht zu lesen ist.

Satz ist, wie der Text auf einer Seite oder auf dem Bildschirm angeordnet ist. Das betrifft, wie der Text in Abschnitte aufgeteilt ist, ob er links oder in der Mitte steht, wie viel Platz zwischen den Zeilen ist und wie die Absätze beginnen. Ein guter Satz sorgt dafür, dass der Text gut aussieht und einfach zu verstehen ist.

Der Textfluss ist die Art und Weise, wie der Text im Dokument angeordnet ist. Er bestimmt, wie der Text gelesen wird, indem er die Abschnitte und Seiten ordnet. Ein guter Textfluss macht den Text leichter verständlich und angenehm zu lesen. Alle diese Dinge arbeiten zusammen, um sicherzustellen, dass der Text gut aussieht und leicht zu lesen ist. Designer und Autoren denken darüber nach, um sicherzustellen, dass ihre Texte ansprechend und verständlich sind.

text-wrap

Bessere Steuerung von Zeilenumbrüchen: Mit text-wrap können Zeilen an Interpunktionszeichen umgebrochen werden.

word-wrap

Mit word-wrap legt man fest wie Wörter umgebrochen werden dürfen. hyphenate bricht Wörter um, indem an die vorangehende Silbe ein “-” angehängt wird.

word-break

Die word-break-Eigenschaft legt fest, welche Zeilenumbruch-Beschränkungen für ein Element gelten. Diese Eigenschaft ist nur für asiatische Schriftarten interessant.

Textfluss

text-overflow

Was mit überfließendem Text geschehen soll, kann mit text-overflow gesteuert werden. Hier kann man z.B. automatisch bei zu langem Text Pünktchen “…” anhängen lassen. (Opera:-o-text-overflow )

Blöcke

text-align-last

Die Eigenschaft text-align-last gibt (falls text-align:justify; gesetzt ist) an, wie die letzte Zeile des Blocksatzes gehandhabt werden soll.

text-justify

Genauso verhält sich auch text-justify zu text-align. Diese Eigenschaft gibt an wie stark der Blocksatz erzeugt werden soll. Zum Beispiel nur durch die Zwischenräume der Wörter oder auch durch die Zwischenräume der Buchstaben.

Sonstige

Mit white-space-collapse kann, wie der Name schon sagt, die Handhabung von Leerzeichen gesteuert werden.

Die Eingeschaften text-align, letter-spacing und word-spacing erhalten weitere Werte.

text-kashida-space ist eine Eigenschaft die noch undefiniert ist. Unter Umständen kommt diese auch gar nicht im CSS3 zum Einsatz.

WebFonts

@font-face

Mit @font-face kann eine beliebige Schriftdatei auf einem Server angegeben werden, die dann heruntergeladen und vom Browser verwendet wird. Zu beachten ist hierfür aber besonders die Lizenzart der Font.

Dies war eigentlich schon seit sehr langer Zeit in der CSS2 Spezifikation, wurde aber mangels Browserunterstützung in CSS 2.1 wieder entfernt.

@font-face {
      font-family: "Fertigo";
      src: url(http://www.taptaptap.com/Fertigo.otf)
          format("opentype");

Neuste WebKit-Versionen (Safari 3) enthalten diese Funktion, Schriften dynamisch nachzuladen. Der Internet Explorer unterstützt seit Version 4 das nachladen von Schriftarten im eigenen .eot-Format.

Kategorien
Stylesheets Webentwicklung

Let’s create – Positionieren mit :float

Kleines Beispiel zur Positionierung von Bildern und Text mit der Eigenschaft float. Insbesondere das Verhalten von Bildern im Textfluß werde ich hier darstellen. Die Codebeispiele könnt ihr zum Testen und üben hernehmen. Also dann: “Lorem ipsum”.

Beispiel 1 enthält etwas Content und ein Bild. Zu sehen ist die bekannte Positionierung mit entsprechendem Hintergrund, um es sichtbar zu gestalten:

Beispiel 1
Beispiel 1

Hier der entsprechende Code dazu.

Weiterlesen “Let’s create – Positionieren mit :float”
Kategorien
Stylesheets Webentwicklung

Das CSS Box Model – Quick Start

Mit dem Box Model wird festgelegt welche CSS Angaben zur Bestimmung der Größe einer HTML Box relevant sind.

Wir haben einmal den Inhalt einer Box, bestimmt durch width und height.

Dazu kommen Werte für den Innenabstand, Rahmen und Außenabstand. Ich denke das schafft die meiste Verwirrung.
Aus dem Grund habe ich das noch einmal grafisch dargestellt.

Der äußere schwarze Rand stellt die gesamte Box dar.

Das Box Model in CSS
Das Box Model in CSS

Ein Festlegung von:

.meinebox {
width: 100px;
height: 50px;
padding: 10px;
border: 5px;
margin: 10px;
}

erzeugt einen effektive Breite der definierten Box von 150px.

Padding, Border und Margin gelten sowohl für rechts als auch für links.

Kategorien
Stylesheets Webentwicklung

Everything you need – Grid Layouts

Die Möglichkeit mit Grid Layouts bietet eine Möglichkeit eine Seite in größere Bereiche zu unterteilen oder die Beziehung in Bezug auf Größe, Position und Ebene zwischen Teilen eines Steuerelements zu definieren.

Wie bei Tabellen ermöglicht das Rasterlayout einem Autor, Elemente in Spalten und Zeilen auszurichten. Mit CSS Grids sind ein vielfaches mehr an Layoutmöglichkeiten realisierbar oder deutlich einfacher als durch den Einsatz von Tabellen machbar ist.

Hier eine kleine Demo dazu.

Grid Layout
Grid Layout

Der dargestellte Bereich ist veränderlich je nach Breite des Browserfensters.
Im nachfolgenden findet ihr den Code für die Darstellung “Grid Layout”.

Die Grid-Eigenschaft ist eine abgekürzte Schreibweise, die alle expliziten und impliziten Grid-Eigenschaften in einer einzigen Deklaration festlegt.

Erklärung

Zuerst der Header mit den CSS Statements.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Spaltenlayout</title>
<style>
body {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 2fr 1fr;
}
nav {
  grid-column: 1;
  grid-row: 2;
  padding: 1rem;
  background-color: #FAC273;
}
article {
  grid-column: 2;
  grid-row: 2;
  padding: 1rem;
  background-color: #5B67FA;
  color: #F1F1F1;
}
footer {
  grid-column: 1 / 4;
  grid-row: 3;
  padding: 1rem;
  background-color: #4DB7FA;
}
header {
  grid-column: 1 / 4;
  grid-row: 1;
  padding: 1rem;
  background-color: #AA66FA;
}
aside {
  grid-column: 3;
  grid-row: 2;
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  background-color: #DDDDDD;
  box-shadow: inset 5px 0 5px -5px #111111;
  font-style: italic;
  color: #30606E;
}
aside > p {
    margin: 0.5rem;
}
p {
    font-family: sans-serif;
}
</style>
</head>

Der HTML Code nimmt sich dagegen recht einfach aus.

<body>
<header>
  <p>Hier erscheint der Kopfbereich</p>
</header>
<nav>
  <p>...Menüs evtl.</p>
</nav>
<aside>
  <p>Das ist ein Bereich der neben dem Inhalt angezeigt wird</p>
</aside>
<article>
  <p>Hier erscheint der Inhalt.</p>
  <p>Hier erscheint mehr Inhalt.</p>
  <p>Hier erscheint noch mehr Inhalt.</p>
</article>

<footer>
  <p>Fussbereich</p>
</footer>
</body>
</html>

Zusammenfassend ist zu sagen, mit dem Grid System können alle denkbaren Kombinationen erstellt werden. Aber, sie müssen rechteckig sein. L-Formen lassen sich nicht konstruieren.

Der Code dient zur Darstellung des Verhaltens.

Kategorien
Stylesheets Webentwicklung

CSS: Kreative Hintergründe für Websites

CSS Programming Image

Kurzbeschreibung

Effektive Hintergrundgestaltung mit CSS ist entscheidend für das Webdesign. Dabei werden Farben und Bilder als Hintergrund für Webseitenelemente verwendet. CSS ermöglicht die Anpassung von Hintergrundfarben mit Eigenschaften wie background-color und das Hinzufügen von Hintergrundbildern mit background-image. Sie können die Wiederholung der Bilder kontrollieren und deren Position und Größe festlegen. Weiterhin ist es möglich, Transparenz für Hintergründe zu definieren und Gradientenhintergründe mit CSS zu erstellen. Geschickte Kombinationen von Bildern und Farben ermöglichen komplexe Hintergrundeffekte, die die visuelle Anziehungskraft der Webseite steigern können. Insgesamt ist die effektive Hintergrundgestaltung ein wichtiger Faktor für ein ansprechendes Webdesign und eine verbesserte Benutzererfahrung.

CSS definiert drei Typen von gradients:.

  • Linear Gradients (von oben nach unten, von rechts nach links),
  • Radial Gradients (werden um das Zentrum gebildet),
  • Conic Gradients (rotieren um einen Mittelpunkt).

Hier einige Beispiele für einen Background.

linearer Gradient

Das Beispiel zeigt eine linearen Gradienten von oben (rot) nach unten (gelb).

background-image: linear-gradient(red, yellow);

linearer Gradient multi color

Das Beispiel zeigt eine linearen Gradienten von links nach rechts mit mehreren Farben.

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

radialer Gradient multi color

Das Beispiel zeigt eine radialen Gradienten im Bvon innen nach außen mit mehreren Farben.

background-image: radial-gradient(red, yellow, blue);

Das Beispiel zeigt eine konischen Gradienten im Uhrzeigersinn mit mehreren Farben.

background-image: conic-gradient(red 45deg, yellow 90deg, blue 240deg);

Eine gekonnte Background-Gestaltung mit CSS verleiht Webseiten eine visuelle Tiefe und trägt dazu bei, eine ansprechende und benutzerfreundliche Online-Umgebung zu schaffen.

Kategorien
Stylesheets Webentwicklung

Kreative Methoden durch :position

Die Eigenschaft position: gibt die Art der Methode zu der Positionierung an, welche für ein Element verwendet wird (static, relative, fixed, absolute oder sticky).

Position Beispiel
Position Beispiel

position: static;

HTML Elemente werden standardmäßig als static definiert.

Statisch positionierte Objekte werden nicht durch die Angabe top, bottom, left oder right Eigenschaften beeinflusst.

Beispiel 1

div.static {
  position: static;
  border: 2px dotted #73AD21;
  width: 300px;
}

position: relative;

Ein Element mit der Angabe position: relative; wird relativ zu seiner normalen Position positioniert ist. Das Festlegen der oberen, rechten, unteren und linken Eigenschaften eines relativ positionierten Elements führt dazu, dass es von seiner normalen Position ausgehend verschoben werden kann. Andere Inhalte werden nicht angepasst, um die Lücke zu füllen, die das Element hinterlassen hat.

Beispiel 2

div.relative {
  position: relative;
  left: 30px;
  border: 2px solid #11AA11;
  width: 300px;
}

position: fixed;

position: fixed; positioniert ein Objekt relativ zum Ansichtsfenster, folge dessen bleibt immer an der gleichen Stelle, auch wenn die Browserseite gescrollt wird. Die Eigenschaften top, right, bottom und left können verwendet werden, um das Element an die gewollte Stelle zu legen. Ein festes Element hinterlässt keine freie Stelle auf dem Platz, wo es sich befand.

Beispiel 3

div.fixed {
  position: fixed;
  top: 200px;
  left: 250px;
  width: 300px;
  border: 2px inset #AA00BB;
}

position: absolute;

position: absolute; wird relativ zum nächsten positionierten Vorfahren angeordnet. Hierbei können Überlagerungen (gewollt oder ungewollt) auftreten.

Wenn ein absolut positioniertes Element keine Vorfahren hat, verwendet es den Textkörper des Dokuments. Es bewegt sich beim Scrollen der Seite mit.

Beispiel 4

div.absolute {
  position: absolute;
  top: 400px;
  left: 100px;
  width: 300px;
  border: 2px double #FF00AA;
}

position: sticky;

position: sticky; platziert ein Objekt in Abhängigkeit der Position wie gescrollt wurde/wird.

EIn mit sticky positioniertes Objekt wechselt zwischen relative and fixed. Es verhält sich relative solange bis die Scrollposition es aus dem Bild schieben würde, ab dann fixed.

Beispiel 5

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #AAAAAA;
  border: 2px groove #0000AA;
  width: 300px;  
}

Hier noch kurz den HTML Code zu dem kleinen Beispielen.

<body>
<h2>position: sticky;</h2>
<div class="sticky">
Dieses Element besitzt eine sticky Position.
</div>

<h2>position: static;</h2>
<div class="static">
Dieses Element besitzt eine statische Position.
</div>

<h2>position: relative;</h2>
<div class="relative">
Dieses Element besitzt eine relative Position.
</div>

<h2>position: fixed;</h2>
<div class="fixed">
Dieses Element besitzt eine fixe Position.
</div>

<h2>position: absolute;</h2>
<div class="absolute">
Dieses Element besitzt eine absolute Position.
</div>

</body>
Kategorien
Stylesheets Webentwicklung

Elegante abgerundete Rahmen mit CSS

CSS Programming Image
Abgerundete Ecken und Rahmen mit CSS

border-radius

Mit border-radius ist es endlich möglich, Elemente (wie Rahmen) valide mit abgerundeten Ecken / Rahmen zu erstellen.

Für Mozilla- und Safari-Browser gibt es bereits die anbieterspezifischen CSS-Eigenschaften -moz-border-radius und -khtml-border-radius um den Effekt zu erzielen.

Um den Radius für bestimmte Ecken zu definieren, können die Suffixe -topleft, -topright, -bottomright und -bottomleft verwendet werden. Bei Safari wird die Angabe der Ecke eingeschoben: -khtml-border-top-left-radius

Rahmen-Bilder

border-image

Die Eigenschaft border-image können für Rahmen Hintergrundbilder festgelegt werden. Die neue Eigenschaft kann die Angabe von bis zu drei URLs aufnehmen, um die Bilder einzubauen.

Außerdem können mit den Eigenschaften border-top-image, border-bottom-image, border-left-image und border-right-image für alle Kanten eigene Grafiken definiert werden. Die Definitionen der CSS-Eigenschaft werden bei einem Einsatz von überschrieben.

border-corner-image

Last but not least wird mit border-corner-image die Zuweisung von Bildern für alle 4 Ecken möglich sein. Wie von anderen border-Eigenschaften bekannt auch einzeln mit border-top-left-image, border-top-right-image, border-bottom-right-image und border-bottom-left-image.

Kategorien
Stylesheets Webentwicklung

:gradient – tolle Backgrounds

CSS Programming Image

Ein “CSS Gradient” ist eine Methode, um Hintergrundfarben auf einer Webseite zu gestalten, bei der die Farben fließend von einer zur anderen übergehen. Es ist wie ein Farbverlauf. Es kann gerade Linien oder runde Kreise erzeugen, die Farben miteinander vermischen. Dies wird in der Webentwicklung verwendet, um Webseiten hübscher zu machen, indem man Farbübergänge erstellt, ohne Bilder zu verwenden.

Man muss zwischen zwei Arten von Farbverläufen unterscheiden:

Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben

background:-moz-linear-gradient(top,#fff,#adf);/* Firefox */

background:-webkit-linear-gradient(top,#fff,#adf);/* Safari, Chrome */

background:-o-linear-gradient(top,#fff,#adf);/* Opera */

background:-ms-linear-gradient(top,#fff,#adf);/* IE */

background:linear-gradient(top,#fff,#adf);/* W3C Standard */

Radiale Verläufe, kreisförmiger Farbverlauf von zwei oder mehr Farben

background:-moz-radial-gradient(center,#fff,#adf);/* Firefox */

background:-webkit-radial-gradient(center,#fff,#adf);/* Safari, Chrome */

background:-o-radial-gradient(center,#fff,#adf);/* Opera */

background:-ms-radial-gradient(center,#fff,#adf);/* IE */

background:radial-gradient(center,#fff,#adf);/* W3C Standard */

linear-gradient, radial-gradient und conic-gradient sind Werte für background-image, border-image, list-style-image und generated content.

Es gibt drei Formen des CSS-Gradient:

  • Der lineare gerade Verlauf von oben nach unten oder von einer Seite zur anderen,
  • radialer Verlauf oder radial Gradient vom Rand zur Mitte des Elements (z.B. Zielscheibe),
  • konischer Verfauf

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund

Kategorien
Stylesheets Webentwicklung

:opacity und interessante Möglichkeiten

CSS Programming Image

Mit der opacity Eigenschaft kann die Deckkraft/Transparenz von Elementen gesteuert werden. Diese Eigenschaft wird zwar so nicht im Internet Explorer unterstützt, es gibt aber eine ebenbürtige Eigenschaft, wodurch in allen Browsern Transparenz genutzt werden kann.

Beachten Sie: Obwohl der Wert für opacity eine prozentuale Angabe ist, sind Prozentwerte nicht erlaubt.

Empfehlung: Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.

Kategorien
Stylesheets Webentwicklung

CSS Box Model – Tipps

CSS Programming Image

Zu einem Test des CSS Box Model habe ich euch hier den Code einer HTML Datei eingestellt. Das ist nur ein Grundaufbau, ohne Schnick-Schnack.

Die Darstellung verdeutlicht wie die Boxen positioniert werden und welche Abstände gültig werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Das CSS Box Model</title>
        <link type="text/css" rel="stylesheet" media="screen" href="design.css" />
    </head>
    <body>
        <h1 id="title">Das CSS Box Model</h1>
        <div id="content">
            <h2>Anfang</h2>
            <div class="box_1">Box 1</div>
            <div class="box_2">Box 2</div>
        </div>
    </body>
</html>

Zum Ausprobieren gibt es hier auch die dazugehörige CSS Datei als Code. Hiermit könnt ihr euch mit dem CSS Box Model vertraut machen und durch etwas probieren die Effekte selbst erzeugen.

* {
    margin: 0px;
    padding: 0px;
    border: none;
}
html {
    background-color: #FFFFFF;
    color: #111111;
    font-family: Tahoma, Arial, sans-serif;
}
#title {
    background-color: #a2b3c4;
    height: 170px;
    text-align: center;
    padding: 10px;
}
#content {
    margin: 10px;
	padding: 10px;
	background-color: yellow;
}
#content h2 {
    color: #111111;
	margin: 100px;
	padding: 50px;
	max-width: 200px;
	background-color: #22C563;
	border: 5px solid #222222;
}
.box_1 {
	margin: 100px;
	padding: 50px;
	max-width: 200px;
	background-color: #11C563;
	border: 5px solid #888888;
}
.box_2 {
    margin: 100px;
	padding: 50px;
	max-width: 200px;
	background-color: #CDC563;
	border: 5px solid #222222;
}

Hier unten noch ein Screenshot dessen, was die HTML und CSS Datei an Ausgabe erzeugt.

CSS Box Model Beispiel
CSS Box Model Beispiel

Viel Erfolg!