Complex elements in CSS

Carousel with any number of elements and navigation

Explanation

No such carousel on pure CSS, I have not found.

The carousel is a modified version of the carousel http://only-css.com/blog/article/prostaya-karusel-s-lyubym-kolichestvom-elementov-na-css.

The hardest part was to make the navigation buttons (arrow vlevo, right arrow). To the last (right) looking at the first slide, and the first (left) at last, it is especially difficult to make it all work regardless of the number of slides.

In the example, I laid the possibility of using from 2 to 10 slides.

 

The trick

Order, regardless of the selected slide, it was possible to make visible any button, they had to move down the tree carousel.

The structure was such:

  1. <div class="carousel">
  2. <!-- Begin block with input -->
  3. <input id="slide-1" type="radio" name="carousel" checked>
  4. <!-- End block with input -->
  5.  
  6. <input id="slide-2" type="radio" name="carousel">
  7.  
  8. ...
  9.  
  10. <!-- Begin block with label -->
  11. <a href="#slide_num_1" class="carousel-content" style="background-image: url(http://lorempixel.com/800/400/cats/1);">
  12. <span>Slide 1 (slide is anchor)</span>
  13. </a>
  14. <label class="control" for="slide-1"></label>
  15. <label class="arrow" for="slide-1"></label>
  16. <!-- End block with label -->
  17.  
  18. <a href="#slide_num_2" class="carousel-content" style="background-image: url(http://lorempixel.com/800/400/cats/2);">
  19. <span>Slide 2 (slide is anchor)</span>
  20. </a>
  21. <label class="control" for="slide-2"></label>
  22. <label class="arrow" for="slide-2"></label>
  23.  
  24. ...
  25. </div>

Live demo
Read more

Simple carousel with any number of elements on CSS

Explanation

Probably the hardest part of my job. Certainly not the carousel, and the carousel with navigation buttons (http://only-css.com/blog/article/karusel-s-lyubym-kolichestvom-elementov-i-navigaciey), without JavaScript.

Asked to make a carousel with any number of elements, implemented quickly. It was difficult to make navigation buttons for her.

But in this article we will talk about a simple carousel.

 

The trick

Due to the fact that the indentation of vertically margin-top/margin-bottom (https://www.w3.org/TR/CSS2/box.html#margin-properties) and padding-top/padding-bottom (https://www.w3.org/TR/CSS2/box.html#padding-properties) are considered to be the width of the element, you need to use top/bottom, with the appropriate positioning (position).

The following is an example of code that is a feature of the slider.

  1. <div class="carousel">
  2. <!-- Begin one slide -->
  3. <input id="slide-1" type="radio" name="carousel" checked>
  4. <div class="carousel-content">
  5. <span>Slide 1</span>
  6. </div>
  7. <label class="control" for="slide-1"></label>
  8. <!-- End one slide -->
  9.  
  10. <input id="slide-2" type="radio" name="carousel">
  11. <a href="#slide_num_2" class="carousel-content">
  12. <span>Slide 2 (slide is anchor)</span>
  13. </a>
  14. <label class="control" for="slide-2"></label>
  15.  
  16. ...
  17. </div>

Live demo
Read more

Slider

Explanation

Updated Mozilla Firefox, it was 2 years ago and on the start page, the developers have done exactly the same slider, but entirely in JS. And if it's a long time to play, then he started terribly slow. I decided that I would be able to do the same only without JS. I made it, and I had the idea to write this website and the first to write an article about this slider. But I didn't like my slider because of the binding width.

Now when I heavily modified, we removed the reference to width, I can write an article about it, although it is already the 15th on my account.

 

The trick

If the elements (cells) of the slider is to do with display: inline-block, when developing transition, which is transition-timing-function ease, cells will not be able to expand/shrink and it will appear in the empty space (background slider). To avoid this, the slider should be display: tableand its cells - display: table-cell. Then, even if the cells are to catch, they will stretch in proportion, and this effect will be.

The following is an example of code that is a feature of the slider.

  1. #slider {
  2. display: table;
  3. height: 400px;
  4. width: 100%;
  5. }
  6. #slider > * {
  7. display: table-cell;
  8. height: 100%;
  9. width: 25%;
  10. overflow: hidden;
  11. transition: width 1s;
  12. }

Live demo
Read more

The rating stars

The idea

There are many plugins are using Javascript to display the rating, but they are not very flexible and often have to write something of my own. The article explains how you can make the pure CSS ratingno with the output of the selected star (in the example of polusotni). The archive for download also are files in which the rating is made not on the pictures, and using a given symbol to UTF-8 star.

Explanation:

All examples are written using the binding technology of the tag label, the tag input using the standard HTML mechanism (supported since IE7). Yes, there is a feature and it is assign the same id to tag input and label. But usually it does not cause problems. However, thus, it is possible to remove values from input a simple transfer form.

 

The output values of the selected stars

The value for each star is stored in the attribute data-value and the displayed content of the pseudo element :after.

 

The differences between examples 1 and 2

The differences are the coloring on hover and in raster and vector versions. Code draw stars the same, but the selectors backlight different.

Live demo
Read more

Slider button on the CSS

The idea

It all started with the fact that I zahodel to make the switching element in the system settings menu Android. To do exactly the same is not interesting and rather simple, so I made some choices more difficult and more spectacular.

Explanation:

All the samples are written using the technology of the anchor tag label, tag input using standard HTML (supported since IE7). Yes, there is a feature and this is the purpose of the same id tag for input and label. But usually it does not cause problems. However, thus, it is possible to remove values from input a simple transfer form.

 

Button No. 1

It is very simple, and it is changing left and background-color switch.

Live demo
Read more