Kategorien
Stylesheets Webentwicklung

Interessante Schatten für Text-Elemente

Text Schatten
Text Schatten
box-shadowtext-shadow

Mit box-shadow kann einem Kasten ein Schatten einfach und ohne Bilder gegeben werden.

Dagegen bietet text-shadow die Möglichkeit Text mit sogar mehreren Schatten (im Opera) zu versehen. Damit können schöne Effekte wie Leuchten usw. erzielt werden.

h1 { text-shadow: .2em .2em #ccc; }
  • stellt für Überschriften (H1) einen hellgrauen Schatten ein.
Kategorien
Stylesheets Webentwicklung

How to use the target attribute

Prozess Pyramide

target

Die Eigenschaft target ersetzt das nicht mehr valide HTML-Attribut target="".

Mit den Werten none, window und tab kann festgelegt werden, ob der Browser einen Link im gleichen Fenster, in einem neuen Fenster oder als neuen Tab öffnen soll.

Der :target-Selektor ist eine dynamische Pseudoklasse und selektiert Elemente, die Ziel eines Verweises sind.

Beispiel:

a:target { 
  color: red; 
}

In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter Schrift dargestellt.

Kategorien
Stylesheets Webentwicklung

How to use CSS property resize

html code beispiel

resizeoutline

Die Eigenschaft resize bestimmt, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann.

Mit outline kann ein Rahmen zum Hervorheben um Elemente herumgelegt werden, der aber nicht die Box breiter macht.

Eine Veränderung der Größe ist nur möglich und sinnvoll, wenn die overflow-Eigenschaft des Elements einen Wert hat, der verschieden von visible ist.
Chrome und Safari lassen keine Verkleinerung des Elementes zu.

Kategorien
Stylesheets Webentwicklung

Das klassische Boxmodell einfach erklärt

Prozess Pyramide

Mit CSS können Sie Elementen (feste) Breiten, Höhen und Abstände geben und diese nebeneinander positionieren.

Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Box-Modell“. Es ist somit Grundlage jeden Layouts.

Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die Sie frei formatieren können.

Beispiel:

overflow-x, overflow-y

Mit overflow-x und overflow-y kann der “Überlauf” eines Elementes(overflow) für jede Richtung einzeln eingestellt werden (also ob z.B. ein Scrollbalken angezeigt werden soll).

box-sizing

Mittels box-sizing kann eingestellt werden ob sich die Breite eines Elementes auf deren Inhalt oder auf Inhalt+Rahmen+padding bezieht. (Webkit: -webkit-box-sizing)

calc()

Die Eigenschaft calc(), die z.B. innerhalb einer CSS-Eingeschaft wie width oder height stehen kann, ist es möglich Breiten- und Längenangaben direkt auszurechnen.

Kategorien
Stylesheets Webentwicklung

How to create an multi column layout

CSS Programming Image

column

Um die Erstellung eines mehrspaltigen Seitenlayouts ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden.

Zum einen kann man mit column-count festlegen, wie viele Spalten erzeugt werden sollen, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.

Beispiel:

body {
    display: grid;
		gap: 10px;
}

@media (min-width: 500px) { 

body {
 grid-template-columns: 1fr 3fr 1fr;	
 grid-template-rows: auto 1fr 100px;
}

header,footer {
  grid-column: 1 / -1;
}

Zusammenfassend kann gesagt werden: Das Holy-Grail-Layout ist ein Webseiten-Layout, das mehrere, trotz unterschiedlichen Inhalts gleich hohe Spalten hat.

Weiterführende Infomationen findet ihr auf: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts

Kategorien
Stylesheets Webentwicklung

How to set properties with selectors

Prozess Pyramide

CSS 3 Selektoren

Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren.

Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Regelsatz an CSS-Deklarationen auf das Element angewendet wird. Der Selektor ist somit der Teil vor den geschweiften Klammern.

Mit neuen Selektoren kann man Elemente noch genauer auswählen.

Beispiele:

first-of-type
first-letter
Kategorien
Stylesheets Webentwicklung

Background property in Stylesheets

CSS Programming Image
Bessere Steuerung von Hintergrundbildern

background-origin, -clip

Mit background-origin kann man angeben, ob das Hintergrundbild am Rahmen, am Innenabstand oder am Inhalt ausgerichtet werden soll. (Webkit: -webkit-background-composite)

background-clip gibt an, ob sich das Hintergrundbild bis in den Rahmen erstrecken soll oder nicht hinter dem Rahmen angezeigt werden soll. (Webkit: -webkit-background-clip)

Größe von Hintergrundbildern

background-size

Mit background-size kann die Größe von Hintergrundbildern angegeben werden. Dies ist vor allem Wichtig um zukünftig SVG Grafiken sinnvoll als Hintergrundbilder einzusetzen.

Mehrere Hintergrundbilder

Mehrere Hintergrundbilder

In CSS3 können für ein Bild mehrere Hintergrundbilder angegeben werden. Dadurch müssen für viele Effekte keine ansonsten unnötigen HTML-Elemente eingefügt werden.

Für mehr Informationen schaut auch auf: https://wiki.selfhtml.org/wiki/CSS

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

Tolle Backgrounds mit :gradient

CSS Programming Image

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

Schrift und Satz – der Textfluss

CSS Programming Image
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.