No need for different picture editing software. The cssSlider automatically crops your graphics and resizes them to suit whatever dimension you specify!
cssSlider has remarkable pure CSS3, hardware-accelerated effects to impress your customers and help to keep their eyes concentrated on your website.
CSS Slider doesn't apply images for styling so the skin color could be freely modified
Pick designs, colors and transitions in the astonishing compilation that's incorporated and ready to go.
All slider controls are vector icon font and they're excellent on hi-res monitors and screens
That is a great amount of options you can tweak, including perfect transition effects and colorful flat templates, prev/next navigation, bullets with thumbnails, autoplay, pause/stop, full width, full screen and other options.
Sleek and smooth hardware-accelerated animations run a lot better than jQuery ones, specifically on mobile gadgets
This slider makes use of square corners and geometric shapes to create a very modern, masculine design that has a lot of authority.
The slide show has a very thin white border that is just enough to help it stand out against the rest of the website. It would work well against a dark or black background.
The main slideshow itself uses a 'zoom' transition effect to move from one image to the next. This effect zooms out the first image and zooms in the next, combining the zoom with a fade. It has lots of movement and is eye-catching.
There is a caption in the bottom left corner. This caption uses the font 'Open Sans Condensed' which is sans-serif font with quite an authoritative feel to it.
The caption is white text on a transparent rectangle with a thin white border. There is a lot of space in the rectangle, which helps emphasize the sharp, squared off feel. There is both a title and a sub-title, and the title drops in from above, while the sub-title slides in from the right. Because they slide in from different directions and meet at a corner, it again helps reinforce that squared-off look and helps create a consistent feel across the whole design.
Hovering over the picture causes the navigation icons to appear. These are two thin white arrow-heads on each slide side. Each arrow-head is like a square turned on an angle and cut in half. These arrow-heads slide into place from the centre of the slideshow.
There is also a pause/play button that appears in the center, and this is just a white icon that rises into place.
Hovering over any of the icons causes them to move slightly, a subtle rollover effect that lets the user know they can interact with them.
There are a series of transparent rectangles with white borders at the bottom. Each rectangle represents an image in the slideshow. Hovering over a rectangle causes a small preview image to appear and clicking on a rectangle loads that image into the view area.
The rectangle linked to the current image has a thicker border for emphasis.
Because of the squared-off, authoritative design, this slider would be great for fitness sites that specialize in challenging work-outs, particularly strength-training. It would also be great for financial create mobile website that want to make a trustworthy impression.