Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 15 von 35
Like Tree14Likes

Thema: Kreis zeichnen mit CSS

  1. #1
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.610

    Kreis zeichnen mit CSS

    Fand ich interessant, was mittlerweile alles mit CSS geht.
    border-radius: 50% ist die entscheidende Auszeichnung

    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Test</title>
    </head>
    <body>
    	<style type="text/css" scoped>
    	#test {
    		border:		1px solid black;
    		border-radius:	50%;
    		width:		100px;
    		height:		100px;
    		vertical-align:	middle;
    		display:	table-cell;
    		text-align:	center;
    	}
    	</style>
    
    <div id="test">Hallo Welt</div>
    
    </body>
    </html>
    kreis.png
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  2. #2
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Kreis zeichnen mit CSS

    Viel interessanter in dem Zusammenhang finde ich ich die Darstellung runder Profilbilder wie sie so oft momentan verwendet werden:
    Edit fiddle - JSFiddle

    einstein_kreis.PNG
    mikdoe likes this.

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.610

    AW: Kreis zeichnen mit CSS

    Auch sehr cool, TecEye!
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  4. #4
    j-l-n Guest

    AW: Kreis zeichnen mit CSS

    Zitat Zitat von mikdoe Beitrag anzeigen
    Fand ich interessant, was mittlerweile alles mit CSS geht.
    border-radius: 50% ist die entscheidende Auszeichnung
    Mittlerweile? Wie lang hast du denn Winterschlaf gehalten?
    mikdoe and dertypdernixkan like this.

  5. #5
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.610

    AW: Kreis zeichnen mit CSS

    Zitat Zitat von j-l-n Beitrag anzeigen
    Mittlerweile? Wie lang hast du denn Winterschlaf gehalten?
    *Räusper*
    Ich hab in Zeiten von CSS 1 schon nicht viel davon gerafft, Design ist nicht mein Ding.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  6. #6
    j-l-n Guest

    AW: Kreis zeichnen mit CSS

    Ah, OK. Naja, es liegt einem halt nicht alles - ich hab zum Beispiel ziemliche Probleme mit RegExp's...
    mikdoe likes this.

  7. #7
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.610

    AW: Kreis zeichnen mit CSS

    Zitat Zitat von j-l-n Beitrag anzeigen
    Ah, OK. Naja, es liegt einem halt nicht alles
    Stimmt!

    Zitat Zitat von j-l-n Beitrag anzeigen
    ich hab zum Beispiel ziemliche Probleme mit RegExp's...
    OK, dann mach ich dir immer alle Regexen und du mir das CSS
    j-l-n likes this.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  8. #8
    dertypdernixkan ist offline Tripel-As
    registriert
    31-05-2013
    Beiträge
    194

    AW: Kreis zeichnen mit CSS

    Wenn du noch


    Code:
    #test {
    -webkit-animation: cssAnimation 1.000s 16 ease;
    -moz-animation: cssAnimation 1.000s 16 ease;
    -o-animation: cssAnimation 1.000s 16 ease;
    }
    @-webkit-keyframes cssAnimation {
    from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
    to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
    @-moz-keyframes cssAnimation {
    from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
    to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
    @-o-keyframes cssAnimation {
    from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
    to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
    hinzupackst, dreht es sich! :O

    // 1.000 ist die durchlaufszeit
    // 16 anzahl der wiederholungen (1 bis infinite (unendlich viele))

    hach css bietet so viele tolle sachen

  9. #9
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.610

    AW: Kreis zeichnen mit CSS

    dertypdernixkan: Hab dein CSS zugefügt aber sehe kein drehen.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  10. #10
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Kreis zeichnen mit CSS

    Zitat Zitat von mikdoe Beitrag anzeigen
    dertypdernixkan: Hab dein CSS zugefügt aber sehe kein drehen.
    Edit fiddle - JSFiddle

  11. #11
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.610

    AW: Kreis zeichnen mit CSS

    Geil. Nützt mir aber nichts, der IE 11 kann es nicht.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  12. #12
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Kreis zeichnen mit CSS

    Der IE ist auch der missratenste Browser unter Gottes Sonne, ich würde ihn verbieten lassen wenn ich könnte!!!

  13. #13
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.610

    AW: Kreis zeichnen mit CSS

    Nö, das stimmt wirklich nicht. An anderer Stelle haben wir schon festgestellt, dass jeder seine Macken hat. Und der FF hat nicht weniger Macken als der IE! Bei mir ist es zumindest so, dass ich häufiger dem FF und Chrome nachlaufen muss als dem IE. Insbesondere bei Design Dingen.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  14. #14
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Kreis zeichnen mit CSS

    Ich bin absoluter Chrome Verfechter, da ich den Anwendern vorschreiben kann mit welchem Browser sie arbeiten, baue ich meine ganzen Web-Applikationen für Chrome. Chrome kann einfach alles und das sauber, aber wir werden hier glaub ich Offtopic
    mikdoe likes this.

  15. #15
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.610

    AW: Kreis zeichnen mit CSS

    Nur weil wirs gerade hatten. Ein Element besteht aus <b>08:15</b>

    Ich will 08:15 haben.

    Mit IE kann ich ganz bequem mit .innerText arbeiten. Firefox: Nein, der will zwingend .innerHTML haben und ich muss den String anschließend selbst vom HTML befreien. Und das Weiterrechnen mit den Werten geht auch nicht einfach so. Im IE würde ein parseInt(xx,10) funktionieren, für den FF muss ich mit parseFloat() arbeiten, damit er addiert und nicht konkateniert.
    Welcher Browser wäre jetzt besser? Und sowas hab ich ständig. Und immer laufe ich diesem besch.... Firefox nach. Da könnt ich manchmal aus der Haut fahren.
    Meine Erfahrung besagt, wenn man es mit IE UND Firefox ans Laufen bekommt machen es auch alle anderen Browser wie gewünscht. Denn die beiden spiegeln beide Extreme wieder.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

Seite 1 von 3 123 LetzteLetzte

Ähnliche Themen

  1. Berechnung Kreis
    Von Junkee[] im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 20-09-2009, 21:29
  2. Kreis malen
    Von Filemon im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 12-09-2008, 17:31
  3. Kreis berechnen
    Von Batou im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-08-2004, 23:56
  4. Kreis zeichnen :P
    Von maestr0 im Forum Grafik
    Antworten: 4
    Letzter Beitrag: 14-05-2003, 13:41

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •