ap div met afgeronde hoeken?

Status
Niet open voor verdere reacties.
Met CSS4 is het mogelijk helaas ondersteunen sommige browsers dit nog niet. (Internet Explorer en Opera ondersteunen het niet.) Ik verwacht dat IE en Opera binnenkort ook CSS4 gaan toepassen, maar hier wacht ik al +- een half jaar op, tevergeefs.

Zie http://www.css3.info/preview/rounded-border/ als u het wilt testen (gebruiken) voor andere browsers
 
5i5 zei:
Met CSS4 is het mogelijk helaas ondersteunen sommige browsers dit nog niet. (Internet Explorer en Opera ondersteunen het niet.) Ik verwacht dat IE en Opera binnenkort ook CSS4 gaan toepassen, maar hier wacht ik al +- een half jaar op, tevergeefs.

Zie http://www.css3.info/preview/rounded-border/ als u het wilt testen (gebruiken) voor andere browsers
Klik om te vergroten...
1) CSS4 ligt nog ver in de toekomst (als er al plannen voor zijn), waar jij het over hebt is CSS3, en zelfs dat is nog niet helemaal af.
2) Opera ondersteunt al enige tijd border-radius en vele andere CSS3 onderdelen (het zijn FF en Safari die nog steeds -moz- en -webkit- nodig heben om border-radius op te pikken)
 
Laatst bewerkt:
Mag ik nog een nabrander geven? ;)
Even terug naar de vraag:
Is het mogelijk om AP div's te tekenen (in te voegen) met afgeronde hoeken?
Klik om te vergroten...
Antwoord: ja, dat is mogelijk bij alle div's (met AP / Absulute Position, of zonder AP).
Volgende vraag: hoe dan?
Antwoord:
  1. Met css3, maar daar doen voorlopig niet alle browsers aan mee (zie boven).
  2. Met een klein image waar de hoeken in zitten, plus wat css om ze op hun goede plaats te krijgen.
  3. Met een javascript-oplossing.
Nummer 2 vind ik het handigste, dan heb je alles zelf in de hand. Zie:
Met vriendelijke groet,
CSShunter
 
csshunter zei:
Antwoord:
  1. Met css3, maar daar doen voorlopig niet alle browsers aan mee (zie boven).
  2. Met een klein image waar de hoeken in zitten, plus wat css om ze op hun goede plaats te krijgen.
  3. Met een javascript-oplossing.
Nummer 2 vind ik het handigste, dan heb je alles zelf in de hand. Zie:
Klik om te vergroten...
Met nummertje twee heb je wel alles zelf in de hand maar het betekent ook een behoorlijke bak extra CSS en HTML. Je kunt ook pure CSS gebruiken met CSS3 Pie voor de arme IE gebruikers. (de reden dat ik dit in mijn eerdere post niet genoemd heb is dat ik er toen nog niet van wist.) Goed, het werkt niet als de bezoeker javascript uit heeft staan, maar een site met rechte hoeken werkt net zo goed als een site met ronde hoeken.
 
Laatst bewerkt:
Je kunt ook pure CSS gebruiken met CSS3 Pie voor de arme IE gebruikers.
Klik om te vergroten...
Hé, dat is interessant: die kende ik nog niet. Deze nieuwe truc is ook pas sinds 11 juli 2010 in omloop (als bèta-versie), zag ik.
Die ga ik eens bestuderen!
... pure CSS ... het werkt niet als de bezoeker javascript uit heeft staan ...
Klik om te vergroten...
  • In elk geval geen 100% pure css-oplossing ;),
    en valt dus eigenlijk in mijn categorie 3 (net als de NiftyCorners e.d.).
Maar ik ga 'm dus es testen, en mijn bevindingen over dit IE-taartje zal ik hier droppen.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ja, da's ook waar.
Maar nu mijn beloofde bevindingen.
Met nummertje twee heb je wel alles zelf in de hand maar het betekent ook een behoorlijke bak extra CSS en HTML.
Klik om te vergroten...
Eerste opmerking. De PIE.htc blijkt een bestand van 27kB, en voordat je zoveel bij elkaar gesprokkeld hebt aan extra CSS en html, moet je waarschijnlijk wel heel veel ronde hoeken-boxjes op je pagina hebben staan. Het is natuurlijk wel makkelijker, als CSS3 + PIE het voor je doen. Of een ander automaatje. *)

Verder! De demo op de homepage www.css3pie.com ...
  • ... doet het deels in Firefox3.5 > het kleurverloop (gradient) in het groengele demo-blokje wordt niet getoond (verkleind screenshot FF),
  • ... doet het mooi in FF3.6,
  • ... doet het mooi in IE8,
  • ... doet het in IE7 (onder WinXP) niet met javascript aan > geeft runtime error; en als je de alert-pop-up wegklikt zijn de styles foetsie; bij hoveren over menu nieuwe runtime errors (screenshot IE7 met js aan),
  • ... doet het in IE7 (onder WinXP) niet met javascript uit > geeft totaal verhaspelde layout (screenshot IE7 met js uit),
  • ... doet het in IE6 (onder Win98) niet met javascript uit > idem screen,
  • ... doet het in IE6 (onder Win98) niet met javascript aan > lijkt het op het eerste gezicht te doen, maar laat IE crashen bij een hover over het menu. En volgens Browsershots werkt 't niet in IE6 met javascript aan (demo-blokje heeft rechte hoeken; zie browsershots-resultaat).
Nu zou dit magere IE-resultaat natuurlijk kunnen liggen aan andere dingen in de PIE-pagina dan het demo-gedeelte, dus op naar de demos-pagina in het PIE-menu. Helaas, die is er nog niet. :confused:

Dan zal er een eigen fabrikaat demo-pagina gemaakt moeten worden met de gedownloade PIE-ingrediënten.
Wie 'm het eerst heeft, mag zich melden! :D

Met vriendelijke groet,
CSShunter

__________
*) Wie wil, kan de plaatsing van ronde hoekjes in de html (van optie 2) ook automatiseren met javascript, dan valt de extra html weg. Zie hier voor het gemak dient de mensch:
Hier zit dan niet de schaduw- en gradient-optie in, die PIE wel heeft. Maar voor ronde hoekjes is het genoeg.

[edit]De Automatic liquid round corners van hierboven heeft een Update: 26 juli 2010, 12:08 !
Eerdere versie ging uit van document.getElementsByClassName, maar dat kunnen IE6 en IE7 niet begrijpen. Vervangen door javascript-aanpassing met document.getElementById, nu doet ie het ook in IE6 en IE7. :)[/edit]
 
Laatst bewerkt:
csshunter zei:
  • ... doet het deels in Firefox3.5 > het kleurverloop (gradient) in het groengele demo-blokje wordt niet getoond (verkleind screenshot FF),
Klik om te vergroten...
Logisch, FF 3.5 ondersteunt gradient helemaal niet, voor zover ik weet, en het .htc bestand past het alleen maar toe voor IE.
(uit nieuwschierigheid, wat heb je gebruikt om het in de drie verschillende IEs te testen?)

csshunter zei:
Dan zal er een eigen fabrikaat demo-pagina gemaakt moeten worden met de gedownloade PIE-ingrediënten.
Wie 'm het eerst heeft, mag zich melden! :D
Klik om te vergroten...
Klik eens op m'n sigje :p
Om de één of andere reden werkt het niet voor ieder element, moet nog even uitzoeken waarom niet.
 
Hoi Naarling,
Logisch, FF 3.5 ondersteunt gradient helemaal niet
Klik om te vergroten...
Klopt als een zwerende vinger! :) (maar als je alvast begint met css3, moet je wel weten wat je doet; dus vandaar dit even "redundant" gemeld; voor andere browsers geldt hetzelfde: altijd ff checken).
wat heb je gebruikt om het in de drie verschillende IE's te testen?
Klik om te vergroten...
  • Een WinXP-pro machine (met alle updates) voor IE8,
  • een andere WinXP-pro machine (met alle updates) voor IE7, en
  • voor IE6 een Win98-SE op een Virtual PC console binnen een WinXPpro (dus geen Multiple-IE, want die geeft soms rare dingen heb ik gemerkt).
... eigen fabrikaat demo-pagina met de gedownloade PIE-ingrediënten ...
Klik eens op m'n sigje :P
Klik om te vergroten...
Die snap ik niet. Je sigje gaat naar ExtendOpera, en daar zit toch geen PIE-demo bij? Of mis ik iets?

Verder een eigen PIE-demo pagina gemaakt:
Zijn er anderen waarbij deze test wel werkt in IE7? En met welke Windows-versie?
- Dan zou het aan mijn Windows kunnen liggen (niet geheel ondenkbaar...).

Met vriendelijke groet,
CSShunter

PS:
De Automatic liquid round corners methode is intussen verbeterd: http://developerscorner.nl/css-exercitions/automatic_liquid_round_corners_with_javascript.htm.
Werkte niet in lte IE7, dacht dat het kwam door de IE-crashes die ik had (en geen zin opnieuw op te starten). Maar lag anders. Zie Edit bij post #8.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan