• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Farbverlauf

B

bobosse

Neues Mitglied
Hallo, ich bin gerade neu hier. Ich habe mir eine Internetseite über Jimdo gemacht. Hochzeitfotograf in Freiburg, Colmar - Hochzeitfotograf in Freiburg, Colmar.
Ich will bei meine home page das Hintergrund des text in einen Grau Farbverlauf machen. So wie bei diese Link Hochzeitsfotograf - FAQ || inside-foto.de.
Ich habe die möglickeit uber Jimdo eine html text zu schreiben. Es sieht so aus :

<p>

<strong>Verschiedenen Hochzeitsfotopakete</strong>
</p>
<p>
<strong><br /></strong>
</p>
<p>
Es ist nie einfach zu bedenke wie lange der Hochzeitsfotograf für euch da sein soll. Um es für euch zu erleichtern, habe ich für Sie drei Hochzeitfotograf -Pakete als Wahl, zwischen welchen Sie
sich entscheiden können. Zu den Paketen biete ich Ihnen die Möglichkeit zusätzlich eine passwortgeschützte Online-Galerie für Ihre Verwandten und Freunde oder eine Version Ihrer&nbsp; Foto- DVD
zu bestellen. Ob Sie sich kirchlich oder standesamtlich trauen lassen – ich mache Ihre Trauung unvergesslich.
</p>

Kann mir jemand helfen ?

MFG
 
Du brauchst dazu keine Farbverlaufsgrafik sondern musst lediglich diesen Code
HTML: 
.n j-text{               
/* Beginn Farbverlauf */
                background: #c8d0d4; /* Old browsers */
                background: -moz-linear-gradient(top, #c8d0d4 0%, #eff4f7 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8d0d4), color-stop(100%,#eff4f7)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #c8d0d4 0%,#eff4f7 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #c8d0d4 0%,#eff4f7 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #c8d0d4 0%,#eff4f7 100%); /* IE10+ */
                background: linear-gradient(top, #c8d0d4 0%,#eff4f7 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8d0d4', endColorstr='#eff4f7',GradientType=0 ); /* IE6-9 */
              /* Ende Farbverlauf */
}
in dein Stylesheet einbauen.

Der Farbverlauf funktioniert in allen modernen Browsern inkl. IE6

Erstellt wurde der Code mit diesem Generator Ultimate CSS Gradient Generator - ColorZilla.com

und nachfolgend noch eine komplette Beispielseite für den Farbverlauf zum Soforttesten:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>seitliche innere Schatteneffekte nur mit CSS3</title>
        <style type="text/css">
            body {             
                background-color:black;
            }
            #kasten {
                background-color:white;
                color:black;
                position:relative;
                margin: 0 auto;
                width:60%;
                /* Hier den Code fÜr den Farbverlauf einfügen */
                background: #c8d0d4; /* Old browsers */
                background: -moz-linear-gradient(top, #c8d0d4 0%, #eff4f7 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8d0d4), color-stop(100%,#eff4f7)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #c8d0d4 0%,#eff4f7 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #c8d0d4 0%,#eff4f7 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #c8d0d4 0%,#eff4f7 100%); /* IE10+ */
                background: linear-gradient(top, #c8d0d4 0%,#eff4f7 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8d0d4', endColorstr='#eff4f7',GradientType=0 ); /* IE6-9 */
              /* Ende Farbverlauf */
            }
            #kasten p {
                margin: 10px 15px;
            }
         </style>
    </head>
    <body>
        <div id=kasten>
            <p>Lorem ipsum dolor sit amet consectetuer est vestibulum risus tempus Donec. Venenatis condimentum a tristique cursus eleifend lacinia dapibus faucibus Sed non. Congue Pellentesque ut quis id est malesuada porttitor Aliquam venenatis In. Sed lorem id vitae quam urna scelerisque tempor interdum odio habitasse. Ipsum vitae libero Aenean Phasellus Aenean In id pretium Nunc pellentesque. Lorem condimentum tempor a sit nibh eros auctor wisi.</p>
            <p>Ornare mauris auctor id sagittis pellentesque ridiculus faucibus convallis diam dui. Adipiscing facilisi justo interdum a orci ipsum tristique volutpat ipsum consectetuer. Volutpat Nullam tempor tincidunt Proin id et sapien Phasellus metus condimentum. Et Ut cursus eu Duis Phasellus vitae mauris risus mi vel. Pede Maecenas cursus adipiscing pharetra urna euismod massa risus enim nibh. Curabitur fringilla eget ac amet id magna est tincidunt Nam turpis. Turpis Aliquam.</p>
            <p>Nisl vestibulum condimentum eros sodales et mattis eros laoreet Nulla pretium. Natoque congue tristique parturient justo nec elit pretium Vestibulum at massa. Tellus et diam Vestibulum non faucibus massa Pellentesque sit justo pellentesque. Suspendisse ut Curabitur leo sit massa a Sed Suspendisse tortor et. Fringilla urna semper vel enim Vivamus adipiscing congue Curabitur porta Fusce. Sociis ac Ut Pellentesque Vestibulum auctor interdum tincidunt eros tortor pretium. Tincidunt.</p>
        </div>
    </body>
</html>
 
Puh, so ein Kram wäre ein echter Grund, doch auf einen CSS-Preprocessor zu setzen… Andererseits sind die zahlreichen Vendor-Prefixes wirklich nicht das, was die Leute meinen, wenn sie von „standardkonformem Webdesign“ und „don't break the web“ sprechen. :)
 
Die Browser-Präfixe werden ja zum Glück verschwinden, so wie es bei anderen Attributen auch der Fall war und dann kann man das Attribut sehr einfach verwenden. Nicht umsonst habe ich mich hier eines Generators bedient, um den Code zu erzeugen. Jedoch, das Ergebnis kann sich sehen lassen und sieht in allen Browsergrössen super aus.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben