Antworten auf deine Fragen:
Neues Thema erstellen

Tutorial gestrichelter "Innenrahmen"

markus_lanz

Noch nicht viel geschrieben

ich bin etwas am verzweifeln...
ich habe neulich zufällig ein tolles tutorial gefunden, wo erklärt wird wie man buttons wie diesen (nur mal eben schnell per hand gemacht)
button2ku1.png


nur mit html und css3 erstellt. leider finde ich das tutorial nicht mehr... weiß jemand zufällig einen link dazu, oder kann es mir sogar in eigenen worten kurz erklären?

danke
 

Curanai

Aktives Mitglied

AW: Tutorial gestrichelter "Innenrahmen"

Google sagt hier.

Und statt "border:1px solid ..." solltest Du "border: 1px dotted ..." nehmen ... Quellcode steht drunter.
 

simonpicos

Mod | Forum

AW: Tutorial gestrichelter "Innenrahmen"

Ich glaube er meinte Die gestrichelte Linie innerhalb des Elements. Und nicht die abgerundeten Ecken. (So habe ich es aus dem Beispielbild zumindest verstanden)
 

markus_lanz

Noch nicht viel geschrieben

AW: Tutorial gestrichelter "Innenrahmen"

simonpicos hat es schon richtig verstanden. mir geht es um die gestrichelten linien inerhalb des elements, wie man die ecken rund macht weiß ich
 

simonpicos

Mod | Forum

AW: Tutorial gestrichelter "Innenrahmen"

Ich hab gerade mal ein wenig herumprobiert und eine möglichkeit gefunden... (die ist aber nicht so ganz sauber glaube ich ;) )

HTML
HTML:
<a href="#">Hello World</a>
CSS
HTML:
a{
    background-color: rgba(208,69,0,1);
    color: rgba(255,255,255,1);
    text-decoration: none;
    font-size: 26px;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    top: 250px;
    left: 200px;
    outline-color: rgba(255,255,255,1);
    outline-style: dashed;
    outline-width: 2px;
    outline-offset: -7px;
    border-radius: 8px
}

Aber immerhin schonmal ein Ansatz.

Das ganze sieht dann so aus:

http://labs.simonpicos.hostingsociety.com/

edit: wie ich die outline noch abgerundet bekomme, weiß ich aber nicht. Hat da jemand ne Idee?
 

Curanai

Aktives Mitglied

AW: Tutorial gestrichelter "Innenrahmen"

Nein, aber einen Hinweis ... und der ist immer noch akut (wenn auch schon Jahre alt; s. "modified").

Wenn Du aber "dotted" statt "dashed" nimmst, fällt es nicht soooo auf ...

Alles andere dann noch beim W3C.
 
Zuletzt bearbeitet:

markus_lanz

Noch nicht viel geschrieben

AW: Tutorial gestrichelter "Innenrahmen"

Hmm, dankeschön :) Das sieht ja schomal ganz nett aus. bei dem tutorial war aber auch die linie runde... und es sah auch etwas anders aus. weiß vielleicht jemand einen guten link zu so nem tut? oder am besten zu dem, was ich schon gesehen habe...
 

simonpicos

Mod | Forum

AW: Tutorial gestrichelter "Innenrahmen"

Ich hab mal ne weile gegooglet und nichts in der Art gefunden... vielleicht kannst du ja mal in deinem browserverlauf schauen, falls du nichts findest...
 
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.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben