CSS Card: Making playing cards with pure css_html/css_WEB-ITnose
制作扑克的html代码
第一步是制作扑克的html，我的原则是用最少最简洁的代码，不引用任何图片，也许你认为不可能，但是你还是乖乖的看我是如何工作的吧。
建立一个div，赋予两个class属性：cardand suitdiamonds
.代码
往这个div中添加卡片的内容，只需要一个包含字母A的段落标记
就可以了。
.代码
-
A
Now always keep in mind that our purpose is not just to make a playing card, but to use it The most concise code, the html part of the code only needs so much (concise enough).
UI front-end framework carefully developed for 5 years!
css code
The first step in css is to specify the basic page properties, which will be inherited by the card.
.code
- * {margin: 0; padding: 0;}
- body {
- background: #00a651;
- }
- .card {
- position: relative; > float: left;
- margin-right: 10px;
- width: 150px;
- height: 220px;
- border-radius: 10px;
- background: #fff;
- -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
- box-shadow: 3px 3px 7px rgba (0,0,0,0.3);
- }
As shown in the above code, card The style is very simple, with a white background, rounded corners, and border shadow. There is nothing special except that the position attribute is relative.
Now let’s polish up the A letter
.code
.card p {
- text -align: center;
- font: 100px/220px Georgia, Times New Roman, serif;
- }
Let’s take a look at the effect first:
Now it looks like it has the effect of the card, but it always feels like there is still something missing - plum blossoms, Diamonds, hearts, spades. If we want to display these graphics without introducing pictures, things will become more complicated, but we still have tricks to solve the problem. UI front-end framework carefully developed for 5 years!
Considering that we no longer want to add more code to the html part, we introduce pseudo elements before and after to add graphics such as plum squares to the card. Fortunately, most browsers recognize various kinds of special symbols.
.code
.suitdiamonds:before, .suitdiamonds:after {
- content: "?";
- color: #ff0000;
- }
I use both before and after so that I can Get the upper and lower square shapes, and follow the same pattern as other shapes.
.code
.suitdiamonds:before, .suitdiamonds:after {
- content: "?";
- color: #ff0000;
- }
- .suithearts:before, .suithearts:after {
- content: "?";
- color: #ff0000;
- }
- .suitclubs:before, .suitclubs:after {
- content: "? ";
- color: #000;
- }
- .suitspades:before, .suitspades:after {
- content: "?";
- color: #000;
- }
If you are a If you are careful, you will notice that the direction of these diamond clubs seems to be reversed. In fact, it is easy to achieve inversion with CSS, but considering that no one will turn the screen upside down to look at this playing card, this is unnecessary.
我们画好了扑克的符号，还应该修饰大小和合适的定位。方块、梅花、红桃黑桃的字体大小位置摆放以及position属性都是一致的，因此我们最好只写一次。div[class*='suit']选择器就可以同时选择这四个。（原文的评论里面有人建议单独用一个class来定义，因为作者的这个方法效率上讲要低一些） 精心开发5年的UI前端框架！
.代码
- div[class*='suit']:before {
- position: absolute;
- font-size: 35px;
- left: 5px;
- top: 5px;
- }
- div[class*='suit']:after {
- position: absolute;
- font-size: 35px;
- right: 5px;
- bottom: 5px;
- }
下面看看效果
上面我们只是制作了一张图片，现在我想制作一组图片的效果：
.代码
-
A
A
A
A
css 精心开发5年的UI前端框架！
.代码
- .hand {
- margin: 50px;
- }
- /* For modern browsers */
- .hand:before,
- .hand:after {
- content:"";
- display:table;
- }
- .hand:after {
- clear:both;
- }
- /* For IE 6/7 (trigger hasLayout) */
- .hand {
- zoom:1;
- }
- .card:hover {
- cursor: pointer;
- }
接下来我想利用css做出一些有趣的动画效果来：开始的时候只显示一张扑克，当鼠标移上去，扑克会展开，就像你打牌的时候手里握牌的样子。
html
和之前不同的是我增加了spread class属性
.代码
-
A
A
A
A
css
.代码
-
- width: 350px;
- height: 250px;
- position: relative;
- }
- .spread > .card {
- position: absolute;
- top: 0;
- left: 0;
- -webkit-transition: top 0.3s ease, left 0.3s ease;
- -moz-transition: top 0.3s ease, left 0.3s ease;
- -o-transition: top 0.3s ease, left 0.3s ease;
- -ms-transition: top 0.3s ease, left 0.3s ease;
- transition: top 0.3s ease, left 0.3s ease;
- }
鼠标移上去的效果：
.代码
- .spread:hover .suitdiamonds {
- -webkit-transform: rotate(-10deg);
- -moz-transform: rotate(-10deg);
- -o-transform: rotate(-10deg);
- -ms-transform: rotate(-10deg);
- transform: rotate(-10deg);
- }
- .spread:hover .suithearts {
- left: 30px;
- top: 0px;
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- .spread:hover .suitclubs {
- left: 60px;
- top: 5px;
- -webkit-transform: rotate(10deg);
- -moz-transform: rotate(10deg);
- -o-transform: rotate(10deg);
- -ms-transform: rotate(10deg);
- transform: rotate(10deg);
- }
- .spread:hover .suitspades{
- left: 80px;
- top: 10px;
- -webkit-transform: rotate(20deg);
- -moz-transform: rotate(20deg);
- -o-transform: rotate(20deg);
- -ms-transform: rotate(20deg);
- transform: rotate(20deg);
- }
再加上点阴影效果 精心开发5年的UI前端框架！
.代码
- .spread > .card:hover {
- -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,0.4);
- box-shadow: 1px 1px 7px rgba(0,0,0,0.4);
- }
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
