Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Forenaustausch

Alle Anzeigen ansehen

Regeln und nützliche Hinweise
Lexi Help
Lexi Help
Schnelle
Hilfe
Klicke Hier
www.forumieren.de

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
avatar
Party Poison
Neuling
Neuling

Beiträge : 7
Anmeldedatum : 25.01.14
keine
phpBB2

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
avatar
Günther
Admin a.D.
Admin a.D.

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

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