Slicen van Fancy tabs met Bevel and Emboss, lastig.

Pagina: 1
Acties:

Onderwerpen


Verwijderd

Topicstarter
Tabs gebruiken in websites is makkelijk, een goed voorbeeld is de bar hier boven op tweakers.

Het goed slicen van een dergelijk design is wat lastiger omdat je weinig effecten kunt toepassen welke mee te slicen zijn, zeker nu web 2.0 toch wel HOT is.

Normaal gesproken zou je met 1px slices hele menubars op kunnen bouwen, dit gaat dus niet lukken met een fancy bar.

Ik heb een stukje van een simpele bar bijgevoegd om het probleem te schetsen.

Afbeeldingslocatie: http://img651.imageshack.us/img651/1431/slice.jpg

Zoals jullie zien loopt het rand effect van de tab iets verder door in breedte van de bar, dus slicen wordt iets complexer en kan op verschillende manieren gedaan worden.

Ik vraag me alleen af of ik de hele bar zal slicen of toch zoveel mogelijk om de tab heen. Ik kan uiteraard de bar in verticale lagen slicen over de hele breedte, of alleen het stuk dat afwijkt, alleen slicen in de verticale blokvorm manier waarbij zaken als tabs dezelfde breedte hebben lijkt me toch de beste oplossing echter alleen niet mogelijk.

Als het verloop in de rand niet zou zitten slice je alleen de tab, een 1px onder de tab ter breedte van de tab en een 1px van de bar en heb je dus verticaal even brede blokken welke bij elke tab hetzelfde zijn.

Ik heb wel eens gezien dat mensen de hele bar tot de tab horizontaal slicen, en daarna de tabs en de delen eronder weer apart, echter wordt het linkse deel, tot de tab wel een groot plaatje.

Hoe los ik dit netjes op met het behouden van deze rand ?

Acties:
  • 0 Henk 'm!

  • Cartman!
  • Registratie: April 2000
  • Niet online
Ik zou een design maken waardoor je gewoon per button kunt opbouwen maar designers zijn soms erg eigenwijs met dat ene randje hier of daar wat techniek weer moet oplossen ;) Al gedacht aan CSS-sprites of moet t dynamisch zijn?

Ennuh...effecten zijn 2.0? right :)

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Cartman! schreef op vrijdag 12 februari 2010 @ 00:20:
Ik zou een design maken waardoor je gewoon per button kunt opbouwen maar designers zijn soms erg eigenwijs met dat ene randje hier of daar wat techniek weer moet oplossen ;)
Ja dat was dus ook mijn plan, design was toch beter zo, dus... eigenwijs en opzoek naar een oplossing ;)
Al gedacht aan CSS-sprites of moet t dynamisch zijn?
Hovers... dus dynamisch... hoewel CSS opzich wel moet kunnen werken.. wel aan gedacht nog niet getest omdat dit eigenlijk mijn uitgangspunt was maar dan een plain randje.
Ennuh...effecten zijn 2.0? right :)
Tja, iedere leek die een fancy gekleurde website ziet denkt meteen aan 2.0... dus vandaar ;) Ben geen designer dus zeker leek :P

Acties:
  • 0 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Verwijderd schreef op vrijdag 12 februari 2010 @ 00:32:

Hovers... dus dynamisch... hoewel CSS opzich wel moet kunnen werken.. wel aan gedacht nog niet getest omdat dit eigenlijk mijn uitgangspunt was maar dan een plain randje.
CSS-Sprites werd er gezegd.

[ Voor 9% gewijzigd door RobIII op 12-02-2010 01:14 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Klopt maar ik ben bang dat ik zeker geen versie hiermee ga krijgen zoals je in mijn screenshot ziet, dit is te veel "PhotoShop" effect ben ik bang.

De tabs moeten er te ver voor uit elkaar staan wil je dit met sprites kunnen doen mijn inziens.

[ Voor 11% gewijzigd door Verwijderd op 12-02-2010 01:26 ]


Acties:
  • 0 Henk 'm!

  • MueR
  • Registratie: Januari 2004
  • Laatst online: 15:22

MueR

Admin Tweakers Discord

is niet lief

Makkelijk, als je een beetje je best doet. [google="css 3d tab"], hit 1.

[ Voor 26% gewijzigd door MueR op 12-02-2010 01:29 ]

Anyone who gets in between me and my morning coffee should be insecure.


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
MueR schreef op vrijdag 12 februari 2010 @ 01:26:
Makkelijk, als je een beetje je best doet. [google="css 3d tab"], hit 1.
Dan nog is die uitloop in kleur in de rand tussen de 2 tabs nagenoeg niet te doen.

Ik denk dat ik die moet schrappen en iets strakkere tabs moet accepteren.

Acties:
  • 0 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Verwijderd schreef op vrijdag 12 februari 2010 @ 01:37:
Ik denk dat ik die moet schrappen en iets strakkere tabs moet accepteren.
Waarom slice je niet gewoon wat creatief? Je hoeft toch niet precies tussen die twee tabs te slicen? Je zou, bij wijze van, zoals nu je screenshot is kunnen slicen. Krijg je een paar varianten misschien (actief links/rechts en 2xinactief naast elkaar = 3 sprites en dan misschien nog 2 voor de meest linkse/rechtse tab). Effe pielen en proberen en je bent er.

Of je gebruikt gewoon PNG's met transparence met wat overlap ofzo.
Ik heb geen zin 't helemaal uit te gaan zitten proberen en/of uitwerken, maar ik zie niets onmogelijks? (Of ik mis je punt).

[ Voor 35% gewijzigd door RobIII op 12-02-2010 01:48 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
RobIII schreef op vrijdag 12 februari 2010 @ 01:46:
[...]
Of je gebruikt gewoon PNG's met transparence met wat overlap ofzo.
Ik heb geen zin 't helemaal uit te gaan zitten proberen en/of uitwerken, maar ik zie niets onmogelijks? (Of ik mis je punt).
Ik wil er zeker iets creatiefs van maken en ben zeker niet lui ;)

Ik ben alleen enigzins bang dat het te complex en dirty wordt hierdoor. Ik heb al wat creatieve manieren gevonden zoals je zelf ook aangeeft, crea slicen, dit is volgens jou niet "vies" ?

Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 09-09 17:48
Verwijderd schreef op vrijdag 12 februari 2010 @ 01:37:
[...]


Dan nog is die uitloop in kleur in de rand tussen de 2 tabs nagenoeg niet te doen.

Ik denk dat ik die moet schrappen en iets strakkere tabs moet accepteren.
je kunt die tabs met negatieve margins best een stukje laten overlappen.

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
mcDavid schreef op vrijdag 12 februari 2010 @ 02:54:
[...]

je kunt die tabs met negatieve margins best een stukje laten overlappen.
Dus gewoon de tab zoals deze is met schaduw in de volle breedte slicen en dan een layer met de tab ernaast negatief zetten zodat hij er overheen komt ?

Opzich geen gek idee inderdaad.

Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 09-09 17:48
Valt de schaduw ook over de volgende button heen, of gaat het alleen om het gedeelte wat daarboven uitsteekt?

In dat laatste geval is het makkelijk, anders zul je inderdaad ook iets met de z-index moeten rommelen om het goed over elkaar heen te krijgen...

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Hij valt wel over de volgende button heen. Z-index is hier uiteraard bruikbaar voor.

Met z-index is het ook wel makkelijk mijn inziens, je kunt dan gewoon de hele tab slicen en hem met transparantie en de Z-index plaatsen op de juiste plaats !

Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 09-09 17:48
joah gewoon met :hover ook de z-index naar iets belachelijk hoogs, dan komt het wel goed.

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
mcDavid schreef op zondag 14 februari 2010 @ 02:24:
joah gewoon met :hover ook de z-index naar iets belachelijk hoogs, dan komt het wel goed.
Dit werkt prima inderdaad, ik ben er alleen wel achter dat ik mijn hele menu kan z-indexen omdat de selected tab breder is dan de rest... niet ideaal maar wel de mooiste oplossing.

Ach gebruik je z-index tenminste waar het voorbedoeld is :)

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Merged "[CSS] Relative divs laten orienteren t.o.v. absoluut div" naar dit topic
Ik ben met een serieus CSS probleem aan het stoeien wat nogal een vraagstuk wordt.

Ik heb een aantal tabs welke naast elkaar staan. Nu komt de actieve "naar voren" op het beeld door middel van deze op een balk te plaatsen zoals in een kaartenbak ook gebeurt.

Om dit te laten gebeuren heb ik een bar met een achtergrond onder de tabs en laat de actieve door middel van z-index waarde iets over die onderliggende balk heen vallen.

Om dit te kunnen doen heb ik de actieve tab een absolute positie gegeven welke hij bepaalt aan de hand van een div waar deze tabs instaan, werkt opzich zoals het moet.

De tabs voor de actieve tab kun je vrij makkelijk naar links floaten, de tabs na de actieve tab wordt een probleem. Een absolute tab neemt geen "plaats" in je document want hij zweeft zeg maar boven de rest. De tabs welke in je HTML dus na de actieve tab geplaatst dienen te worden vallen dus tegen de voorliggende tabs aan en vallen achter de absolute tab weg.

Mijn oplossing zou zijn om alle tabs absoluut maken en te laten plaatsen aan de hand van de omliggende div, dan staat altijd alles goed.

Nu vroeg ik me af of je niet een div zijn positie aan de hand van een absolute div kunt laten bepalen.

Het idee is dus dat tab 3 onderstaand absoluut wordt in voorbeeld twee, op deze manier onder tab 1wordt geplaatst en tab 4 zijn positie aan de hand van tab 3 bepaalt zoals 1 en 2 dat ook doen welke relative zijn.


VB1

code:
1
1 2 3 4


VB2

code:
1
2
1 2
3 4


In HTML (dirty ik weet het) zou het ongeveer zo moeten zijn:


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>

    <div id="tabbed">
    <div id="tab1">
<a href="#"><span>tab1</span></a>
</div>
<div id="tab2"> 
<a href="#"><span>tab2</span></a>
</div>
<div id="tab3">
<a href="#"><span>tab3</span></a>
</div>
</div>
  </body>
</html>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#tabbed {
    position:relative;
    width: 1007px;
}

#tab1 {
    display: block;
    float: left;
    height: 36px;
    width: 113px;
    }
#tab2 {
        display: block;
    height: 39px;
    width: 132px;
    z-index: 9999;
    position: absolute;
    left: 413px;
    top: 72px;
}
#tab3 {
    display: block;
    float: left;
    height: 36px;
    width: 113px;
    }


Het lijkt mij niet mogelijk maar wel verdomde makkelijk als dat zou kunnen :)

[ Voor 1% gewijzigd door RobIII op 06-04-2010 09:26 ]


Acties:
  • 0 Henk 'm!

  • Tharulerz
  • Registratie: April 2009
  • Laatst online: 10-04 05:16
Ik snap er niets van. Zet eens een showcase online?

Sowieso als ik dingen lees over 'de actieve met behulp van z-index over de onderste heen plaatsen?'

Je kan ook gewoon divs showen/hiden met javascript als je ergens op klikt/hovert...

Google maar eens op Tabbed menu javascript of tabbed menu jquery.

Voor het probleem dat je hier aanhaalt toch op te lossen, denk ik dat de volgende tip nuttig is:

Een div met position relative neemt WEL plaats in in je document, dus waarschijnlijk wil je die gebruiken. Weet ook dat als je relative of absolute definieert, je altijd de positie definieert tov de eerste parent die relative of absolute is. (Als er geen parent is die relative of absolute is neemt hij de HTML parent). In jouw voorbeeld: De positie die je definieert voor tab2 met left en top is relatief ten opzichte van #tabbed, omdat #tabbed een parent is die relative position heeft.

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Ik zou opzich wel een relative willen gebruiken, mijn probleem is alleen dat ik deze niet over een balk van een tabblad heen kan laten vallen.

Onderstaand voorbeeld legt dit denk ik wel uit. De rode onderste balk is gewoon een balk, het rode tabblad is langer gesliced dan degeen ernaast en valt er dus overheen waarom het een plaatje lijkt.

Ik heb hier en absolute voor nodig maar moet degene erna ook absoluut maken om hem er naast te krijgen, anders valt hij er achter.

Afbeeldingslocatie: http://img651.imageshack.us/img651/1431/slice.jpg

Acties:
  • 0 Henk 'm!

  • disjfa
  • Registratie: April 2001
  • Laatst online: 03-07 14:47

disjfa

be

1. Tab 1 en 2 zijn niet relatief gepositioneerd in je voorbeeld :P
En 2. Waar heb je het over?

Als je tab 3 en 4 absoluut wilt positioneren over tab 1 en 2 doe je dat toch gewoon :?

edit:
oh, je wilt gewoon tabjes maken. google daar gewoon op. Is niet 100% makkelijk, maar niet moeilijk

[ Voor 23% gewijzigd door disjfa op 06-04-2010 01:50 ]

disjfa - disj·fa (meneer)
disjfa.nl


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
disjfa schreef op dinsdag 06 april 2010 @ 01:48:
1. Tab 1 en 2 zijn niet relatief gepositioneerd in je voorbeeld :P
1 en 3 bedoel je ? klopt, duit kwam even uit een online testje... zeg toch.. dirty ;)
En 2. Waar heb je het over?

Als je tab 3 en 4 absoluut wilt positioneren over tab 1 en 2 doe je dat toch gewoon :?

edit:
oh, je wilt gewoon tabjes maken. google daar gewoon op. Is niet 100% makkelijk, maar niet moeilijk
Grappig, zat even wat topics van je te lezen over CSS... maarja toch maar een topic gemaakt.

Tabs zijn opzich vrij makkelijk te maken maar niet wanneer ze redelijk design hebben als schaduw, Bevel, etc...

Maar begrijp je mijn probleem als ik het over schaduw heb en z-index/absolute ?

[ Voor 13% gewijzigd door Verwijderd op 06-04-2010 02:02 ]


Acties:
  • 0 Henk 'm!

  • BarôZZa
  • Registratie: Januari 2003
  • Laatst online: 10-09 21:08
Als ik je voorbeeldplaatje zie, dan zou ik echt niet weten waarom je zou willen kutten met absolute positioning en z-index.

Acties:
  • 0 Henk 'm!

  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 08:26
Volgens mij maak je het jezelf echt enorm lastig.

(ook ik heb moeite met het begrijpen van je OP, maar dat kan ook aan het tijdstip liggen :P).

Is dit een menu is waar de items naast elkaar staan, en waar het active menu item hoger is dan de andere?\

Zoja, dan zou ik eerst een beginnen om dit zonder plaatjes voor elkaar te krijgen, maar alleen met css (tutorials genoeg). Vervolgens zul je erachter komen dat met css sprites zo'n voorbeeld eenvoudig is aan te passen naar wat jij wilt.

(css sprites is een term waar je alle "states" van te tab in 1 plaatje zet, en mbv css de achtergrond verschuift naar het plaatje wat je wil laten zien.)

Vaak is het de truc door slim je achtergrondplaatjes te maken, het te laten lijken alsof de actieve tab over de andere tabs heen valt. Wat een stuk makkelijker is dan daadwerkelijk de tabs over elkaar te laten vallen (wat jij volgens mij wilt).

[ Voor 15% gewijzigd door Kiphaas7 op 06-04-2010 02:16 ]


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
BarôZZa schreef op dinsdag 06 april 2010 @ 02:12:
Als ik je voorbeeldplaatje zie, dan zou ik echt niet weten waarom je zou willen kutten met absolute positioning en z-index.
Omdat ik anders de onderkant van die rode tab niet over die balk heen geschoven krijg zodat het in elkaar overvloeit.

Relative zou moeten werken zegt men, maar deze plaatst hem er toch echt boven :(
(css sprites is een term waar je alle "states" van te tab in 1 plaatje zet, en mbv css de achtergrond verschuift naar het plaatje wat je wil laten zien.)
Dit gebruik ik al voor de hovers, werkt prima.

Probleem van de active tab is dat deze breder is en dus schaduw heeft wat achter de andere tabs ligt. Probleem hierbij komt ook dat de tabs dus te dicht tegen elkaar liggen wat eventueel met een zindex wel op te lossen valt maar dan nog.

En ja die bredere tab maakt het mezelf lastig maat wel mooier.

[ Voor 37% gewijzigd door Verwijderd op 06-04-2010 02:17 ]


Acties:
  • 0 Henk 'm!

  • BarôZZa
  • Registratie: Januari 2003
  • Laatst online: 10-09 21:08
Que? Die rode balk onder hoef je niet letterlijk erboven te plakken. Sterker nog, ik zou het als background doen en de tabs erboven positioneren.

Als je de schaduw achter de andere tabs wilt hebben, dan kan je het als volgt slicen:

Afbeeldingslocatie: http://i42.tinypic.com/11iibg5.jpg

Wil je dat de tabs van kleur veranderen als je met de muis erover beweegt, dan kan je wel weer een nieuwe trucendoos openen.

Voor de rest snap ik niet waarom je zoveel moeite doet voor een paar tabs. Zet ze dan verder uit elkaar of laat het schaduwtje achterwege. Lijkt me een mooiere oplossing dan een hele berg lelijke css/html en dito verloren uren.

Acties:
  • 0 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Hoppa; en een merge naar het vorige topic. Ik zie geen reden voor een nieuw topic als dit gewoon voortborduurt op het oude

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
BarôZZa schreef op dinsdag 06 april 2010 @ 03:45:
Voor de rest snap ik niet waarom je zoveel moeite doet voor een paar tabs. Zet ze dan verder uit elkaar of laat het schaduwtje achterwege. Lijkt me een mooiere oplossing dan een hele berg lelijke css/html en dito verloren uren.
Dat biedt allemaal helaas geen soelaas en wat komt er aan CSS bij ? Absolute maken en wat coördinaten.

Dan maar de hard way :)

Wilde het gewoon even zeker weten!

Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 09-09 17:48
Verwijderd schreef op dinsdag 06 april 2010 @ 02:14:
[...]


Probleem van de active tab is dat deze breder is en dus schaduw heeft wat achter de andere tabs ligt. Probleem hierbij komt ook dat de tabs dus te dicht tegen elkaar liggen wat eventueel met een zindex wel op te lossen valt maar dan nog.

En ja die bredere tab maakt het mezelf lastig maat wel mooier.
Volgens mij bedoelt hij met "handig kiezen van je plaatjes" dat je beter de tab een vaste breedte kunt geven, en dan een achtergrondafbeelding geven die smaller is, waardoor het lijkt dat de tab kleiner is. Dan maak je het jezelf een heel stuk makkelijker.
BarôZZa schreef op dinsdag 06 april 2010 @ 03:45:
Voor de rest snap ik niet waarom je zoveel moeite doet voor een paar tabs. Zet ze dan verder uit elkaar of laat het schaduwtje achterwege. Lijkt me een mooiere oplossing dan een hele berg lelijke css/html en dito verloren uren.
Meen je dit serieus? Absoluut niet mee eens. Dan laat je je beperken door het systeem. Als je iets moois wilt maken, moet je je niet terug laten houden doordat een andere (lelijkere) oplossing toevallig wat makkelijker te coden is. Als je op zo'n manier denkt, zul je nooit echt uitdagende ontwerpen kunnen maken.

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
mcDavid schreef op dinsdag 06 april 2010 @ 11:01:
[...]


Volgens mij bedoelt hij met "handig kiezen van je plaatjes" dat je beter de tab een vaste breedte kunt geven, en dan een achtergrondafbeelding geven die smaller is, waardoor het lijkt dat de tab kleiner is. Dan maak je het jezelf een heel stuk makkelijker.
Dit is zeker een hele goede. Je loopt alleen tegen het probleem van "hoeken" aan met schaduwen, etc. Opzich zou je dan wel weer een css radius toe kunnen passen maar dat wordt wel te complex, waar de css radius niet in iedere broweser zo lekker werkt.. dus die hoeken die kun je niet echt verbergen en blijf je dan zien.
[...]

Meen je dit serieus? Absoluut niet mee eens. Dan laat je je beperken door het systeem. Als je iets moois wilt maken, moet je je niet terug laten houden doordat een andere (lelijkere) oplossing toevallig wat makkelijker te coden is. Als je op zo'n manier denkt, zul je nooit echt uitdagende ontwerpen kunnen maken.
Ik zie veel sites welke zich laten beperken tot het systeem. Opzich een goede keuze want je werkt vrij straight.

Neem bijvoorbeeld deze site, opzich qua graphics totaal niet fancy maar de combinatie laat wel die fancy look zien. Dat vind ik persoonlijk knap aangezien ik design op grafisch gebied lastig vindt... de combinatie tussen plain & simple maar wel fancy is moeilijk af te wegen soms...

Maar ik ben het met je eens, complexe zaken of iets meer werk kunnen mooie dingen doen opleveren !

Ach ieder zijn vak en ik heb er plezier in :)

[ Voor 3% gewijzigd door Verwijderd op 06-04-2010 12:04 ]


Acties:
  • 0 Henk 'm!

  • BarôZZa
  • Registratie: Januari 2003
  • Laatst online: 10-09 21:08
Verwijderd schreef op dinsdag 06 april 2010 @ 10:30:
[...]


Dat biedt allemaal helaas geen soelaas en wat komt er aan CSS bij ? Absolute maken en wat coördinaten.

Dan maar de hard way :)

Wilde het gewoon even zeker weten!
Absoluut maken van tabs? Veel succes. Heb je er rekening mee gehouden dat je verschillende font groottes kan hebben bij verschillende browsersettings? Lijkt me handig dat ze dan meeschalen.
mcDavid schreef op dinsdag 06 april 2010 @ 11:01:

Meen je dit serieus? Absoluut niet mee eens. Dan laat je je beperken door het systeem. Als je iets moois wilt maken, moet je je niet terug laten houden doordat een andere (lelijkere) oplossing toevallig wat makkelijker te coden is. Als je op zo'n manier denkt, zul je nooit echt uitdagende ontwerpen kunnen maken.
De beperkingen van een systeem kennen en aan de hand daarvan een strak ontwerp maken vind ik toch echt een stuk verstandiger dan blindelings een ontwerp bouwen en daarna uren kwijt te zijn aan rondvragen en lelijke CSS/javascript hacks bedenken om het er zo uit te laten zien. Leuk als je oneindig veel tijd hebt, maar ik besteed m'n uren liever aan iets anders.

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
BarôZZa schreef op donderdag 08 april 2010 @ 07:01:
[...]

Absoluut maken van tabs? Veel succes. Heb je er rekening mee gehouden dat je verschillende font groottes kan hebben bij verschillende browsersettings? Lijkt me handig dat ze dan meeschalen.
De tabs zijn vast en hebben de text in het plaatje... bewust gedaan aangezien er geen tabs bijkomen en ik het probleem wat jij schetst tegen wil gaan ;)

Acties:
  • 0 Henk 'm!

  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 08:26
Verwijderd schreef op donderdag 08 april 2010 @ 11:22:
[...]


