Font Pull -Down Menu

Ever had clients that could not decide on which font to use on their website?

here’s solution to implement choice!


Header Type 1

Header Type 2

Header Type 3

Header Type 4

Text Blocksatz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.

Text Linksbündig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Rechtsbündig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Zentriert

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Email

Lorem ipsum dolor sit amet Kontaktformular

 


 

This is a technique to implement a pull-down menu to test fonts on a web page

The html for the pull-down menu:

<link href='https://fonts.googleapis.com/css?family=Abel|Crimson+Text:400,400italic,600,600italic,700,700italic|Varela+Round|Patua+One|Gudea:400,400italic,700|Lora:400,400italic,700,700italic|Open+Sans+Condensed:300,300italic,700|Fjalla+One|Arvo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<select id="input-font" class="input"  onchange="changeFont (this);">
  <option value="Times New Roman" selected ="selected">Times New Roman</option>
  <option value="Abel">Abel</option>
  <option value="Crimson Text">Crimson Text</option>
  <option value="Varela Round">Varela Round</option>
  <option value="Patua One">Patua One</option>
  <option value="Gudea">Gudea</option>
  <option value="Lora">Lora</option>
  <option value="Open Sans Condensed">Open Sans Condensed</option>
  <option value="Fjalla One">Fjalla One</option>
  <option value="Arvo">Arvo</option>
</select>

The Javascript function:

<script>
    function changeFont(font){
        document.getElementById("output-text").style.fontFamily = font.value;
    }
</script>

And the html for the content:

<h3>Lorem ipsum dolor</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.</p>
<p style="text-align: justify;">Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.</p>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
&nbsp;
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="mailto:alex@fullframestudios.ch">Email</a></strong></p>
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet <a href="#">Kontaktformular</a></strong></p>

Google released open-source 3D API for the web

Could this be the one that changes the game? Google has released a 3D API, Quote by Google: «O3D is an open-source web API for creating rich, interactive 3D applications in the browser. This API is shared at an early stage as part of a conversation with the broader developer community about establishing an open web standard for 3D graphics.»

Read more here…

We’ve seen many formats and efforts of bringing 3D to the web in the past. At the begining there was vrml 1.0. I was very excited and built a lot of things in Power Animator and exported it to vrml inclusive authoring. Vrml 2.0 had animation, multi textures on one node and many more features like proximity sensors and 3D sound. I was especially impressed by «Floops» (unfortunately I found no usable links on Floops – anyone – comment?) created by Brad de Graaf for SGI (Silicon Graphics).

Later on vrml was replaced by X3D. X3D is an xml based file format and was supposed to widely spread and the plans were to create exporters for many applications in the animation and cad sector.

I’ve played with X3D and the Flux Player. Flux Player now merged into Vivaty but is still available to download here. I will put my experiment online soon… Stay tuned.

I am really hoping that this will finally kick of some serious business for 3D on the web. It’s about time I think. The bandwith, the gfx power on peoples machines and the technology is here. Now that Google has picked it up it has a real chance to succeed. What do you think?

Website of gvz_rossat ag/sa goes online

The re-design of the website for the professional gardener supply company gvz_rossat ag/sa goes online. The site uses a Adobe Flex Accordion as navigation and is bilangual.

gvz-rossat_Web_Medium

 

Back in the day flash movies were really hype. Here’s the flash header that I created for this website.



Fallback or ‹alternate› content goes here.
This content will only be visible if the SWF fails to load.


3D Internet – The future?

What if a website would be completly in 3D? I made the experiment and created this test using the X3D modeling package called Vizx3D. Media Machines (Tony Parisi) acquired Vizx3D and released later an application called Studio3D based on X3D.

You will need the newest installer to play this experiment. Get it here. Vivaty has taken over from Media Machines and has finally developed a plugin that also works in FireFox.

Update January 2016: Vivaty was bought up by Microsoft and their products and gallery were discontinued. More info also here. The player is now downloadable as part of this package.

Note: If you install the «SetupFluxPlayerStudio2-1.exe» from this package it will install the Flux Studio 2.1 and the Flux Player. Flux Studio is an interactive X3D authoring tool.

Warning: Although the Flux Player install will crash and report that FireFox is open and the plugin cannot be installed, the player will be installed. You can find it in the start menu under «Media Machines, Inc». I can confirm that it runs on Windows 7.

If you run it you can then open the URL: http://fullframestudios.ch/AREA/X3D/files/index_04.x3d to see the demo I did 8 years ago.

Be aware, this is completely experimental and I don’t take responsibility if it crashes your computer.

 

My basic idea was to transport the regular experience of browsing a website into 3D space plus add a little more excitement.

X3D_Images_01

3D Internet – The future? weiterlesen

DSGVO Cookie-Einwilligung mit Real Cookie Banner