CSS PLAY
Doing It With Style
Bulb Fields was Van Gogh's first garden painting, in oil paint on canvas mounted on wood.
It was made in Van Gogh's second year in The Hague.
It depicts the rectangular plots of blue, yellow, pink and red hyacinths grown by a Dutch bulb merchant.
The low vantage point creates a panoramic view of the field of colourful spring flowers, with thatched cottages and leafless trees in the background.
The regular composition allows Van Gogh to explore his interest in perspective.
Farmhouses Among Trees is an oil painting created by Dutch artist Vincent van Gogh in September 1883.
The painting is exhibited in the Museum of John Paul II Collection in Warsaw.
In 2024, the authenticity of the painting was confirmed beyond all doubt after analyses by experts from the National Museum in Kraków and Van Gogh Museum.
From 1883 to 1885, van Gogh lived in Drenthe, a remote district of the Netherlands, flat and riven with canals, a landscape of marsh and mist.
Throughout 1883, the artist worked on his series of peasants' cottages, exploring the local terrain of marshes and peat fields, ditches and canals. Like much of his work of this period, Marshy Landscape is rendered with subdued earthy tones, giving the impression of being painted with the very soil itself.
Alone in the wilderness, Vincent drew upon the power of nature, the stillness and silence of the marshes inspiring him.
A Wind-Beaten Tree or A Windswept Tree is an oil painting created in August 1883 by Vincent van Gogh.
It was painted early in his artistic career, whilst he was living in The Hague.
It was stolen from a private collection in Zurich in 1997 and has not been recovered.
This demo works in all browsers except Firefox at the moment (July 2024) as it does not yet support the html details name="".
This just uses html 'details / summary' to open and close the information panels.
Details / summary acts in a similar way to checkbox inputs in the the initial click/tap sets the 'details' to open, and a second click/tap sets the 'details' to not open.
Details / summary can also act like a combination of checkbox AND radio inputs.
If you give all the 'details' the same name it will only allow one 'details' to be open whilst also allowing a second click/tap to close the open 'details'.
So the above demonstration will only allow one 'details' to be open and also allow you to close an open 'details'.
The icon to the left of the 'summary' can be changed to any other html icon using list-style-type: and have the icon hex value inserted, for example list-style-type: '\1f308';
Finally, if the 'summary' contains the extra text then this cannot be animated, so instead you can use the details[open] to target the extra information and have this slide open and shut using display:grid; with grid-template-rows:0fr; and transition:grid-template-rows 0.5s; then on click change this to grid-template-rows:1fr; which will have a smooth transition to open and close.