Sie sind hier : basti1012.de/ Kurze-Scripte-und-Codeschnipsel / index.php

Zurück


Der Quellcode dazu


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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<link  rel="stylesheet"  src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
  @import url(https://fonts.googleapis.com/css?family=Inconsolata|Roboto+Condensed);

html, head, body {
  overflow-x: hidden;
}

html {
  color: #fff;
  background-color: #2b3035;
  counter-reset: metas links scripts;
}

head, body {
  display: block;
  margin: 20px;
  padding: 10px;
  border: 2px dashed rgba(255, 255, 255, .4);
  border-radius: 10px;
  overflow-x: hidden;
}

head::before, body::before,
head::after, body::after {
  display: block;
  color: rgba(255, 255, 255, .4);
  font: 26px/1.2 'Inconsolata', monospace;
}

head::before, body::before {
  margin-left: 10px;
}

head::after, body::after {
  margin-right: 10px;
  text-align: right;
}

head::before { content: '<head>'; }
head::after { content: '</head>'; }
body::before { content: '<body>'; }
body::after { content: '</body>'; }

meta[charset], meta[name][content], link, script {
  display: inline-block;
  margin: 10px;
  color: #fff;
  white-space: nowrap;
  font-size: 0;
}

meta::before, link::before, script::before,
meta::after, link::after, script::after {
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border: 2px solid #fff;
  font: 16px/1.2 'Inconsolata', monospace;
}

meta::before, link::before, script::before {
  border-right: none;
  border-radius: 10px 0 0 10px;
  background-color: #333;
}

meta::after, link::after, script::after {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: none;
  border-radius: 0 10px 10px 0;
  background-color: #666;
}

meta[charset]::before {
  counter-increment: metas;
  content: '<meta> #' counter(metas);
}
meta[charset]::after {
  content: 'charset="' attr(charset) '"';
}

meta[name][content]::before {
  counter-increment: metas;
  content: '<meta> #' counter(metas);
}
meta[name][content]::after {
  content: 'name="' attr(name) '" content="' attr(content) '"';
}

link[rel][href]::before {
  counter-increment: links;
  content: '<link> #' counter(links);
}
link[rel][href]::after {
  content: 'rel="' attr(rel) '" href="' attr(href) '"';
}

script[src]::before {
  counter-increment: scripts;
  content: '<script> #' counter(scripts);
}
script[src]::after {
  content: 'src="' attr(src) '"';
}

p {
  margin: 10px;
  font: 42px/1.2 'Roboto Condensed', sans-serif;
}
  
  
</style>