CSS - Hur gör man en fluffig/glödande/mjuk border?

Det gör man med bilder.

Det enklaste är att du gör en bild till vänster som bara innehåller "avslutet" på bilden och sen gör en bild till höger som innehåller resten + lite till. På så vis skalar det med olika storlekar.

Det där är teorin bakom det. Koden får du fixa själv eller nån annan hjälpa dig med just nu

IE6 har problem med PNG, men det funkar fint i IE7 och 8.
Sitter folk fortfarande med IE6 får de skylla sig själva tycker jag.

För det första så är våra lösningar inte alls baserade på gradienter utan opacitet.

Att ta hänsyn till IE6 numera är bortkastad tid.

http://www.w3schools.com/browsers/browsers_stats.asp

Som man ser där använder ungefär 12% fortfarande IE6. De som använder IE6 är ungefär följande grupp: De som inte förstår hur man ska uppgradera och de som inte får uppgradera (statsanställda).

Du kan räkna bort alla vista-, mac och linuxanvändare.

Risken att en användare som besöker sidan har IE6 är alltså relativt liten, och om de nu upplever den png:n som ful eller störande, ja ärligt talat... hur långt bakåt ska man behöva anstränga sig för att nå? Ska vi fortfarande stödja netscape 4 bara för att det kanske existerar någon gammal kuf i nån skog som fortfarande kör med det?

Nej, använd du pngs stöd för alphakanaler fullt ut. Det är min åsikt, och i det här fallet är den faktiskt jävligt kvalificerad.

Intressant att FF leder så markant över IE, trodde jag inte

Det är dock inte bara statsanställda som använder IE6. Vet flera stora företag som använder det faktiskt. Vet ej varför dock... Kan ju omöjligen vara säkrare? Men det är ju iofs mer "cleant" i det anseende att det är mindre designat

Humm.. Läste inte hela sidan, utgick ifrån att det inte var fakta från just deras sida utan fakta de fick från annat håll!

Företag som fortfarande plågar folk med IE6 gör generellt sett det för att de har någon hemmabygd lösning på ett problem som kräver just IE6 och som inte fungerar i nyare webbläsare.

Dessutom; är inte IE6 officiellt gammal, dvs. Microsoft bryr sig inte längre? För i så fall bör man inte behöva fixa grafiska buggar som bara IE6 drabbas av (funktionella buggar måste man dock fixa) IMHO. Det är givetvis ett övervägande man själv borde göra som utvecklare.

Då tycker jag du ska överbevisa mig med bättre källor, jag skulle vara mycket intresserad av dem.

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers (se även källor på Wikisidan)
Se även http://en.wikipedia.org/wiki/Template:Msieshare1 (usch, nu blev jag mörkrädd...)

Nja, det går att hacka ihop det så att även IE6 kan använda sig av opacitet, det krävs bara ett fåtal css-rader som använder sig av det som i IE 5 och 6 kallades för behaviors. Detta är ett mycket välkänt hack som jag trodde ni webutvecklarfolk kunde som rinnande vatten.

Det är såklart inte helt utan problem, men om det bara är några enskilda png-er med alphakanaler så är det ett fullgott hack.
http://www.twinhelix.com/css/iepngfix/

Det finns även andra tekniker som använder sig av AlphaImageLoader och en smart jQuery snutt liknande den som länkades tidigare i tråden.http://24ways.org/2007/supersleight-transparent-png-in-ie6

Intressant läsning indeed!

Sen är ju inte heller den där statistiken perfekt, det medges ju i artikeln, men definitivt intressant!

Vi får väl helt enkelt dra slutsatsen att det är upp till den som skapar sidan om denne vill stödja IE6. Personligen tycker jag det är slöseri med tid numera, och om man gör saker och ting rätt så blir det ändå inte så jättehemskt i IE6 (man måste ju inte få alla marginaler rätt t ex).

En del av de där fulhacken (jag har testat ett par olika) är väl förvisso trevliga, men ett par av dem kan få riktigt hemska effekter på övrig layout. Vilket slutar med att man lägger ännu mer tid på att rätta till nånting som egentligen inte är fel

Jag står fast vid min åsikt att man kan bortse från IE6, åtminstone när det gäller saker som att det saknar stöd för PNG. Vinsten (att användaren slipper tänka "oj vad konstigt det där såg ut" [vilket kanske inte är så dumt, för vem vill inte att användarna ska uppgradera till en riktig webbläsare?]) uppväger rätt sällan det merjobb det medför. Och ju mer vi fjäskar för folk som kör med gamla webbläsare, desto längre får vi hålla på att stödja den. Varför skapa sig mer jobb än nödvändigt?

Frågan är ju om man vill fulhacka med behaviors eller inte. Jag undviker personligen såna hack.

Ok nu har jag lyckats göra en fluffig border i css utan bilder som även funkar i IE

<html>
<head>
<title>Fluffig border</title>
</head>

<body style="background:#408abc;">
<div style="filter:Glow(Color=ffffff,Strength=10);width:0;height:0;">
     <div style="
     -moz-box-shadow: 0 0 5px 5px #fff;
     -webkit-box-shadow: 0 0 5px 5px #fff;
     width:100px; height:24px; background:#ccc; margin:5px;">
     </div>
</div>
</body>
</html>

Är alla fälten lika stora? I så fall kan du enkelt göra det med en bakgrundsbild istället. Problemet kommer om de ska skala

Om du vill ha valid css ska du inte heller använda -webkit-box-shadow, eller -moz-box-shadow heller för den delen. Det är inte heller valid css. Synd det inte blev fluffigt i iphone, för mig funkade det i IE 6 FX3 och Chrome men inte i Opera10. Testa ta bort fjärde attributet ur skriva -webkit-box-shadow: 0 0 5px 5px#fff; det fjärde attributet fick stöd senare webkit så du kan skriva "0 0 10px" eller andra kombinationer och testa. Är valid css viktig för dig och hemsidan inte behöver se perfekt ut kan du köra på png bilder. Det bör räcka med 2 bilder, en bild med hörn, alltså som en cirkel och kanter i sidled eller höjdled och en annan bild med kant i den andra ledden. Det sparar dig inte många byte men många http requests. Är alla divar lika stora räcker det såklart 1 bild.