Tutorial gestrichelter "Innenrahmen"

[markus_lanz]

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)

Bitte kostenlos registrieren, damit du die Bilder siehst.

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]

AW: Tutorial gestrichelter "Innenrahmen"

Google sagt

Bitte kostenlos registrieren, damit du die Links siehst.

.

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

 

[simonpicos]

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]

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]

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

<a href="#">Hello World</a>

CSS

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:

Bitte kostenlos registrieren, damit du die Links siehst.

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

 

[Curanai]

AW: Tutorial gestrichelter "Innenrahmen"

Nein, aber einen

Bitte kostenlos registrieren, damit du die Links siehst.

... 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

Bitte kostenlos registrieren, damit du die Links siehst.

.

 

[markus_lanz]

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]

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...

 

[simonpicos]

AW: Tutorial gestrichelter "Innenrahmen"

Ich glaube ich habe dein Tutorial gefunden