Diepte (iPhonestijl) nabootsen

[ErikBooy007]

Dag jongens en meiden.

Op de iPhone worden wordt tekst in de titelbalk weergegeven met een soort schaduw erin. Het is een heel subtiel maar mooi effect. Ik vroeg me af of dit met CSS na te bootsen is...

Hier kun je zien wat ik bedoel:

Any idea?

 

[dominiqu3]

Jazeker... wanneer je een verloopje maakt in Photoshop(Van #b0bccd naar #6c84a2) en boven en onder je text een lijn (<hr />) zet met de volgende css:

<style>
hr {
	margin:0px;
	padding:0px;
	border-top:1px solid #5c6368;
	border-bottom:1px solid #cdd5df;
	border-left:0px;
	border-right:0px;
	line-height:0px;
	height:1px;
	display:block;
}
</style>

 

[dominiqu3]

Kijk, misverstandje je bedoelde dit voor de tekst... dit kan in css3

http://www.quirksmode.org/css/textshadow.html
of
http://www.w3.org/Style/Examples/007/text-shadow

maar let wel op dat niet alle browsers css3 ondersteunen!

 

[ErikBooy007]

Thank you!

Daar ga ik me eens in verdiepen!

 

[Goeroeboeroe]

Als 'n browser wel css, maar geen text-shadow ondersteunt, kun je de tekst zelfs per ongeluk helemaal onzichtbaar maken. Dat hoeven niet eens heel oude browsers te zijn, Firefox 3.1 bijvoorbeeld valt eronder.
Als je de letters wit maakt, zoals op jouw voorbeeld, en alleen zichtbaar maakt met behulp van 'n schaduw, zie je dus helemaal niets in zo'n browser, tenzij je er goed op let dat de achtergrond 'n andere kleur heeft dan de letter.
Ik heb er toevallig onlangs 'n handleiding voor geschreven, als je belangstelling hebt:
http://css-voorbeelden.nl/schaduw/schaduw-070.html
Ik zou in ieder geval even de Bekende problemen lezen.
text-shadow werkt inmiddels in Opera, Firefox 3.5, Google Chrome en Safari. Via 'n filter is het (krakkemikkig) te imiteren in Internet Explorer 6, 7 en 8.

 

[ErikBooy007]

Bedankt, dat is duidelijk!

 

[Tha Devil]

Kant-en-klaar CSS framework: http://code.google.com/p/iphone-universal/downloads/list

Heb het zelf hiervoor gebruikt: www.stefantalen.net/taken/iphone.php

 

[ErikBooy007]

Kijk, dat is nog eens makkelijk! Goeie tip, dankje!!

 

[Tha Devil]

Ohw ja, ook deze nog gebruikt op de originele pagina zodat mensen naar de mobiele gaan: http://www.detectmobilebrowsers.mobi/

 

[csshunter]

Hoi Eric,
Als ik terugga naar je beginvraag, dan was het de bedoeling om op desktops je afbeelding met css na te maken?
De ondersteuning van css3, zoals gebruikt in www.stefantalen.net/taken/iphone.php, vind ik nog wat aan de magere kant (analoog aan Goeroeboeroe's voorbeelden). Opera geeft de schaduw wel, Safari ook, en Chrome ook, maar in elk geval Firefox 3 niet, en IE7 ook niet.

Met css alleen lukt het dus niet 100%, en vandaar ben ik maar eens aan het experimenteren geslagen met css+javascript. Die experimenten zijn nog lang niet klaar, de css zal bv. bijgeschaafd moeten worden, er horen een serie randvoorwaarden bij genoemd te worden, en er moet nog unobtrusive javascript van gemaakt worden, zodat mensen zonder javascript ook iets zien.

Maar een eerste tussenresultaat wil ik je niet onthouden: dat draait aardig in alle browsers als ik 't zo bekijk. Ook zonder krakkemikkigheid in IE6 zelfs.

Met vriendelijke groet,
CSShunter

 

[ErikBooy007]

Hee, om meteen je mail maar even hier te beantwoorden,

Waar ik nu op kamers zit heb ik een erg slechte internetverbinding (moet tetheren via m'n iPhone en er is daar geen 3G dekking, kortom ik haal amper 30kbps). Dat is de reden dat ik dit topic nog niet weer gelezen had. Ik kan me voorstellen dat je het vervelend vindt om geen reactie te krijgen

Over je pagina, wow, ziet er érg goed uit. Ik heb ooit ook eens zoiets gedaan, door de tekst twee keer weer te geven, een verrassend simpele maar goede oplossing. Ik heb op het moment weinig tijd om er mee bezig te zijn, maar ook deze manier ga ik nog eens overwegen.

Bedankt (ook Stefan voor het browserscript)!

 

[csshunter]

... kortom ik haal amper 30kbps

Woei! Een speed report van analyze.websiteoptimization.com/ vertelt dat deze pagina er dan zeker ruim 1 minuut over doet om bij jou op de beeldbuis te staan. Waarvan de helft door het inladen van javascript wordt opgesoupeerd. En er zijn zo'n 80 kleine losse images, met evenzovele http-requests. Geen wonder!

• <offtopic>Suggestie helpmij-beheer: css-sprites!</offtopic>

... vervelend om geen reactie te krijgen ...

Nee hoor, dat is al-in-de-geem! En je kan me hier ook regelmatig tegen anderen horen zeggen dat ze toch wel eens een paar dagen geduld mogen hebben.
- Was alleen zelf "quite exited" toen ik merkte dat het op deze manier ging lukken. Dit ook al eens eerder aan het beprutsen geweest, maar toen lukte het niet. En ben het nog nooit zo tegengekomen. Zal nog een Googelen of dit al elders is uitgevonden, anders ga ik het verder exploreren, testpagina-serie bakken, en er misschien wel een artikeltje over schrijven. Dit alles dan voor zover mijn vrije tijd niet in het Grote Zwarte Gat verdwijnt.

Met vriendelijke groet,
CSShunter