I was looking through some responsive techniques and stumbled across this website showing a demo for responsive text:

http://css-tricks.com/examples/LarkQueries/

 

This is what the window looks like when it is in full screen mode.

 

This is what it looks like in a reduced browser window.

It changes every ten pixels or so. using around 165 lines of  media queries to change the text based on browser size.

I quite like the idea, because it shows the user just how responsive the website really is and it could be utilised in so many ways.

This is the code behind it:

@media (max-width: 980px) { .row h2 span:after { content: ‘Unusual.’ } }

This was repeated 165 times and the  ‘max-width’  was changed to make it respond to different browser sizes.

I want to be able to use something like this in my assignment, as I think that it will be something my site could be noticed for. I often resize my browser without really paying attention to how much by or what has changed, but I think I would notice if there was a completely different title for example.

 

 

Advertisements