What is "impossible" in CSS?

**RyanReese** · Mar 24, 2012 18:55

In the spirit of getting the CSS quizzes back on track, perhaps some ideas can be posted in this thread.

Ideas/layouts thought to be impossible (even if it wasn't working in a lone browser). Give any and all suggestions you can think of, even if you don't know if a solution is found for it already

.

**ralph.m** · Mar 24, 2012 19:08

Server-side CSS.

**RyanReese** · Mar 24, 2012 19:15

Originally Posted by ralph.m

Server-side CSS.

Something tried and failed

.

**Rayzur** · Mar 24, 2012 23:22

A bottom aligned float in a fluid height container, it has never been accomplished across all modern browsers.

We all know there is not a bottom value for floats but we have dubbed this attempt as "float bottom". I have spent many hours on this myself and I have finally given up on it.

What's needed is a child element that can set it's height to 100% of the parents unknown/fluid height. That's how the scripted versions work.

In the code below: Paul O'B had got close using display:table, but it only works in FF3+.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Float bottom in Firfefox 3+ only</title>
<style type="text/css">
h1 {
    text-align: center;
}
#wrap {
    width: 50%;
    height: 1px;
    display: table;
    margin: 0 auto;
    padding: 0 0 0 5px;
    border: 2px solid #000;
    background: #EEF;
    text-align: justify;
}
.push {
    float: right;
    display: table;
    width: 2px;
    height: 100%;
    background: red;
    margin-bottom: -115px;
}
.float {
    float: right;
    clear: right;
    width: 100px;
    height: 100px;
    margin: 10px 0 10px 10px;
    background: lime;
}
p {
    margin: 0;
    padding: 5px;
    line-height: 1.5;
}
</style>
 
</head>
<body>
<h1>Float bottom in Firfefox 3+ only</h1>
<div id="wrap">
    <div class="push"></div><div class="float">Float</div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisl metus, vehicula id, tincidunt at, 
    aliquet et, sem. Duis pretium justo. Aenean tortor lectus, laoreet et, fermentum quis, volutpat nec, tortor. 
    Integer et velit in mi viverra sagittis. Cras vitae massa. Praesent porttitor. Cum sociis natoque penatibus 
    et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam magna, faucibus et, tempus in, viverra 
    nec, eros. Sed egestas. Mauris adipiscing urna ut nulla. Pellentesque habitant morbi tristique senectus et 
    netus et malesuada fames ac turpis egestas. Cras pharetra accumsan magna. Integer iaculis. Suspendisse potenti. 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin odio eros, eleifend 
    ac, rutrum eget, ullamcorper a, sem. Vestibulum quis magna. Nullam vulputate massa non massa. Fusce lectus 
    ipsum, placerat vitae, hendrerit nec, interdum eu, odio. Nullam id tortor.</p>      
</div>
</body>
</html>

**RyanReese** · Mar 25, 2012 07:12

Interesting code

. Thanks for your input Rayzur.

**TehYoyo** · Mar 25, 2012 14:16

Flying? Teleportation (although visually, no)? Oh you meant code wise?

One thing I'd like to see is a hover effect where there are maybe 10-100 images stacked on top of each other. On hover, the top flies to the right, revealing the next which is then given the hover (at least, visually) and flies out to reveal the next one which gains the hover, etc. etc. etc.

~TehYoyo

**RyanReese** · Mar 25, 2012 14:21

Originally Posted by TehYoyo

Flying? Teleportation (although visually, no)? Oh you meant code wise?

What other -wise is there?

One thing I'd like to see is a hover effect where there are maybe 10-100 images stacked on top of each other. On hover, the top flies to the right, revealing the next which is then given the hover (at least, visually) and flies out to reveal the next one which gains the hover, etc. etc. etc.

~TehYoyo

Interesting effect/idea

. Although everything would collapse again after hover is done.

**TehYoyo** · Mar 25, 2012 15:03

Originally Posted by RyanReese

What other -wise is there?

Interesting effect/idea

. Although everything would collapse again after hover is done.

Yeah

Would be a cool effect, I think. More of a flash thing, really. Could lead to a real nice 'floating in space' image gallery.

~TehYoyo

**ralph.m** · Mar 25, 2012 15:14

Originally Posted by TehYoyo

Yeah

Would be a cool effect, I think. More of a flash thing, really. Could lead to a real nice 'floating in space' image gallery.

Some things are probably better left to JavaScript.

**John_Betong** · Mar 25, 2012 22:37

>>> What is "impossible" in CSS?

Activate conditional statements depending on browser and/or screen size.

**ralph.m** · Mar 25, 2012 23:30

Originally Posted by John_Betong

Activate conditional statements depending on browser and/or screen size.

To some extent that's possible. You can detect IE, and @media queries can be used to target screen sizes.

**John_Betong** · Mar 26, 2012 01:47

Originally Posted by ralph.m

To some extent that's possible. You can detect IE, and @media queries can be used to target screen sizes.

PHP can interrogate $_SERVER['HTTP_USER_AGENT'] and generate a browser specific CSS file but CSS cannot detect which browser is being used (or simulated).

**ralph.m** · Mar 26, 2012 01:55

Yes, I should have specified that it's not CSS that detects the browser, so I should just have mentioned @media queries for detecting viewport dimensions.

**Paul O'B** · Mar 26, 2012 04:01

Originally Posted by TehYoyo

Flying? Teleportation (although visually, no)? Oh you meant code wise?

One thing I'd like to see is a hover effect where there are maybe 10-100 images stacked on top of each other. On hover, the top flies to the right, revealing the next which is then given the hover (at least, visually) and flies out to reveal the next one which gains the hover, etc. etc. etc.

~TehYoyo

You can get pretty close with css3 transitions.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.box {
	width:100px;
	height:100px;
	position:absolute;
	left:100px;
	top:400px;
	-webkit-transition-property:all;
	-webkit-transition-duration: 2s;
	-webkit-transition-delay: 1s;
	-moz-transition-property:all;
	-moz-transition-duration: 2s;
	-moz-transition-delay: 1s;
	transition-property:all;
	transition-duration: 2s;
	transition-delay: 1s;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	transition:all 1s ease-in-out;
}
.b1 { background:red }
.b2 {
	background:green;
	-moz-transition-delay: 2s;
	-webkit-transition-delay: 2s;
	transition-delay: 2s;
}
.b3 {
	background:yellow;
	-moz-transition-delay: 3s;
	-webkit-transition-delay: 3s;
	transition-delay: 3s;
}
.b4 {
	background:blue;
	-moz-transition-delay: 4s;
	-webkit-transition-delay: 4s;
	transition-delay: 4s;
}
.b5 {
	background:orange;
	-moz-transition-delay: 5s;
	-webkit-transition-delay:5s;
	transition-delay: 5s;
}
.b6 {
	background:teal;
	-moz-transition-delay: 6s;
	-webkit-transition-delay: 6s;
	transition-delay: 6s;
}
.wrap:hover div {
	left:500px;
	top:100px;
}
.wrap {
	position:relative;
	width:600px;
	height:600px;
	border:1px solid #000
}
</style>
</head>

<body>
<div class="wrap">
		<div class="box b1">Box1</div>
		<div class="box b2">Box2</div>
		<div class="box b3">Box3</div>
		<div class="box b4">Box4</div>
		<div class="box b5">Box5</div>
		<div class="box b6">Box6</div>
</div>
</body>
</html>

**RyanReese** · Mar 26, 2012 06:31

Wow Paul, a little buggy but that's pretty savvy

.

And to clarify for everyone, I mean stuff that was thought to be impossible (IE6 dropdown w/o Javascript for example)

Rayzur has provided a good example.

Originally Posted by Paul O'B

You can get pretty close with css3 transitions.

**TehYoyo** · Mar 26, 2012 07:48

Originally Posted by Paul O'B

You can get pretty close with css3 transitions.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.box {
	width:100px;
	height:100px;
	position:absolute;
	left:100px;
	top:400px;
	-webkit-transition-property:all;
	-webkit-transition-duration: 2s;
	-webkit-transition-delay: 1s;
	-moz-transition-property:all;
	-moz-transition-duration: 2s;
	-moz-transition-delay: 1s;
	transition-property:all;
	transition-duration: 2s;
	transition-delay: 1s;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	transition:all 1s ease-in-out;
}
.b1 { background:red }
.b2 {
	background:green;
	-moz-transition-delay: 2s;
	-webkit-transition-delay: 2s;
	transition-delay: 2s;
}
.b3 {
	background:yellow;
	-moz-transition-delay: 3s;
	-webkit-transition-delay: 3s;
	transition-delay: 3s;
}
.b4 {
	background:blue;
	-moz-transition-delay: 4s;
	-webkit-transition-delay: 4s;
	transition-delay: 4s;
}
.b5 {
	background:orange;
	-moz-transition-delay: 5s;
	-webkit-transition-delay:5s;
	transition-delay: 5s;
}
.b6 {
	background:teal;
	-moz-transition-delay: 6s;
	-webkit-transition-delay: 6s;
	transition-delay: 6s;
}
.wrap:hover div {
	left:500px;
	top:100px;
}
.wrap {
	position:relataive;
	width:600px;
	height:600px;
	border:1px solid #000
}
</style>
</head>

<body>
<div class="wrap">
		<div class="box b1">Box1</div>
		<div class="box b2">Box2</div>
		<div class="box b3">Box3</div>
		<div class="box b4">Box4</div>
		<div class="box b5">Box5</div>
		<div class="box b6">Box6</div>
</div>
</body>
</html>

I meant a continual hover effect, like when the red box flies out, the box below it gains the hover...as far as I know, that's impossible.

~TehYoyo

**Paul O'B** · Mar 26, 2012 09:14

Originally Posted by TehYoyo

I meant a continual hover effect, like when the red box flies out, the box below it gains the hover...as far as I know, that's impossible.

~TehYoyo

That demo was a continual hover effect

Hover long enough and all the boxes fly out.

You can't move an element out of the way by hovering on the element itself because as soon as it moves it its not hovered any more and takes its place back in the stack. All you get is a flicker effect.

You have to hover on a parent and then make the children move so that way the effect is constant as in my demo.

I did have a very old z-index demo here that I did for an old article.

Originally Posted by Ryan

And to clarify for everyone, I mean stuff that was thought to be impossible (IE6 dropdown w/o Javascript for example)

Which was solved in a previous css quiz in case anyone didn't know

**itmitică** · Mar 26, 2012 14:31

Transform the select element with its options into a horizontal menu. That is, make the list box entries "explode" into independent little options. Having anchors, preferably.

Much like what Google does on Google Translate with the "From" and "To" selects for languages, but it does it with JavaScript, as a progressive enhancement.

I mean, you can make something like this:

Code html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#sel{
    background-color:#FF0;
    width:40px;
    }
#sel optgroup{
    background-color:#CFF;
    display:table;
    width:20px;
 
    }
 
  #sel optgroup option{
    background-color:#deF;
    display:table-cell;
    width:20px;
 
    }
</style>
</head>
 
<body>
<select name="sel" id="sel">
<optgroup label="group1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
<optgroup label="group2">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</optgroup>
</select>
</body>
</html>

but you can't do so much more. You can play with inline-table and such, but it's a far cry from what a classic menu looks like. Nevermind the lack in behavior. Oh, and don't mention lists. I know...

User Tag List

Thread: What is "impossible" in CSS?

Thread Tools

Display

What is "impossible" in CSS?

Bookmarks

Bookmarks

Posting Permissions