| (Kommentare: 1)

Webdesign Lohmann | modern webdesign - Runde Ecken für Internet Explorer

Einer der Gründe, die ich an Firefox und WebKit-basierten Browsern wie Chrome oder Safari liebe, ist die Fähigkeit, mühelos abgerundete Eckelemente mit reinem CSS zu erstellen.

Leider ist es im Microsoft Internet Explorer nicht möglich abgerundete Ecken, ohne die Verwendung von Bildern oder endlosem Hacks zu schaffen.

Dieses Tutorial zeigt, mittels Javascript, einen Weg die Schwächen des Microsoft Internet Explorer aus zugleichen.

CurvyCorners erkennt die Verwendung von "-WebKit-border-radius" und "moz-border-radius" auf DOM-Elemente und erzielt seinen Effekt im Microsoft Internet Explorer durch Verwendung einer Reihe von kleinen DIVs. Es werden keine Bilder eingebunden. Man kann diesen Effekt der abgerundete Ecken auch auf spezifische Klassen-Elemente anwenden.

Festlegen der CSS-Klasse

.round { 
	-moz-border-radius:12px; 
    -webkit-border-radius:12px;
    border-radius: 12px;
}

Einbinden des JavaScripts im <head>

<script type="text/javascript" src="js/curvycorners.js"></script>

Einbindung für einzelne Klassen-Elemente

<script type="text/JavaScript">
	
	curvyCorners.addEvent(window, 'load', initCorners);
	function initCorners()
	{
		var settings = 
		{ 	
			tl: { radius: 75 }, 
    		tr: { radius: 100 }, 
     		bl: { radius: 25 }, 
     		br: { radius: 25 }, 
			antiAlias: true
		}
		curvyCorners(settings, ".round");
	}
  
</script>

CurvyCorners macht es möglich Runde Ecken im Internet Explorer ohne Einbindung von Bildern zu realisieren


Kommentare lesen

F. Müller

Unter welcher Lizenz steht diese JavaScript-Datei?

Michael Lohmann

CurvyCorners steht unter folgender Lizenz

******************************************************************

CurvyCorners
------------

This script generates rounded corners for your boxes.

Version 2.1pre5
Copyright (c) 2010 Cameron Cooke
Contributors: Tim Hutchison, CPK Smithies, Terry Riegel,
Sim� Albert.

Website: http://www.curvycorners.net
SVN: http://curvycorners.googlecode.com/
Email: cameron@curvycorners.net
Discuss: http://groups.google.com/group/curvycorners

Please consult the SVN for a list of changes since the last
revision.

This library is free software; you can redistribute
it and/or modify it under the terms of the GNU
Lesser General Public License as published by the
Free Software Foundation; either version 2.1 of the
License, or (at your option) any later version.

This library is distributed in the hope that it will
be useful, but WITHOUT ANY WARRANTY; without even the
implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the GNU Lesser General Public
License for more details.

You should have received a copy of the GNU Lesser
General Public License along with this library;
Inc., 59 Temple Place, Suite 330, Boston,
MA 02111-1307 USA

******************************************************************

Ein weiteres sehr gutes Tool ist CSS3 PIE

http://css3pie.com/

Es vereint border-radius, box-shadow und linear-gradient in einer JavaScript-Bibliothek.
Es arbeitet wunderbar in IE6 - IE9.


Einen Kommentar schreiben

Was ist die Summe aus 8 und 5?

Zurück