CSS3 continuous responsive elements

12 Flares Twitter 3 Facebook 6 Google+ 2 LinkedIn 1 Email -- Filament.io 12 Flares ×

Have you ever used the ubiquitous fullwidth widgets which come with many HTML templates? We all know Bootstrap and sliders made for it, but how many times you felt frustrated by the difficult on changing title sizes inside a jumbotron or cover image backgrounds that not act like you would like to, expecially on screen resizing?

How many jumbotrons or full-width sliders have you ever tried before finding the best one which correctly scales at every resolution? Personally I’ve tried many (Bootstrap and Accio in primis). And everytime I had to heavily customize a code that wasn’t thought for my purpose.

Now I abandoned third party code editing and wrote my own and ULTIMATE piece of HTML+CSS for having the best result. And I think you could to the same for your big head sections.

NO CSS screen queries needed!

CSS3 vw measure and auto heights are the only things you will use.

Let’s see how it is possible in this DEMO:

Continuous Responsive Element - Example

imagine a 100% width element on your page with a big image inside and a big title onto it like in the following example.

I want it to be ALWAYS on 100% page width, so my CSS will be:

/* CSS */
.jumbotron {
 width: 100%;
 position: relative;
 }

Now the inside “background” image (that is not a real background, but an img HTML element with a low z-index):

/* CSS */
.jumbotron img {
  max-width: 100%;
}

.jumbotron_bck {
  width: 100%;
  height: auto;
  z-index: 1;
}

As you can see, the img element has auto height and this is the core of the trick: choose a well proportioned image as you like and it will size the element height.

And finally the titles:

/* CSS */
.bigtitle {
	position: absolute;
	bottom: 12%;
	left: 12%;
}

.bigtitle h1, .bigtitle h2 {
	font-size: 4vw;
	font-weight: 400;
	font-family: 'Roboto', sans-serif;
	line-height: 1.04em;
	text-shadow: 1px 1px 1px #fff;
	text-align: right;
	color: #111;
}

.bigtitle h2 {
	font-size: 1.6vw;
	text-transform: none;
	text-shadow: 1px 1px 1px #fff;
}

Titles are included in an absolute element with font size screen-width based with vw CSS3 measure. That’s all.
Here is the simple HTML:

<!-- HTML -->
<div class="jumbotron">
	<img src="http://www.gianpa.com/wp-content/uploads/background_example.jpg" class="jumbotron_bck">
	<div class="bigtitle">
		<h1>THIS TITLE<br>
			CORRECTLY SCALES
		</h1>
		<h2>
			At every screen size!
		</h2>
	</div>
</div>

See the example for the complete code. I used it in a LIVE one page site for my work. You can see it here untill it will be dismissed for commercial reasons.

12 Flares Twitter 3 Facebook 6 Google+ 2 LinkedIn 1 Email -- Filament.io 12 Flares ×

2 Replies to “CSS3 continuous responsive elements”

  1. I didn’t know about this css measure unit.. It’s useful for just some of the things; big titles are one example. However you’d end up with unreadable little text if you’d use vw on elements.
    By the way, this is the current browser support for vw:
    http://caniuse.com/#feat=viewport-units

    1. Hi Davide.
      This table shows that vw and vh are largely supported by browsers. It is also a good choice if you use it with tag measures reset at the very first lines of CSS. My example scales well at every devices and use H1 tag, but it is possible to use also every tag you want, just adjusting the measure for each case. Hope you enjoy it.

Leave a Reply

Your email address will not be published. Required fields are marked *