Lexi Help
Partner
www.forumieren.com

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

Benutzerprofil 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

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten