CSSPLAY
Doing it with style
Doing it with style
The French painter who exhibited little in his lifetime and pursued
his interests increasingly in artistic isolation, is regarded today
as one of the great forerunners of modern painting.
Initially planned a career as a lawyer. However, he began to paint
after an acute attack of appendicitis and then proceeded to become
a leader in many art circles.
This English painter was one of the greatest romantic interpreters
of nature in the history of Western art and is still unrivaled in
the virtuosity of his painting of light.
Tried to capture informally the effects of changing light and the
patterns of clouds moving across the country sky. He loved the
countryside, and his best work was of outdoor scenes in his native
Suffolk.
Monet's concern was to reflect the influence of light on a subject.
He never abandoned his Impressionist painting style until his death
in 1926 when Fauvism and Cubism were en vogue and when abstract
painting came into existence.
This one is the result of helping Brian with a tabbed menu problem. It also stays in shape when the text is resized.
The should work in IE5.01 (static image), IE5.5, IE6, Opera 7.54, Mozilla 1.75, FF and NN 7.1. Also Mac Safari and IE5.
#menu {
margin:0;
padding:0;
height:32.5em;
overflow:hidden;
background:#f0f0f0;
}
#menu li {
list-style-type:none;
float:left;
display:block;
width:100%;
}
#menu li a {
display:block;
text-decoration:none;
color:#00b;
margin:0;
width:100%;
}
#menu li a span {
display:none;
color:#000;
}
#menu li a.one span {
display:block;
height:15em;
margin:0 10px;
}
#menu li a:hover {
background:#f1f1f1;
}
#menu li a:hover span {
display:block;
height:15em;
margin:0 10px;
cursor:pointer;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#808;
font-variant:small-caps;
font-size:1.5em;
border:0;
}
#menu .h3 {
margin:0 5px;
padding:0;
font-size:1.1em;
color:#00b;
}
#menu img {
margin:5px 5px 5px 0;
border:1px solid #000;
float:left;
}
.curved {
width:21em;
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
font-size:1px;
display:block;
background:#88c;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
.curved .b1, .curved .b2, .curved .b3 {
height:1px;
}
.curved .b2, .curved .b3, .curved .b4 {
background:#f0f0f0;
border-left:1px solid #88c;
border-right:1px solid #88c;
}
.curved .b1 {
margin:0 4px;
background:#88c;
}
.curved .b2 {
margin:0 2px;
border-width:0 2px;
}
.curved .b3 {
margin:0 1px;
}
.curved .b4 {
height:2px;
margin:0;
}
.curved .c1 {
margin:0 5px;
background:#88c;
}
.curved .c2 {
margin:0 3px;
border-width:0 2px;
}
.curved .c3 {
margin:0 2px;
}
.curved .c4 {
height:2px;
margin: 0 1px;
}
.curved .boxcontent {
display:block;
background:transparent;
border-left:1px solid #88c;
border-right:1px solid #88c;
font-size:0.9em;
text-align:justify;
}
<div class="curved">
<b class="b1 c1"></b>
<b class="b2 c2"></b>
<b class="b3 c3"></b>
<b class="b4 c4"></b>
<div class="boxcontent">
<ul id="menu">
<li>
<a class="m5 five" href="#nogo">
<b class="h2">Paul Cézanne</b><br />
<b class="h3">(1839-1906)</b>
<span>
<img src="../img/cezanne.jpg" alt="painting"
title="painting" />
The French painter who exhibited little in his
lifetime and pursued his interests increasingly
in artistic isolation, is regarded today as one
of the great forerunners of modern painting.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">Henri Matisse</b><br />
<b class="h3">(1869-1954)</b>
<span>
<img src="../img/matisse.jpg" alt="painting"
title="painting" />
Initially planned a career as a lawyer. However,
he began to paint after an acute attack of
appendicitis and then proceeded to become
a leader in many art circles.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">William Turner</b><br />
<b class="h3">(1775-1851)</b>
<span>
<img src="../img/turner.jpg" alt="painting"
title="painting" />
This English painter was one of the greatest
romantic interpreters of nature in the history
of Western art and is still unrivaled in
the virtuosity of his painting of light.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">John Constable</b><br />
<b class="h3">(1776-1837)</b>
<span>
<img src="../img/constable.jpg" alt="painting"
title="painting" />
Tried to capture informally the effects of changing
light and the patterns of clouds moving across the
country sky. He loved the countryside, and his best
work was of outdoor scenes in his native Suffolk.
</span>
</a>
</li>
<li>
<a class="one" href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">Claude Monet</b><br />
<b class="h3">(1840-1926)</b>
<span>
<img src="../img/monet.jpg" alt="painting"
title="painting" />
Monet's concern was to reflect the influence of
light on a subject. He never abandoned his Impressionist
painting style until his death in 1926 when Fauvism and
Cubism were en vogue and when abstract painting came
into existence.
</span>
</a>
</li>
</ul>
</div>
<b class="b4 c4"></b>
<b class="b3 c3"></b>
<b class="b2 c2"></b>
<b class="b1 c1"></b>
</div>
You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
