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

Geschlossen
  1. Do. 06.04.2023 11:59 Uhr #1
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    799
    Beitragswertungen
    97 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
    Grafiken | Layouts | OnePage
    www.sd-sdesign.at
    0 Mitglieder finden den Beitrag gut.
  2. Do. 06.04.2023 12:11 Uhr #2
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    799
    Beitragswertungen
    97 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 www.mediaevent.de/css/generated.html
    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
    Grafiken | Layouts | OnePage
    www.sd-sdesign.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.578
    Beitragswertungen
    1182 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 ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    799
    Beitragswertungen
    97 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
    Grafiken | Layouts | OnePage
    www.sd-sdesign.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.578
    Beitragswertungen
    1182 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 ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    799
    Beitragswertungen
    97 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
    Grafiken | Layouts | OnePage
    www.sd-sdesign.at
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design- und Projektvorstellungen

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten