Antworten auf deine Fragen:
Neues Thema erstellen

Schräge Kanten

Waegi

Aktives Mitglied

Hallo,

ich komm mal wieder mit nem kleinen Problem zu euch und zwar bin ich zur Zeit an einer Website, dabei würde ich gerne schräge Kanten wie hier erzeugen:



Ich weiß dass es hierfür den Befehl:
transform: skew(-20);
gibt, jedoch ist es so, wenn ich nun einen Text habe, dem einen Hintergrund gebe und dann den Befehl nutze, wird auch meine Schrift schräg und das will ich ned, sondern nur die rechte Kante.

Ich hoffe mir kann hier jemand helfen.

mfg Waegi
 

Waegi

Aktives Mitglied

AW: Schräge Kanten

Danke mal für deine Antwort, jedoch hab ich nun das Problem, der Hintergrund mit der schrägen Kante sollte immer so lang wie der Text sein und das ist das, was jetzt nicht passt, also dass sich der nicht dynamisch dem Text anpasst, gibts dafür ne Lösung?
Und wie schaff ich das, dass der Hintergrund sich auch wenn ich das alles auf nem kleinen Display anzeigen lass an die richtige Position setzt?

Als Beispiel dazu, hier wie es auf dem PC aussieht:


und wie es auf einem kleineren Gerät aussieht:


Mfg Waegi
 

Waegi

Aktives Mitglied

AW: Schräge Kanten

Media Queries ist mir klar, hab ich auch schon genutzt. Jedoch lässt sich dann die schräge auch so realisieren?
Das mit den Kanten, wie es realisiert wurde, hab ich zum Beispiel hier entdeckt, deshalb hab ich es auch über den transoform-Befehl probiert.

mfg Waegi
 

Waegi

Aktives Mitglied

AW: Schräge Kanten

Ah, genau das war es, was ich gesucht habe mit dem Skew, also du setzt dort noch ein span rein, dem du einfach das transform:Skew im Gegenteil wieder gibst, zu dem, was du dem kompletten am Anfang gegeben hast.
Das passt dann soweit, vielen Dank für deine Hilfe, und Sorry für meinen etwas doofen Fragen.
 

Waegi

Aktives Mitglied

AW: Schräge Kanten

Jetzt melde ich mich doch nochmal und zwar würde ich jetzt gerne so ein <span></span> Tag mit einfügen, jedoch funktioniert das bei dem Slider nicht so richtig, ich kann hinter dem kompletten div-Tag was setzen, aber nicht in den div-Tag hinein, also so funktioniert es:

PHP:
slider.append($('<div class="nivo-caption"></div><span></span>'));

So jedoch nicht:

PHP:
slider.append($('<div class="nivo-caption"><span></span></div>'));

Jedoch brauch ich ja span-Tag an dieser Stelle damit das funktioniert.

Ich hoffe mir kann hier nochmal jemand helfen.

Mfg Waegi
 

Waegi

Aktives Mitglied

AW: Schräge Kanten

Danke mal für deine Antwort, hab das mittlerweile selbst gelöst, nach einigen Überlegungen, und zwar wurde mir der Teil, den ich innerhalb des DIVs hatte durch das jQuery-Script überschrieben, also dort der entsprechende Titel reingeschrieben wurde. Dann hab ich doch wo der Titel reingeschrieben wird etwas verändert, für alle die es wissen wollen:

alt:
PHP:
var processCaption = function(settings){
            var nivoCaption = $('.nivo-caption', slider);
            if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
                var title = vars.currentImage.attr('title');
                if(title.substr(0,1) == '#') title = $(title).html();   

                if(nivoCaption.css('display') == 'block'){
                    setTimeout(function(){
                        nivoCaption.html(title);
                    }, settings.animSpeed);
                } else {
                    nivoCaption.html(title);
                    nivoCaption.stop().fadeIn(settings.animSpeed);
                }
            } else {
                nivoCaption.stop().fadeOut(settings.animSpeed);
            }
        }
neu:
PHP:
var processCaption = function(settings){
            var nivoCaption = $('.nivo-caption', slider);
            if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
                var title = vars.currentImage.attr('title');
                if(title.substr(0,1) == '#') title = $(title).html();   

                if(nivoCaption.css('display') == 'block'){
                    setTimeout(function(){
                        nivoCaption.html('<p><span>' + title + '</span></p>');
                    }, settings.animSpeed);
                } else {
                    nivoCaption.html(title);
                    nivoCaption.stop().fadeIn(settings.animSpeed);
                }
            } else {
                nivoCaption.stop().fadeOut(settings.animSpeed);
            }
        }
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.474
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben