Vorschläge für Design

Gehe zu Seite:

Geschlossen

Do. 06.04.2023 11:59 Uhr #1

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
955

Beitragswertungen

Ich Grüße Euch

Ich möchte gerne eine neue Reihe eröffnen, die Euch Website creater als Vorschläge dienen. Manche Vorschläge sind Spielerei und manche Vorschläge sind recht nützlich.

Wenn jemand sein Layout bearbeitet, gehe ich davon aus das HTML/CSS Kenntnisse vorhanden sind, daher sind meiner Vorschläge nicht für Anfänger gedacht (werde keine genaue Anleitung posten).

Ich hafte nicht für Schäden !!Daher bitte mit bedacht vorgehen!!.

Meine Vorschläge werden immer auf meiner Testseite umgesetzt, sodass jeder diese begutachten kann.

Ich werde versuchen wöchentlich ein paar Vorschläge/Tipps zu geben.

Zuletzt modifiziert von Slipi am 06.04.2023 - 19:56:23

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren

Do. 06.04.2023 12:11 Uhr #2

Slipi Hall Of Fame

Keyframes Teil1

Dieser Vorschlag sehe ich eher in der Navigation oder berreiche mit kleinen content.
Es werden durch die Pseudo-Elemente ::after und ::before formen erzeugt, die durch keyframes animiert werden.
Durch die transform: skewX(50deg) neigen wir das element, sollte keine Neigung vorhanden sein müsst ihr diese einfach entfernen.

keyframes kulturbanause.de/blog/css-keyframe-animationen/
Pseudo-Elemente ::after ::before externer Link
transform wiki.selfhtml.org/wiki/Transform

@media (min-width:768px) {
    .nav:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    transform: skewX(50deg);
    -webkit-transform: skewX(50deg);
    -moz-transform: skewX(50deg);
    -ms-transform: skewX(50deg);
    -o-transform: skewX(50deg);
    animation-name: run;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-delay: .8s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background: linear-gradient(to right,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.2) 20%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.4) 100%);
    z-index: -1;
}
}
@keyframes run{
 0% {
   left: 0%;
 }
 
 100% {
 left: 100%;
 }
}

Das Resultat findet ihr in der Navigation meiner Test-Seite working.sd-sdesign.at/ .

Slipi

slipi.at/

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 06.04.2023 12:35 Uhr #3

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

Find ich gut... wir brauchen Kreativität.

In deiner Umsetzung hast Du ::before auf z-index: 1, sobald man ein Menüpunkt auswählt, dadurch wird das horizontale Menü verdeckt. Außer dies war so dein Gedanke. Auf der Startseite passt es.

Ansonsten bin ich neugierig auf mehr

Zuletzt modifiziert von Lord|Schirmer am 06.04.2023 - 12:36:58

rules :: doku :: faq :: linkus
1 Mitglieder finden den Beitrag gut.
- zitieren
Do. 06.04.2023 14:51 Uhr #4

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
955

Beitragswertungen

Zitat geschrieben von Lord|Schirmer
Find ich gut... wir brauchen Kreativität.

In deiner Umsetzung hast Du ::before auf z-index: 1, sobald man ein Menüpunkt auswählt, dadurch wird das horizontale Menü verdeckt. Außer dies war so dein Gedanke. Auf der Startseite passt es.

Ansonsten bin ich neugierig auf mehr

Zuletzt modifiziert von Lord|Schirmer am 06.04.2023 - 12:36:58

Ich hatte die Navigation mit hidden bearbeitet, würde ich dies nicht tun sieht man außerhalb der Navigation die Objekte und verbreitet es.

Slipi

Zuletzt modifiziert von Slipi am 06.04.2023 - 14:54:19

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 06.04.2023 19:46 Uhr #5

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

Der Navbar id=navigation darfst Du kein overflow=hidden geben, da sonst das Submenü nicht angezeigt werden kann.

rules :: doku :: faq :: linkus
1 Mitglieder finden den Beitrag gut.
- zitieren
Do. 06.04.2023 19:55 Uhr #6

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
955

Beitragswertungen

Zitat geschrieben von Lord|Schirmer
Der Navbar id=navigation darfst Du kein overflow=hidden geben, da sonst das Submenü nicht angezeigt werden kann.

Auch ich lerne nicht aus. Danke für die Info.

Lg

Zuletzt modifiziert von Slipi am 06.04.2023 - 19:55:42

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 03.06.2023 15:12 Uhr #7

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
955

Beitragswertungen

Hallo

Ich habe wieder einen Vorschlag für eure Design´s.

Keyframes Teil2

In diesem Vorschlag lassen wir Nebel im header laufen. Dieser Efekt passt sehr gut in Parallax Scrolling Website.

Parallax: externer Link

Beispiel und Code: codepen.io/Slipi85/pen/QWZezYK

Es kann sein das der Code bei euch nicht anhieb funktioniert, daher müsst ihr eventuell den Code an eurem layout anpassen.

