Buttons & Menu Colors Create & Check Mailto A Pure CSS3 Slideshow Animations Encoding Fonts & Styles Footer Always Bottom Gradient Backgrounds Resizable Videos Horizontal Slide Show Resizable Slideshow JS Background Slideshow JS Slideshow, Vertical Menu JS Slideshow, Horizontal Menu Simple Canvas Code Editor Simple SVG Code Editor Unicode & HTML Code Universal Page Template jQuery Slide Show Some Paradigms of the Internet

A Pure HTML5/CSS3 Fully Responsible and Resizable Slideshow Animations (No JavaScript).

Slide 01. Try resizing the window to see the effect.

Slide 02. JavaScript is not used.

Slide 03. Ratio of height to the width of the window slider in this example is equal to 0.625. You can use any ratio.

Slide 04. All demo pictures have different sizes and are automatically resized and can be dynamically rescaled.

Slide 05. Tested on recent versions of browsers.

Slide 06. Inside the slider you can use the <video>, <object> and <iframe> tags to show video (100% width and 100% height).

Slide 07. A pure HTML5/CSS3 fully responsible and resizable slideshow animation (no JavaScript)

Slide 08. Best way - typographically controlling font sizes (font-size: [2.0vw ÷ 3.5vw]) using CSS. But now (2013) Chrome and Safari not supported typographically sized fonts without scripts.



Notes

1. Try resizing the window to see the effect.
2. JavaScript is not used.
3. Ratio of height to the width of the window slider in this example is equal to 0.625. You can use any ratio.
4. All demo pictures have different sizes and are automatically resized and can be dynamically rescaled.
5. Inside the slider you can use the <video>, <object> and <iframe> tags to show video.
6. Tested on recent versions of browsers.
7. Automatically resized fonts. Best way - typographcally сontrolling font sizes (from 2.0vw to 3.5vw) using CSS. But now (2013) Chrome and Safari typographcally sized fonts not supported without scripts.
8. This example uses an invisible tag <input> on the page and control slider is at the event ":checked". When the slideshow is used several different slides, it is not difficult, but if your slideshow, for example, have more than 10 sliders, it is best to use a script to control the slides.




Open Demo Page and Save Example