Lexi Help
Die neuesten Themen
» [phpBB2] Hintergrund festpinnen
von Fayé Heute um 16:56

» Mein altes Forum zurückbekommen
von Bigtuber Gestern um 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» [Update] Neues Theme der mobilen Version V2
von inde Mi 28 Sep 2016 - 13:34

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

» Ad Ware im Forum?
von inde So 25 Sep 2016 - 20:38

Partner
free forum

Hilfe-Forentitel

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Keine Rückmeldung closed Hilfe-Forentitel

Beitrag von Party Poison am Sa 25 Okt 2014 - 0:52

Hallo owo

Ich bräuchte bei einem Code unbedingt Hilfe. Ich habe mich damit auseinander gesetzt,schaffe es aber leider trotzdem nicht >.< Ich hoffe jemand kann mir helfen

Also ich hätte gerne diesen Code hier: http://tympanus.net/Tutorials/TypographyStyles/index6.html  in meinem Forum (Für den Forentitel auf der Startseite)

Da steht,soweit ich es verstanden habe,dass man das nur mit CSS macht...Allerdings klappt das bei mir nicht wirklich Sad

Der Code:


Code:

<h2 class="cs-text" id="cs-text">Bird</h2>
$("#cs-text").lettering().children('span').wrap('<span>').parent().prepend('<span></span><span></span><span></span>');
</span>

.cs-text {
    width: 600px;
    margin: 70px auto 30px;
}
 
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
    content: " ";
    display: table;
}
 
.cs-text:after {
    clear: both;
}
/* end clearfix hack */

.cs-text span{
    cursor: default;
    display: block;
    position: relative;
}

.cs-text > span {
    float: left;
    width: 130px;
    height: 130px;
    margin: 10px;
}
.cs-text span span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
}

.cs-text span span:last-child{
    font-size: 70px;
    line-height: 130px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255,255,255,0.8);
    font-family: 'Michroma', sans-serif;
    text-shadow:
        1px 1px 1px rgba(0,0,0,0.1),
        -1px -1px 1px rgba(0,0,0,0.1),
        5px 5px 0 rgba(216,65,40,0.6),
        -5px -5px 0 rgba(37,166,164,0.6);
    background:
        linear-gradient(
            45deg,
            rgba(249,249,249,0.08) 0%,
            rgba(234,234,234,0.5) 49%,
            rgba(255,255,255,0.51) 50%,
            rgba(244,244,244,0.94) 100%
            );
}
.cs-text > span:nth-child(odd) span:first-child {
    transform: rotate(5deg) skewY(-14deg);
}
 
.cs-text > span:nth-child(even) span:first-child {
    transform: rotate(-35deg) skewY(-5deg);
}
 
.cs-text > span:nth-child(odd) span:nth-child(2) {
    transform: rotate(45deg) skewY(-10deg);
}
 
.cs-text > span:nth-child(even) span:nth-child(2) {
    transform: rotate(27deg) skewY(-12deg);
}
 
.cs-text > span:nth-child(odd) span:nth-child(3) {
    transform: rotate(45deg);
}
 
.cs-text > span:nth-child(even) span:nth-child(3) {
    transform: rotate(30deg);
}


#cs-text > span:hover span {
    transform: rotate(0deg) skewY(0deg);
    text-shadow:
        1px 1px 0 rgba(216,65,40,0.1),
        -1px -1px 0 rgba(37,166,164,0.1);
}

(Der Code ist von dieser Seite: http://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/)

Es kann natürlich auch sein das ich bei dem Tutorial irgendetwas falsch verstanden habe..>,<
Ich hoffe mir kann da einer Helfen D:
Danke schon mal im Voraus
Lg

Party Poison
Neuling
Neuling

Beiträge : 7
Anmeldedatum : 25.01.14

Nutzerprofil anzeigen

Nach oben Nach unten

Keine Rückmeldung closed Re: Hilfe-Forentitel

Beitrag von Günther am Sa 25 Okt 2014 - 1:01

Hallo,

nein, die Voraussetzung dafür sind noch diverse Scripte dieser Seite. Unsere Aufgabe ist es aber nicht, dir das alles zusammenzustellen.

Wenn du eine Webfont verwenden möchtest, würde ich dir dazu raten, bei Google Fonts nach einer passenden/ähnlichen zu suchen. Bei der riesigen Auswahl dort wirst du mit Sicherheit fündig - und hast dann den Vorteil, dass du einfach nach unserem Tutorial vorgehen kannst:
[Tutorial] Google Web-Fonts verwenden

Liebe Grüße
Günther

Edit 26.10.2014
Keine Rückmeldung -> closed

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten