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

Geschlossen
  1. Do. 06.04.2023 11:59 Uhr #1
    User Pic
    Slipi Hall Of Fame
    Registriert seit
    19.01.2018
    Beiträge
    954
    Beitragswertungen
    120 Beitragspunkte
    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.
  2. Do. 06.04.2023 12:11 Uhr #2
    User Pic
    Slipi Hall Of Fame
    Registriert seit
    19.01.2018
    Beiträge
    954
    Beitragswertungen
    120 Beitragspunkte
    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.
  3. Do. 06.04.2023 12:35 Uhr #3
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.675
    Beitragswertungen
    1212 Beitragspunkte
    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 lächeln


    Zuletzt modifiziert von Lord|Schirmer am 06.04.2023 - 12:36:58
    rules :: doku :: faq :: linkus
    1 Mitglieder finden den Beitrag gut.
  4. Do. 06.04.2023 14:51 Uhr #4
    User Pic
    Slipi Hall Of Fame
    Registriert seit
    19.01.2018
    Beiträge
    954
    Beitragswertungen
    120 Beitragspunkte
    ZitatZitat 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 lächeln


    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.
  5. Do. 06.04.2023 19:46 Uhr #5
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.675
    Beitragswertungen
    1212 Beitragspunkte
    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.
  6. Do. 06.04.2023 19:55 Uhr #6
    User Pic
    Slipi Hall Of Fame
    Registriert seit
    19.01.2018
    Beiträge
    954
    Beitragswertungen
    120 Beitragspunkte
    ZitatZitat 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.
  7. Sa. 03.06.2023 15:12 Uhr #7
    User Pic
    Slipi Hall Of Fame
    Registriert seit
    19.01.2018
    Beiträge
    954
    Beitragswertungen
    120 Beitragspunkte
    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.
  8. Mi. 20.09.2023 00:03 Uhr #8
    User Pic
    Slipi Hall Of Fame
    Registriert seit
    19.01.2018
    Beiträge
    954
    Beitragswertungen
    120 Beitragspunkte
    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.
  9. Mi. 20.09.2023 14:10 Uhr #9
    User Pic
    RTX2070 Hall Of Fame
    Registriert seit
    14.06.2019
    Beiträge
    284
    Beitragswertungen
    48 Beitragspunkte
    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.
Geschlossen

Zurück zu Design- und Projektvorstellungen

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten