Hilfe-Forentitel

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

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

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