De tabs zijn vast en hebben de text in het plaatje... bewust gedaan aangezien er geen tabs bijkomen en ik het probleem wat jij schetst tegen wil gaan ;)
In dat geval zul je echt never nooit met position absolute hoeven te klooien. Gewoon handig je sprites maken!!

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Kiphaas7 schreef op donderdag 08 april 2010 @ 12:32:
[...]


In dat geval zul je echt never nooit met position absolute hoeven te klooien. Gewoon handig je sprites maken!!
Jawel, ligt maar net aan hoe grafisch je tab/bar is.

Acties:
  • 0 Henk 'm!

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

mcDavid schreef op dinsdag 06 april 2010 @ 11:01:
[...]
Meen je dit serieus? Absoluut niet mee eens. Dan laat je je beperken door het systeem. Als je iets moois wilt maken, moet je je niet terug laten houden doordat een andere (lelijkere) oplossing toevallig wat makkelijker te coden is. Als je op zo'n manier denkt, zul je nooit echt uitdagende ontwerpen kunnen maken.
Er is natuurlijk ergens een grens tussen 'praktisch' en 'uitdagend', en die grens zal je zelf als front-end webdeveloper moeten kunnen stellen. Dat zal voor ieder persoon, afhankelijk van kennis en ervaring, anders zijn, maar je zal ook zaken als usability, accessibility en complexiteit (en daarmee onderhoudbaarheid) mee moeten nemen. Ook clientside-performance speelt dan nog mee (liever geen extra background-image voor een nauwelijks zichtbaar gradient-effect dan wel).

Ook wij hebben een designer (Femme :* ) die soms met designs op de proppen komt die niet erg praktisch zijn binnen een webomgeving (content-shaping waardoor er afhankelijkheden ontstaan tussen verschillende verder onafhankelijke blokken content, ellipsis op een wrapped stukje content die niet meer dan x regels mag beslaan, overal gradients en dropshadows, liefst nog een non-(web)standard font enzovoort). Ik trap dan ook regelmatig op de rem of 'versimpel' het design zodanig dat het voor de gemiddelde bezoeker toch niet opvalt.

Meestal is de grootste beperking toch je eigen kennis, of de tijd die het kost om de nodige kennis op te doen versus de tijd die je hebt om iets te realiseren. Zelfs met de kennis om iets te realiseren kan het raadzaam zijn om toch te kiezen voor een simpelere oplossing. Als je altijd en overal pixel-precies hetzelfde ontwerp wilt zien dan moet je affiches laten drukken en geen website gaan ontwerpen.

Intentionally left blank


Acties:
  • 0 Henk 'm!

  • Tjeemp
  • Registratie: Januari 2005
  • Laatst online: 03-01-2015

Tjeemp

BEER N TEA

Dit is een van de redenen waarom ik van mening ben dat ook webdesigners (die dus geen development doen) genoeg verstand zouden moeten hebben van (x)html en css of in ieder geval wat de mogelijkheden en beperkingen zijn van het web.
Het is namelijk in de meeste gevallen het best als de designer al kan werken met de beperkingen die er zijn dan dat de developer dingen in het design moet gaan aanpassen om het te laten werken in een webomgeving.

Ik moet wel eerlijk zijn hoor... over het algemeen daag ik developers nogal uit om te maken wat ik heb bedacht, maar ik maak alleen maar dingen waarvan ik weet dat het in ieder geval mogelijk is.

www.timovanderzanden.nl | Beer 'n' Tea


Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 09-09 17:48
Ja ik zie dat ik mijn mening iets moet nuanceren :+ Usability moet natuurlijk ten alle tijden gehandhaafd blijven (waar ik dan semantiek en performance ook even onder schaar), en pixel-perfect ontwerpen is veelal niet mogelijk door alleen al bijv. de verschillen in font-rendering van verschillende systemen.

Maar als je met 10 CSS-goocheltrucs toch ergens een effectje kunt toevoegen waarvan je denkt: "Ja, zo ziet het er toch beter uit", moet je dat wat mij betreft absoluut niet laten.
Pagina: 1