CSS Card: pure css cards and csscard cards

CSS Card: pure css cards and csscard cards

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

1. <Div class = "card suitdiamonds">
2. </Div>

 

 

To add the card content to this div, you only need A paragraph mark containing the letter A <P>.

. Code

1. <Div class = "card suitdiamonds">
2. <P> A </p>
3. </Div>

 

 

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

1. <Div class = "hand">
3. <Div class = "card suitdiamonds">
4. <P> A </p>
5. </Div>
7. <Div class = "card suithearts">
8. <P> A </p>
9. </Div>
11. <Div class = "card suitclubs">
12. <P> A </p>
13. </Div>
15. <Div class = "card suitspades">
16. <P> A </p>
17. </Div>
19. </Div>

 

 

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

. Code

1. <Strong style = "border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">. 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. } </Strong>

 

 

 

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

1. <Div class = "hand spread">
3. <Div class = "card suitdiamonds">
4. <P> A </p>
5. </Div>
7. <Div class = "card suithearts">
8. <P> A </p>
9. </Div>
11. <Div class = "card suitclubs">
12. <P> A </p>
13. </Div>
15. <Div class = "card suitspades">
16. <P> A </p>
17. </Div>
19. </Div>

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

 

 

Css

. Code

1. <Strong style = "border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">. 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. } </Strong>

 

 

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. }

 

 

 

How to Create tabs for pure CSS web pages

What browser are you using? I have not found any incompatibility !!!

This example uses general tags !!!
========================================================== =

CSS is used as a tab, which is defined first and then referenced.

You can also follow the example you mentioned to make it easier.

========================================================== ====================

PS: I do not understand "compatibility" in this example. The CSS definition module in this example clearly defines the functions and usage of each module, and the final effect is achieved by referencing these modules, if you delete the "module" at will, something is wrong. Just like JavaScript statements that you can delete at will cannot be run, but this is not a "compatibility" problem !!

How can I use pure css to create dynamic web page effects?

Almost all of the effects you mentioned are triggered by hover, so ie6 cannot do this.
For example, <li> </li>
<Style>
. Pic2 {display: none ;}
Li: hover. pic2 {display: block ;}
</Style>
Set pic2 to hide. Set it to visible when the li: hover attribute is triggered by the mouse.