Mitgliederversammlung 2018


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 8.9.2018 um 10:00 Uhr in Dortmund statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite https://forum.selfhtml.org/events/3.

Interessierte Gäste sind gern gesehen.

CSS/fertige Layouts/Visitenkarte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Ein eleganter OnePager als Landing Page oder Portfolio für eine Bewerbung. Natürlich responsiv und mit allem drin!

Beispiel: Visitenkarte für's Web
ScreenshotScreenshot

Besonderheiten[Bearbeiten]

HTML-Struktur[Bearbeiten]

Ein Onepager benötigt keine Navigation und deshalb auch kein main-Element für den Hauptinhalt. Deshalb gibt es neben den header und footer nur noch einen article für den Seiteninhalt und ein aside für die Kontaktdaten.

Innerhalb des article gibt es einen Absatz, je eine sortierte (ol) sowie eine unsortierte Liste (ul) und ein Zitat, das mit einem blockquote-Element ausgezeichnet wurde.

lesenswert:

CSS[Bearbeiten]

Ähnlich wie im CSS-Garten gibt es einen Styleswitcher, der die passende Anzeige und den Weiter-Button erzeugt und die verfügbaren Stylesheets nach dem Zufallsprinzip wechselt.

Beispiel: script-Element, das Styleswitcher lädt
1 <!DOCTYPE html>
2 <html lang="de">
3 <head>
4 	<meta charset="utf-8">
5 	<meta name="viewport" content="width=device-width, initial-scale=1.0">    
6 	<link rel="stylesheet" href="./css/standard.css" id="stylesheet">
7 	<script src="js/stylesheet-wechsler.js"></script>
Um die Visitenkarte ohne Styleswitcher zu verwenden, müssen Sie nur das script-Element in Zeile 7 entfernen.

Standard[Bearbeiten]

Dieses Stylesheet zeigt mit seinen Hintergrundfarben aus der Selfhtml-Palette, wie die einzelnen Seitenelemente aufgebaut sind. Inhaltsbereich (article) und Kontaktdaten (aside) bestehen bei genügend großer Viewportbreite aus zwei gleichbreiten, mit Grid Layout erzeugten, Spalten - etwas was man in den folgenden Entwürfen besser aufteilen kann.

Da seh ich schwarz![Bearbeiten]

Da das Selbstportrait einen dunklen Hintergrund hat, liegt es nahe, diese Farbe für die gesamte Webseite zu verwenden. Als Schriftfarbe wurde lightyellow gewählt, nur die h1-Überschrift und die Pseudoelemente des Zitats erhalten einen goldenen Akzent.

Ochsenblut[Bearbeiten]

Dieses Theme zeigt sich in sehr dunklem Rot, wurde natürlich nicht mit Blut sondern kleinen Bits und Elektronen erzeugt. Als Kontrastfarbe wurde ein beige gewählt. Die Überschriften wurden durch Auswahl einer anderen Schrift und eines anderen Schriftschnitts größer und schlanker formatiert:

Beispiel: Gestaltung von Überschriften
header * {
	text-align: center;
	font-family: 'Roboto', sans-serif;	
}

header h1 {
	font-size: 4em; 
	font-weight: normal; 
	text-transform: uppercase; 
	text-shadow: 2px 2px 0 #000;
}

header p a, h2 {
	font-size: 1.8em; 
	letter-spacing: -1px; 
	color: #DFBF84; 
	text-transform: uppercase; 
	text-shadow: 1px 1px 0 #000; 
}

real von n-gin[Bearbeiten]

Dieser Entwurf von n-gin zeichnet sich durch eine elegante Farbgebung aus. Header und footer haben einen grün-türkisen Verlauf als Hintergrund. Die weiße Textfarbe sorgt für einen guten Kontrast. Der Inhaltsbereich ist in Graustufen gehalten.

runde Sache[Bearbeiten]

Dieses Design wird von den runden Elementen bestimmt. Während das aside-Element ein SVG-Hintergrundbild erhält, wird das Selbstportrait mithilfe von border-radius und object-position passend abgerundet.

Beispiel: Formatierung von img-Elementen mit object-fit
article img {
	object-fit: cover;
	object-position: 50% 0;
	border-radius: 50%;
	width: 40em;
	height: 40em;
}
Ein Objekt, das einen border-radius von 50% hat, wird zu einem Oval; wenn Breite und Höhe gleich sind zu einem Kreis. Allerdings würde ein Bild so verzerrt werden.
Mit object-fit:cover; wird das Bild proportional dargestellt, mit object-position passsend verschoben, dass sich das Gesicht im Mittelpunkt befindet.

Siehe auch

Beispiel: Pseudoelement als Dekoration
blockquote::before {
content: '';
width: 16em;
height: 16em;
border-radius: 50%;
border-left: 5px solid rgba(183,104,71,0.5);
position: absolute;
top: -2em;
left: -1em;
z-index: -1;
}}
Das Zitat wird durch eine sichelförmige Form dekoriert. Da dies nicht Teil des Inhalts ist, wird mit ::before ein (leeres) Pseudoelement erzeugt, das einen linken Rand erhält (sonst ist es transparent). Durch border-radius:50% entsteht die halbkreisförmige Kurve.

Quadratisch, praktisch, gut![Bearbeiten]

Dieser Entwurf basiert auf dem gar nicht mehr so neuen Kachellook von Windows 10. Die einzelnen Seitenelemente erhalten je die gleiche Breite und Höhe, je nach Inhalt 10x10, 20x20 oder 40x40rem groß. Mit Grid layout werden die Elemente im Raum verteilt - durchaus auch entgegen ihrer Reihenfolge im Markup.

ToDo (weitere ToDos)

Funzt wegen der Kindeskindelemente nicht so wie gewollt.

Es müssten die einzelnen, übereinanderliegenden Raster so angepasst werden, dass die article ul li unten rechts richtig positioniert sind. Dann wäre der Entwurf aber immer noch nicht völlig responsiv.

Das Stylesheet kann im ZIP-Ordner angesehen werden, ist aber nicht eingebunden. --Matthias Scharwies (Diskussion) 07:17, 13. Mai 2018 (CEST)
Beispiel: Grid Layout für article
@media (min-width: 55em) {
article {
	grid-column: 2 / 3;
	display: grid;
	grid-template-columns: repeat(3, 10em);
	grid-template-rows: repeat(4, 10em);
	grid-gap: 1rem;
	width: 55em;
}
}
Das article-Element ist einerseits Gridelement des Grid-Container body, andererseits wird es selbst zum Grid-Container, in dem die Kindelemente, nicht aber die Kindeskindelemente angeordnet werden.
Empfehlung: Sie sollten die Reihenfolge im Markup und in der Darstellung immer so anpassen, dass sie in beiden Darstellungsformen semantisch richtig ist, also der Bedeutung entspricht.

Die Liste mit den Werken besteht nun aus gekachelten Vorschauansichten. Dazu erhält der Text per CSS eine transparente Schriftfarbe und eine Textgröße von 0; die Links erhalten eine feste Breite und Höhe und ein entsprechend skaliertes Hintergrundbild:

Beispiel: Hintergrundbilder anstelle der Listenelemente
article ul li {
	list-style-type: none;
	color: transparent;	
}

article ul a {
	background-size: cover;
	width: 10rem;
	height: 10rem;
	display:block;
	color: transparent;	
}

article ul li:nth-of-type(1) a {
	background-image: url("../img/hase.jpg");
}

Alles im Lot[Bearbeiten]

Vertikale Überschriften

ToDo (weitere ToDos)

wird noch erstellt. --17:46, 1. Mai 2018 (CEST)



Hinweis

Urheberrecht: Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.

Weblinks[Bearbeiten]