Slipi

slipi.at/
1 Mitglieder finden den Beitrag gut.
- zitieren
Mi. 20.09.2023 00:03 Uhr #8

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
955

Beitragswertungen

Grüße

Wenn man die Statistik box ändert, und per js einen counter hinzufügt, bekommt man einen schöne Darstellung.

Hier ein Beispiel:
codepen.io/Slipi85/pen/bGOowbv

Wenn man die Box des Modul überarbeiten möchte, rate ich euch die Views zu bearbeiten und diese in eurem layout Order hinterlegen github.com/IlchCMS/Ilch-2.0/wiki/Views-%C3%BCberschreiben .

Bei einem Update müsst ihr jedoch die Code-Zeilen in der bearbeiteten views manuell hinzufügen.

Slipi

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren

Mi. 20.09.2023 14:10 Uhr #9

RTX2070 Hall Of Fame

Gute Idee.

Stelle hier dann auch mal 2 HTML-Strukturen zur Verfügung.
Wer Lust und Laune hat, könnte hierauf aufbauen.

Grid-Layout-Struktur (Responsive)
(Header - Footer - Sidebars - Content)

index.php

<?php /** @var $this \Ilch\Layout\Frontend */ ?><!DOCTYPE html>
<html lang="de">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <?=$this->getHeader() ?>
    <link href="<?=$this->getLayoutUrl('style.css') ?>" rel="stylesheet">
    <?=$this->getCustomCSS() ?>
</head>
<body>
 
<div class="rtx_wrapper">
    <header class="header">Header</header>
    <main class="main-content">Main content</main>
    <section class="left-sidebar">Left sidebar</section>
    <aside class="right-sidebar">Right sidebar</aside>
    <footer class="footer">Footer</footer>
</div>
 
<?=$this->getFooter() ?>
</body>
</html>

style.css

.rtx_wrapper {
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'footer';
}
 
.rtx_wrapper > * {
    padding:1rem;
}
 
.rtx_wrapper > .header {
    grid-area:header;
    background:#f97171;
}
.rtx_wrapper > .main-content {
    grid-area:main-content;
    background:#fff;
}
.rtx_wrapper > .left-sidebar {
    grid-area:left-sidebar;
    background:#f5d55f;
}
.rtx_wrapper > .right-sidebar {
    grid-area:right-sidebar;
    background:#c5ed77;
}
.rtx_wrapper > .footer {
    grid-area:footer;
    background:#72c2f1;
}
 
@media (min-width:768px) {
    .rtx_wrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'header header'
            'main-content main-content'
            'left-sidebar right-sidebar'
            'footer footer';
    }
}
 
@media (min-width:1024px) {
    .rtx_wrapper {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content right-sidebar'
            'footer footer footer footer';
    }
}

______________________________________________________________________________________________________________

Flexbox-Layout-Struktur (Responsive)
(Header - Footer - Sidebars - Content)

index.php

<?php /** @var $this \Ilch\Layout\Frontend */ ?><!DOCTYPE html>
<html lang="de">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <?=$this->getHeader() ?>
    <link href="<?=$this->getLayoutUrl('style.css') ?>" rel="stylesheet">
    <?=$this->getCustomCSS() ?>
</head>
<body>
 
<div class="rtx_wrapper">
    <header class="header">Header</header>
    <main class="main-content">Main content</main>
    <section class="left-sidebar">Left sidebar</section>
    <aside class="right-sidebar">Right sidebar</aside>
    <footer class="footer">Footer</footer>
</div>
 
 
 
<?=$this->getFooter() ?>
</body>
</html>

style.css

* {
    box-sizing:border-box;
}
 
.rtx_wrapper {
    display:flex;
    flex-wrap:wrap;
}
 
.rtx_wrapper > * {
    width:100%;
    padding:1rem;
}
 
.rtx_wrapper > .header {background:#f97171}
.rtx_wrapper > .main-content {background:#fff}
.rtx_wrapper > .left-sidebar {background:#f5d55f}
.rtx_wrapper > .right-sidebar {background:#c5ed77}
.rtx_wrapper > .footer {background:#72c2f1}
 
@media (min-width:768px) {
    .rtx_wrapper > .left-sidebar,
    .rtx_wrapper > .right-sidebar {
        width:50%;
    }
}
 
@media (min-width:1024px) {
    .rtx_wrapper > .header {
        order:-2;
    }
    .rtx_wrapper > .left-sidebar {
        order:-1;
    }
    .rtx_wrapper > .main-content {
        width:50%;
    }
    .rtx_wrapper > .left-sidebar,
    .rtx_wrapper > .right-sidebar {
        width:25%;
    }
}

0 Mitglieder finden den Beitrag gut.

zitieren

Geschlossen

	Zurück zu Design- und Projektvorstellungen

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » Design- und Projektvorstellungen » Vorschläge für Design