CSS/fertige Layouts/Visitenkarte
Ein eleganter OnePager als Landing Page oder Portfolio für eine Bewerbung. Natürlich responsiv und mit allem drin!
- Download: ZIP-Datei (440KB, Prüfsumme: )
Inhaltsverzeichnis
Besonderheiten
HTML-Struktur
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:
- HTML-Grundgerüst als Ausgangslage für zukunftsfähige Projekte
- Seitenstrukturierung mit den „neuen“ HTML5-Elementen
CSS
Ä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.
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>
Standard
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!
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
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:
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
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
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.
article img {
object-fit: cover;
object-position: 50% 0;
border-radius: 50%;
width: 40em;
height: 40em;
}
Mit
object-fit:cover; wird das Bild proportional dargestellt, mit object-position passsend verschoben, dass sich das Gesicht im Mittelpunkt befindet.Siehe auch
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!
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.
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.
Wenn die CSS-subgrid-Eigenschaft besser unterstützt wird, kann dieser Entwurf angepasst werden.
@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.
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:
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");
}
