Wie kann man diese Vorlage zum Leben erwecken?

malawi

Hallo,

ist es möglich (wenn ja wie) diese Buttons anzusteuern (verlinken).
Mit html und css habe ich Erfahrung, ich kann mir nicht vorstellen wie das zu realisieren ist.

Heiko

threadi

Das geht mir purem CSS. Die Buttons sind ja nur Links innerhalb von <ul>-Listen. Die <ul> kann den halbtransparenten äußeren Rahmen bilden, die Links dann den inneren Rahmen.

malawi

Ich habe dieses Bild (Vorlage) mit einem Programm erstellt so wie es da zu sehen ist.
Kann ich auf diesen Bild die "gezeichneten" Buttons ansteuern?

Gastl

Ansteuern kannst du diese Buttons mit der Maus. Einfach den Zeiger da hin steuern

Spaß beiseite. Ich würde die Schaltflächen nicht im Bild selber zeichnen, sondern wie dir geraten wurde mit CSS beschreiben und positionieren. Da du Erfahrung mit CSS hast, dürfte das ein Klacks sein, oder?

malawi

Auf diese Art eine Seite zu gestalten bin ich über dieses Video gekommen.
Interessant ist wie er diese Seite verlinkt und die Buttons aktiviert.

Gastl

Wenn du nen Mac dein eigen nennst, nur zu.

MrMurphy

Hallo

Zitat

Auf diese Art eine Seite zu gestalten bin ich über dieses Video gekommen.

Das hat mit aktuellem HTML / CSS nichts zu tun. Um die Jahrtausendwende war das mal in Mode, als Tabellen- und danach fixe Layouts "Stand der Technik" waren.

Seit etwa 10 Jahren gilt aber die Regel, dass Text auch im Quelltext Text sein soll. Andere Lösungen haben zu viele Nachteile.

Mit CSS3 wurden die Möglichkeiten in dieser Hinsicht noch mal kräftig erweitert. Für eine Darstellung wie bei deiner Grafik ist es nicht mehr erforderlich, den Text mit einem Grafikprogramm zu erstellen.

Die Optik mag dann zwar leicht anders sein, das interessiert aber keinen Besucher.

Ich habe mal auf die Schnelle ein Beispiel mit einer Bildgröße wie dein Beispiel erstellt. Da das gesamte Layout mit CSS erstellt ist können Schriftarten, Farben, Abstände und und und natürlich noch angepasst werden - ohne zu einem Grafikprogramm geifen zu müssen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout mit Hintergrundgrafik 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>


   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @import url(https://fonts.googleapis.com/css?family=Asap);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
      }
      body {
         margin: 0;
      }
   }


   /*Farben, Text-Shadow, Box-Shadow*/
   @media all {
      nav {
         background-color: hsla(360,0%,100%, 0.4);
      }
      nav a {
         color: #4d75a6;
         background-color: white;
      }
      main h1 {
         color: lightsteelblue;
         text-shadow:
            1px  1px 1px white,
            1px -1px 1px white,
            -1px  1px 1px white,
            -1px -1px 1px white;
      }
      main >div p {
         color: ivory;
         text-shadow:
            -1px 1px 1px silver;
      }
      footer {
         background-color: hsla(360,0%,100%, 0.3);
      }
      footer a {
         color: #41464c;
         background-color: hsla(208,100%,97%, 0.8);
      }
   }


   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */


   /*Spezielle Einstellungen*/
   @media all {
      body > div {
         background-image: url(http://www.torange-de.com/photo/21/16/Yacht-Segeln-am-Meer-1365151788_32.jpg);
         background-size: cover;
         width: 768px;
         height: 600px;
      }
      nav {
         padding: 0.5rem 0.5rem;
         border-radius: 0.5rem;
         margin-top: 1rem;
         margin-right: 1rem;
      }
      nav a {
         font-size: 1.2rem;
         font-weight: bold;
         text-decoration: none;
         outline: none;
         padding: 0 0.5rem;
         border-radius: 0.4rem;
         margin-right: 0.8rem;
      }
      nav a:last-child {
         margin-right: 0;
      }
      main h1 {
         font-size: 3rem;
         font-family: Asap;
         font-weight: bold;
         margin-top: 5rem;
         margin-left: 5rem;
         margin-bottom: 0;
      }
      main div {
         transform-origin: 50% 100%;
         transform: perspective(300px) rotateX(25deg);
         width: 70%;
         margin-left: 10%;
         margin-top: -4rem;
      }
      main > div p {
         font-family: Asap;
         font-size: 1.3rem;
      }
      footer {
         padding: 0.5rem 0.5rem;
         border-radius: 0.5rem;
         margin-bottom: 1rem;
         margin-right: 1rem;
         align-self: center;
      }
      footer a {
         font-size: 1.2rem;
         font-weight: bold;
         text-decoration: none;
         outline: none;
         padding: 0 1.5rem;
         border-radius: 0.4rem;
         margin-right: 1rem;
      }
      footer a:last-child {
         margin-right: 0;
      }
   }


   /*Flexbox Grundlayout*/
   @media all {
      body > div {
         display: flex;
         flex-direction: column;
      }
      nav {
         align-self: flex-end;
      }
      main {
         flex: 1 1 1%;
      }
   }


   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */


   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <div>
      <nav>
         <a href="#">Home</a>
         <a href="#">Foto</a>
         <a href="#">Kontakt</a>
         <a href="#">Sport</a>
      </nav>
      <main>
         <h1>Fotografie</h1>
         <div>
            <p>Hallo</p>
            <p>Mit seiner Aufnahme in die Elite war Knechts Leben auf eine andre Ebene verpflanzt, es war der erste und entscheidende Schritt in seiner Entwicklung geschehen. Es geht durchaus nicht allen Eliteschülern so, daß die amtliche Aufnahme in die Elite mit dem innern Erlebnis der Berufung zusammenfällt. Das ist Gnade, oder wenn man es banal ausdrücken will: es ist ein Glücksfall.</p>
         </div>
      </main>
      <footer>
         <a href="#">Gästebuch</a>
         <a href="#">Impressum</a>
      </footer>
   </div>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

malawi

Hallo,

danke für deine Antwort und für das Beispiel (Code).
Kopiere den Code und schaue mir dein Beispiel an.
Melde mich ich habe da noch ein paar Fragen

Heiko

malawi

Whau, das sieht ja gut aus und das auf die schnelle! Wie hast die die Schrift so hin bekommen?
Habe lange nichts an meiner HP gemacht da hat sich aber einiges getan, flex container kannte ich nicht

Heiko

MrMurphy

Hallo

Zitat

da hat sich aber einiges getan

Stimmt. Das hat Nach- und Vorteile. Die Webseitenersteller müssen zusätzliche Elemente und Anweisungen lernen. In Fällen wie deinen erspart man sich dafür die große Bearbeitung von Bildern und spätere Änderungen sind einfacher möglich.

Zitat

Wie hast die die Schrift so hin bekommen?

Das sind nur einige wenige CSS-Anweisungen. Der zu kippende Text muss im HTML-Quelltext in einem Container stehen, der durch die beiden folgenden CSS-Anweisungen perspektivisch gekippt wird:

Code

transform-origin: 50% 100%;
transform: perspective(300px) rotateX(25deg);

Zum Testen was welcher Wert bewirkt kannst du ja einfach mal die Werte ändern.

Gruss

MrMurphy

Tags