CSS Card: making cards with pure css

CSS Card: making cards with pure css

Html code for making poker

The first step is to make the html of poker. My principle is to use the least concise code without referencing any image. Maybe you think it is impossible, but you can still see how I work.

Create a div and assign two class attributes: cardand suitdiamonds.

. Code

2. Add the card content to this div. You only need A paragraph mark containing the letter.

   You can.

   . Code
   2. A

   3. Now remember in your mind that our goal is not only to make a playing card, but also to use the simplest code, you only need so much html code (concise enough ).

      Well-developed 5-year UI front-end framework!

      Css code

      The first step of css is to define basic page attributes, which will becardInheritance.

      . Code
      1. * {Margin: 0; padding: 0 ;}
      3. Body {
      4. Background: #00a651;
      5. }
      7. . Card {
      8. Position: relative;
      9. Float: left;
      10. Margin-right: 10px;
      11. Width: 150px;
      12. Height: 220px;
      13. Border-radius: 10px;
      14. Background: # fff;
      15. -Webkit-box-shadow: 3px 3px 7px rgba (0,0, 0, 0.3 );
      16. Box-shadow: 3px 3px 7px rgba (0, 0, 0, 0.3 );
      17. }

          As shown in the code above, the card style is very simple, with a white background, rounded corner, and border shadow,positionThere is nothing special except relative.

          Now let's polish the letter.

          . Code
          1. . Card p {
          2. Text-align: center;
          3. Font: 100px/220px Georgia, Times New Roman, serif;
          4. }

             First look at the effect:

             Now it seems that there is no card effect, but there is always something missing-plum blossom, square, red peach, and black peach. If we want to display these images without introducing them, things will become complicated, but we still have the problem-solving skills. Well-developed 5-year UI front-end framework!

             Considering that we no longer want to add more code to the html part, we introduce the pseudo elements before and after to add the plum blossom blocks to the card. Fortunately, the vast majority of browsers can recognize various types of special symbols.

             . Code
             1. . Suitdiamonds: before,. suitdiamonds: after {
             2. Content :"? ";
             3. Color: # ff0000;
             4. }

                I use before and after at the same time, so that I can get the upper and lower squares, and the other figures are based on the gourd painting.

                . Code
                1. . Suitdiamonds: before,. suitdiamonds: after {
                2. Content :"? ";
                3. Color: # ff0000;
                4. }
                6. . Suithearts: before,. suithearts: after {
                7. Content :"? ";
                8. Color: # ff0000;
                9. }
                11. . Suitclubs: before,. suitclubs: after {
                12. Content :"? ";
                13. Color: #000;
                14. }
                16. . Suitspades: before,. suitspades: after {
                17. Content :"? ";
                18. Color: #000;
                19. }

                    If you are a careful person, you should have discovered that the direction of these squares seems to be reversed. In fact, it is easy to Implement css inversion, but it is not necessary to consider that no one will reverse the screen to watch this playing card.

                    We have drawn the symbols of poker, and we should also modify the size and proper positioning. The font size and position of square, plum blossom, and peach are consistent, so we 'd better write it only once.div[class*='suit']You can select the four selector at the same time. (In the comments in the original article, someone suggested using a class to define it separately, because the efficiency of the method described by the author is lower.) carefully developed the UI front-end framework for five years!

                    . Code
                    1. Div [class * = 'suit']: before {
                    2. Position: absolute;
                    3. Font-size: 35px;
                    4. Left: 5px;
                    5. Top: 5px;
                    6. }
                    8. Div [class * = 'suit']: after {
                    9. Position: absolute;
                    10. Font-size: 35px;
                    11. Right: 5px;
                    12. Bottom: 5px;
                    13. }

                        Next let's take a look at the effect

                        We just made an image above. Now I want to make a group of images:

                        . Code
                        4. A

                        8. A

                        12. A

                        16. A

                        19. A 5-year UI front-end framework developed by css!

                            . Code
                            1. . Hand {
                            2. Margin: 50px;
                            3. }
                            5. /* For modern browsers */
                            6. . Hand: before,
                            7. . Hand: after {
                            8. Content :"";
                            9. Display: table;
                            10. }
                            12. . Hand: after {
                            13. Clear: both;
                            14. }
                            16. /* For IE 6/7 (trigger hasLayout )*/
                            17. . Hand {
                            18. Zoom: 1;
                            19. }
                            21. . Card: hover {
                            22. Cursor: pointer;
                            23. }

                                Next, I want to use css to make some interesting animated effects: At the beginning, only one poker player is displayed. When the mouse moves up, poker will show up, it's like holding a card in your hand when you play a card.

                                Html

                                The difference is that I added the spread class attribute.

                                . Code
                                4. A

                                8. A

                                12. A

                                16. A

                                19. Well-developed 5-year UI front-end framework!

                                    Css

                                    . Code
                                    1. . Spread {
                                    2. Width: 350px;
                                    3. Height: 250px;
                                    4. Position: relative;
                                    5. }
                                    7. . Spread>. card {
                                    8. Position: absolute;
                                    9. Top: 0;
                                    10. Left: 0;
                                    11. -Webkit-transition: top 0.3 s records, left 0.3 s records;
                                    12. -Moz-transition: top 0.3 s records, left 0.3 s records;
                                    13. -O-transition: top 0.3 s records, left 0.3 s records;
                                    14. -Ms-transition: top 0.3 s records, left 0.3 s records;
                                    15. Transition: top 0.3 s records, left 0.3 s records;
                                    16. }

                                        The effect of moving the mouse up:

                                        . Code
                                        1. . Spread: hover. suitdiamonds {
                                        2. -Webkit-transform: rotate (-10deg );
                                        3. -Moz-transform: rotate (-10deg );
                                        4. -O-transform: rotate (-10deg );
                                        5. -Ms-transform: rotate (-10deg );
                                        6. Transform: rotate (-10deg );
                                        7. }
                                        9. . Spread: hover. suithearts {
                                        10. Left: 30px;
                                        11. Top: 0px;
                                        12. -Webkit-transform: rotate (0deg );
                                        13. -Moz-transform: rotate (0deg );
                                        14. -O-transform: rotate (0deg );
                                        15. -Ms-transform: rotate (0deg );
                                        16. Transform: rotate (0deg );
                                        17. }
                                        19. . Spread: hover. suitclubs {
                                        20. Left: 60px;
                                        21. Top: 5px;
                                        22. -Webkit-transform: rotate (10deg );
                                        23. -Moz-transform: rotate (10deg );
                                        24. -O-transform: rotate (10deg );
                                        25. -Ms-transform: rotate (10deg );
                                        26. Transform: rotate (10deg );
                                        27. }
                                        29. . Spread: hover. suitspades {
                                        30. Left: 80px;
                                        31. Top: 10px;
                                        32. -Webkit-transform: rotate (20deg );
                                        33. -Moz-transform: rotate (20deg );
                                        34. -O-transform: rotate (20deg );
                                        35. -Ms-transform: rotate (20deg );
                                        36. Transform: rotate (20deg );
                                        37. }

                                            In addition, a five-year UI front-end framework has been developed with a shadow effect!

                                            . Code
                                            1. . Spread>. card: hover {
                                            2. -Webkit-box-shadow: 1px 1px 7px rgba (0.4, 0 );
                                            3. Box-shadow: 1px 1px 7px rgba (0, 0, 0, 0.4 );
                                            4. }