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

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Okt 2001

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

Hej

Skulle vilja få till en fluffig/glödande/mjuk border på en div

Det jag menar är att om border är 5px tjock så ska de yttre pixlarna vara typ 33% opacitet, de näst yttersta 66% och den i mitten 100% Eller det blir kanske tvärtom, vill ha full färg i mitten iaf

OS X har en sådan border som standard när man markerar ett textfält, det är sån jag vill ha

/Niclas

Har bytt namn från: nulleman ~ Blogg: http://skorpion.se
MacBook Pro: 15.4' ~ 1.83GHz ~ 1512MB RAM ~ 80GB HDD
Medlem i signaturen blodtörstiga Appleanvändare

Trädvy Permalänk
Medlem
Plats
Stenungsund
Registrerad
Sep 2004

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

Trädvy Permalänk
Medlem
Plats
Partille
Registrerad
Jul 2008

Inte exakt samma användningsområde som för dig, men principen är den samma.

Lycka till!

LÄNK

» AMD Ryzen 5 1500X » 16 Gb DDR4 » ASUS GTX 1060 6 Gb OC » 256 Gb M.2 PCIe
Fraktfritt från Inet för Sweclockersmedlemmar
Vänligen citera om du pratar med mig

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003

Era lösningar är baserade på gradients, inte opacitet.

Skillnaden är att när man använder sig av gradients så måste man ta hänsyn till bakgrundsfärgen. När man använder opacitet så behöver man inte det.

Citat:

Ursprungligen inskrivet av skorpion
Hej

Skulle vilja få till en fluffig/glödande/mjuk border på en div

Det jag menar är att om border är 5px tjock så ska de yttre pixlarna vara typ 33% opacitet, de näst yttersta 66% och den i mitten 100% Eller det blir kanske tvärtom, vill ha full färg i mitten iaf

OS X har en sådan border som standard när man markerar ett textfält, det är sån jag vill ha
http://img.usabilitypost.com/0810/blueglow.png

/Niclas

Det du söker har väldigt dåligt stöd för IE. Jag vet bara PNG som tar alpha-kanalen men IE har problem att visa det. IE har inte stöd för PNG transparency. Det finns stöd för GIF transparency men det är antingen transparent eller färgat som gäller, en skala på opaciteten går inte att göra.

Gradientlösning är tyvärr det enda jag vet som man kan använda, men som sagt, då måste du ta hänsyn till bakgrundsfärgen och det är ju synd.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Hedersmedlem
Plats
Södertälje
Registrerad
Dec 2001

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.

Nämen hej!

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av Donan Fear
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.

Ja, jag menade IE6 men tänkte inte på att det kanske bara är jag som associerar IE till IE6.

Om det är en seriös sida så tycker jag inte att man ska implementera design/funktionalitet som inte stödjs av majoriteten av webbläsare. Det är användarna som bestämmer om sidan blir populär eller inte, då är det dumt att irritera dem.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Nov 2003

Huvva, IE7 och IE8 har fortfarande problem med alphatransparens, dock bara när man animerar dem ... meeeen hur som helst.

Den här kanske kan hjälpa dig:
http://www.klientsidan.se/artiklar/20081230/Skuggad_ram_med_C...

Mvh Stefan -
Hamburgare är kärlek!
Receptologi är livet!

Trädvy Permalänk
Medlem
Plats
Stenungsund
Registrerad
Sep 2004
Citat:

Ursprungligen inskrivet av Leedow
Ja, jag menade IE6 men tänkte inte på att det kanske bara är jag som associerar IE till IE6.

Om det är en seriös sida så tycker jag inte att man ska implementera design/funktionalitet som inte stödjs av majoriteten av webbläsare. Det är användarna som bestämmer om sidan blir populär eller inte, då är det dumt att irritera dem.

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.

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008
Citat:

Ursprungligen inskrivet av darkmoon
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

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Mar 2008
Citat:

Ursprungligen inskrivet av KurreKula
Intressant att FF leder så markant över IE, trodde jag inte

Citat:

Ur fotnoten på den länkade sidan:
W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.

These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008
Citat:

Ursprungligen inskrivet av badboll

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!

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av KurreKula
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

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.

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av darkmoon
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.

Ok, lösningarna är baserade på opacitet men om det skall fungera med IE6 så är det gradienter som måste användas.

Hur många svenssons besöker w3schools sidor? Bedrövlig statistik om man ska göra en allmän sida som ska fungera för alla. Din "jävligt kvalificerade åsikt" är värd potatis.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Stenungsund
Registrerad
Sep 2004
Citat:

Ursprungligen inskrivet av Leedow
Ok, lösningarna är baserade på opacitet men om det skall fungera med IE6 så är det gradienter som måste användas.

Hur många svenssons besöker w3schools sidor? Bedrövlig statistik om man ska göra en allmän sida som ska fungera för alla. Din "jävligt kvalificerade åsikt" är värd potatis.

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

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av darkmoon
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...)

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007
Citat:

Ursprungligen inskrivet av You
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...)

Det riktigt jävla ordentligt sköna är ju att man i princip kan skita i IE5.5-. Att böka så att IE6 fungerar hjälpligt är inte såå jättesvårt.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Okt 2008

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

Trädvy Permalänk
Medlem
Plats
Stenungsund
Registrerad
Sep 2004
Citat:

Ursprungligen inskrivet av You
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...)

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

Citat:

Ursprungligen inskrivet av CJ Lundberg
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

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?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av CJ Lundberg
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

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

Trädvy Permalänk
Medlem
Plats
Östersund
Registrerad
Aug 2007

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>

mobo Asus M4A88TD-M EVO/USB3 cpu 1100T kylare Noctua NH-D14
gpu RX 460 passive ram 16GB DDR3 1600MHz ssd Samsung 850 EVO 250GB
psu Corsair AX 850 skärmar 3 * 40" NEC P401

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Okt 2001

Andre_H: Jag får tyvärr bara en blå bakgrund med en grå fyrkant ....i Safari
I Firefox funkar det däremot bättre, men det är bara en skuggad (ytter)ram runt boxen
Jag vill även ha en på insidan (många krav hehe)

Jag kan tillägga att jag utvecklar för iPhone (Safari Mobile) så det är inga bekymmer med IE eller så. Faktum är att jag tror IE's filter:glow skulle fixat biffen, men det är ju inte valid css :/

Förrutom -webkit-box-shadow så har jag även hittat -webkit-border-image: -webkit-gradient

Typ detta:
<div style="border: 10px solid black;width: 100px;height: 100px;margin: 0px;-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff), color-stop(0.5, #000)) 0 0 0 0;">lorem ipsum</div>

-webkit-gradient skapar en bild som går från vit till svart till vit som -webkit-border-image sedan använder.
Problemet är att det inte verkar fungera som en border, utan det blir som en bild mitt i boxen.

Safari exempel (inte mitt men samma teknik) (endast Safari)
http://trac.webkit.org/browser/trunk/LayoutTests//fast/gradie...

Så jag vet inte riktigt hur jac ska fortsätta. Visserligen kankse man ska nöja sig med skugga på en sida :/

/niclas

Har bytt namn från: nulleman ~ Blogg: http://skorpion.se
MacBook Pro: 15.4' ~ 1.83GHz ~ 1512MB RAM ~ 80GB HDD
Medlem i signaturen blodtörstiga Appleanvändare

Trädvy Permalänk
Medlem
Plats
Stenungsund
Registrerad
Sep 2004

Ä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

Trädvy Permalänk
Medlem
Plats
Östersund
Registrerad
Aug 2007
Citat:

Ursprungligen inskrivet av skorpion
Andre_H: Jag får tyvärr bara en blå bakgrund med en grå fyrkant ....i . Faktum är att jag tror IE's filter:glow skulle fixat biffen, men det är ju inte valid css :/
/niclas

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.

mobo Asus M4A88TD-M EVO/USB3 cpu 1100T kylare Noctua NH-D14
gpu RX 460 passive ram 16GB DDR3 1600MHz ssd Samsung 850 EVO 250GB
psu Corsair AX 850 skärmar 3 * 40" NEC P401

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Okt 2001

Andre_H: helt rätt att -webkit-* inte är valid CSS, jag nöjer mig med en skugga runt om bara, ser rätt bra ut ändå. Att hålla på med bilder är inte min grej, så det blir för jobbigt och dessutom vill jag lösa det med vanlig css helst.

Får tanka för hjälpen

Har bytt namn från: nulleman ~ Blogg: http://skorpion.se
MacBook Pro: 15.4' ~ 1.83GHz ~ 1512MB RAM ~ 80GB HDD
Medlem i signaturen blodtörstiga Appleanvändare