coolCSS/04-generated-content.html at master · Sayak7D1/coolCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"/>
		<title>Awesome CSS3 Features You Can Finally Use</title>

		<link href="assets/css/style.css" rel="stylesheet" />

		<style>
			.container{

				/* Set a counter named cnt to 0 */
				counter-reset: cnt;

				position:relative;
				text-align:center;
				padding:20px 0;
				width:420px;
				height: 160px;
				margin: 0 auto;
			}

			/* You can style pseudo elements and give them content,
			   as if they were real elements on the page */

			.container:before{
				display: block;
				content:'Hover over these items:';
				font-size:18px;
				font-weight:bold;
				text-align:center;
				padding:15px;
			}

			.container span{
				display:inline-block;
				padding:2px 6px;
				background-color:#78CCD2;
				color:#186C72;
				border-radius:4px;
				margin:3px;
				cursor:default;
			}

			/* Create a counter with a pseudo element */

			.container span:after{

				/* Every time this rule is executed, the
				   counter value is increased by 1 */
				counter-increment: cnt;

				/* Add the counter value as part of the content */
				content:" #" counter(cnt);

				display:inline-block;
				padding:4px;
			}

			/* Pseudo elements can even access attributes of their parent element */

			.container span:before{
				position:absolute;
				bottom:0;
				left:0;
				width:100%;
				content:attr(data-title);
				color:#666;

				opacity:0;

				/* Animate the transitions */
				-webkit-transition:opacity 0.4s;
				transition:opacity 0.4s;
			}

			.container span:hover:before{
				opacity:1;
			}

		</style>

	</head>

	<body>

		<h1>Generated Content</h1>

		<div class="container">
			<span data-title="I have a wonderful title!">This is item</span>
			<span data-title="These titles are shown only using CSS, no JavaScript is used!">This is item</span>
			<span data-title="Hello there!">This is item</span>
			<span data-title="Generated content is awesome!">This is item</span>
		</div>


		<footer>
            <a href="http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/">Awesome CSS3 Features You Can Finally Use</a>
        </footer>

	</body>
</html>