Blog (1 page)

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

Floating number of cells in the row

Explanation

What is unknown is the number of cells in a table row, or the number of cells varies from row to row, but they must all fit in a certain width. In this article I will tell and show an example of creating such table.

 

The trick

Determination of how many cells in a row, and the application of unique rules to them, is done in CSS using pseudo-selectors (:nth-of-type and :nth-last-of-type). That is why will work only on IE9 .

Next the example code, when cells can be 1,2,3 or 4.

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

The accordion CSS

Explanation

In this article, I'll show an example of creating a accordion CSS. Leads they themselves as well as the Bootstrap accordion. Link http://getbootstrap.com/javascript/#collapse-example-accordion

 

Feature

The principle of showing and hiding the contents of the accordion as in other examples, the site uses elements of input type="radio" and label, "tied" to these elements of the input.

Next, the sample code of one cell of the accordion and content to it.

  1. <div class="accordion">
  2. <input id="radio-1" type="radio" name="accordion"></input>
  3. <label for="radio-1">Button 1</label>
  4. <div>
  5. <div>Lorem ipsum ...</div>
  6. </div>
  7. </div>

Live demo
Read more

Bookmark CSS

Explanation

In this article, I'll show an example of creating tabs in CSS. They behave like bookmarks Bootstrap. Link http://getbootstrap.com/javascript/#tabs

 

Feature

The principle of showing and hiding content bookmarks as in other examples, the site uses elements of input type="radio" and label, "tied" to these elements of the input. However, to comply with the HTML stream had to use a float.

Next, the sample code one bookmark and content to it.

  1. <input id="tab-1" type="radio" name="tabs" checked>
  2. <label for="tab-1" class="not-selectable">tab-1</label>
  3. <div class="tab-1">
  4. <div class="tab-content">
  5. <p>Lorem ipsum ...</p>
  6. </div>
  7. </div>

Live demo
Read more

Modal window in CSS

Explanation

In this article, I'll show an example of creating a modal window on the CSS. It's acting as a Bootstrap modal window. Link http://getbootstrap.com/javascript/#modals

 

Feature

The principle of showing and hiding the modal window as in other examples of the site based on tag input type="checkbox" and attached to it a tag label. But to make the call modal window on button and stowing it by clicking the gray substrate or the close button in the modal window, used a trick. Namely, several elements label linked with one element of the inputresponsible for showing/hiding the modal window.

  1. <input id="modal" type="checkbox">
  2. <label for="modal" id="modal-overlay"></label>
  3. <label for="modal" id="modal-button">Show Modal</label>
  4. <div id="modal-window">
  5. <label for="modal" id="modal-close">X</label>
  6. <p>Lorem ipsum ...</p>
  7. </div>

Live demo
Read more

CSS transition rules, transform overflow

Explanation

Not always the CSS rules work exactly as you want or implied. And often unusual problems that need to be done on CSS. This will be discussed in the article.

 

Transition

This property does not work with all CSS rules. The entire list of properties that you can modify using transition can be viewed at http://www.w3.org/TR/css3-transitions/#animatable-css. In the specification shown are defined as time-function, as well as what they are and more.

 

Transition No. 1

This is a very simple example, in which on mouse over is animation change the background of an element.

  1. #transition-1 {
  2. height: 50px;
  3. width: 100px;
  4. background-color: lightcoral;
  5. transition: 1s;
  6. }
  7. #transition-1:hover {
  8. background-color: lightgreen;
  9. }

Feature

I didn't have to specify what you want to animate, then animated all the possible changes.

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