Michel Vuijlsteke's weblog

Tales of Drudgery & Boredom.

Met de pillow emboss van Softimage

Het was 2000 of zo, en ik had nog nooit iets zo mooi gezien als de folder van Softimage|XSI.

Zachtgrijs, met zachte zachte glooiingen, en hier en daar een klein beetje kleur. De interface van Softimage toen, lang voor Autodesk het overnam, had er ook een beetje van.

Ik heb al sinds de jaren 1990 altijd wel ergens een scriptje draaien dat mij zegt hoe lang het nog is. Tot de dag gedaan, tot mijn pensioen, dat soort dingen. En ’t is niet alsof ik de enige ben in het gezin: bij ons thuis op het bord in de keuken staat altijd wel iets waar naar afgeteld wordt.

20170913_192158

En toen dacht ik plots aan die Softimage toen ik naar mijn aftelscriptje zat te kijken, en hoe eigenlijk al die zachte en afgeronde dingen tegenwoordig poepsimpel zijn in html/css.

Ik begin met een gewone <div> met daarin een tweede <div>, alletwee van een verschillende kleur. Iets gelijk dit dus:

<style>
  .total {
      width: 100px;
      height: 4px;
      background-color: #a7b7c9;
  }
    
  .amount {
      background-color: #1e5799;
      float: left;
      height: 4px;
      width: 47%;
      margin: 0;
  }
</style>
<div class="total">
  <div class="amount"></div>
</div>

bar01

Aan de buitenste div geef ik een witte schaduw naar beneden en naar rechts (box-shadow: 0 1px 2px #fff):

bar02

En dan ook nog een lichte donkere schaduw aan de andere kant (0 -1px 1px #666):

bar03

Met dezelfde box-shadow maar deze keer inset in plaats van standaard doe ik dan een schaduw aan de binnenkant van de <div> (inset 0 -1px 1px rgba(0, 0, 0, 0.25) — met doorschijnend zwart wegens nog niet zeker weten wat de kleur aan de binnenkant zal zijn, en ja, ik had dat aan de buitenkant ook kunnen doen natuurlijk):

bar04

…en ook zo’n witte schijn, deze keer aan de bovenkant (inset 0 1px 1px rgba(255, 255, 255, 0.48)):

bar05

Idemdito voor het balkje met de kleur:

bar06

Voor wat extra leutigheid in plaats van een gewoon blauw een verloop (background: linear-gradient(to left, #1e5799 0%, #2989d8 50%, #70beff 84%, #70beff 84%, #d3ecff 100%)):

bar07

En om het af te maken een simpele border-radius: 3px en hopladiejee!

bar08

Allemaal tesamen met wat javascript om de dingen te animeren geeft mij dat dit op mijn GSM:

Screenshot_20170913-191809

Voor wie het in werking wil zien: ’t staat op de Githubs, en wel op http://mvuijlst.github.io/time. Op desktop moet ge voor het moment wel nog een paar keer ctrl-+ duwen om het leesbaar op scherm te krijgen. Of het venster kleiner zetten natuurlijk. 🙂

1 reactie

  1. Proper en creatief geprogrammeerd. Inspirerend. Bedankt, Michel

Zeg uw gedacht

© 2017 Michel Vuijlsteke's weblog

Thema gemaakt door Anders NorenBoven ↑