1
<!-- Html5 allows inline link tag -->
2
<link href="https://fonts.googleapis.com/css?family=Lato|Sansita" rel="stylesheet">
3
<div id="magazine-content" style="font-family: Lato, sans-serif;font-size: 24px;font-style: normal;font-weight: normal;background: linear-gradient(to bottom right, cyan, magenta);">
4
5
<!-- Html5 allows inline CSS Style -->
6
<style type="text/css" scoped>
7
div#desc7,
8
div#desc9 {
9
-moz-column-count: 3;
10
-webkit-column-count: 3;
11
column-count: 3;
12
-moz-column-width: auto;
13
-webkit-column-width: auto;
14
column-width: auto;
15
-moz-column-gap: 20px;
16
-webkit-column-gap: 20px;
17
column-gap: 20px;
18
-moz-column-rule: 1px solid #fff;
19
-webkit-column-rule: 1px solid #fff;
20
column-rule: 1px solid #fff;
21
height: auto;
22
}
23
24
/* collective selector. indicates ids or classes the word includes */
25
/* ^:beginning of name *:any in name $:end of name */
26
div[id^="desc"] {
27
/* default is manual. auto, none */
28
/* auto: Differences between browsers exist (2017 Spring) */
29
/* manual is preferred on now (2017 Spring). use &shy; to hyphenation */
30
-webkit-hyphens: auto;
31
-ms-hyphens: auto;
32
hyphens: auto;
33
}
34
</style>
35
36
<!-- layer: more bottom element (bottom code), upper layer; if not position: static -->
37
<div class="magazine-imagebox" style="top: 220px; left: 30px; opacity: 0.4;">
38
<svg id="svg1" width="980" height="1158">
39
<use xlink:href="#whymask-svg" />
40
</svg>
41
</div>
42
43
<div class="magazine-textbox" style="top: 60px;left: 30px;">
44
[codeview_byid theme="magazine" id="desc" start="1" width="980px" font-size="56px" text-align="left" color="orange" font-weight="bold" font-family="Sansita,sans-serif"]1144[/codeview_byid]
45
</div>
46
47
<div class="magazine-textbox" style="top: 250px;left: 30px;">
48
[codeview_byname theme="magazine" id="desc" start="3" width="980px" text-align="center" font-size="46px" color="magenta" font-weight="bold"]goodbye311-text[/codeview_byname]
49
</div>
50
51
<div class="magazine-textbox" style="top: 730px;left: 30px;">
52
[codeview_byname theme="magazine" id="desc" start="5" font-size="38px" width="600px" color="cyan" font-weight="bold"]goodbye311-text[/codeview_byname]
53
</div>
54
55
<div class="magazine-textbox" style="top: 400px;left: 30px;">
56
[codeview_byid theme="magazine" id="desc" start="7" width="980px"]1144[/codeview_byid]
57
</div>
58
59
<div class="magazine-textbox" style="top: 1000px;left: 30px;">
60
[codeview_byid theme="magazine" id="desc" start="9" width="980px"]1144[/codeview_byid]
61
</div>
62
</div>
63
64
<!-- To use #whymask-svg above -->
65
[articleloader_byname]whymask-svg[/articleloader_byname]
66
67
[init_spansearch]
68
69
[spansearch id="desc" start="1" color="cyan"]What[/spansearch]
70
71
[spansearch id="desc" start="7" font-style="italic" font-weight="bold" color="red"]When 3/11[/spansearch]
72
73
[spansearch id="desc" start="9" background-color="red"]Am I Happy?[/spansearch]
74
75
[spansearch_all id="desc" color="red"]MORAL[/spansearch_all]
76
77
<!--nextpage-->
78
<!-- Html5 allows inline link tag -->
79
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
80
<div id="magazine-content" style="font-family: Lato, sans-serif;font-size: 24px;font-style: normal;font-weight: normal;background: linear-gradient(to bottom right, magenta, cyan);">
81
<!-- Html5 allows inline CSS Style -->
82
<style type="text/css" scoped>
83
div#desc11,
84
div#desc13 {
85
-moz-column-count: 3;
86
-webkit-column-count: 3;
87
column-count: 3;
88
-moz-column-width: auto;
89
-webkit-column-width: auto;
90
column-width: auto;
91
-moz-column-gap: 20px;
92
-webkit-column-gap: 20px;
93
column-gap: 20px;
94
-moz-column-rule: 1px solid #fff;
95
-webkit-column-rule: 1px solid #fff;
96
column-rule: 1px solid #fff;
97
height: auto;
98
}
99
100
#desc11 > span::before {
101
content: "";
102
display: block;
103
width: 100px;
104
height: 100px;
105
background-color: transparent;
106
margin 0;
107
padding 0;
108
visibility: hidden;
109
float: left;
110
}
111
112
#desc11 > span::after {
113
content: "";
114
display: block;
115
margin 0;
116
padding 0;
117
width: 0;
118
height: 0;
119
background-color: transparent;
120
visibility: hidden;
121
clear: both;
122
}
123
124
div#light-svg,
125
#beam,
126
#light,
127
#svgcircle {
128
-moz-transform-origin: 50% 50%;
129
-webkit-transform-origin: 50% 50%;
130
-ms-transform-origin: 50% 50%;
131
-o-transform-origin: 50% 50%;
132
transform-origin: 50% 50%;
133
}
134
135
div#circle {
136
width: 100px;
137
height: 100px;
138
background-color: #f44;
139
-webkit-border-radius: 50%;
140
border-radius: 50%;
141
}
142
143
/* collective selector. indicates ids or classes the word includes */
144
/* ^:beginning of name *:any in name $:end of name */
145
div[id^="desc"] {
146
/* default is manual. auto, none */
147
/* auto: Differences between browsers exist (2017 Spring) */
148
/* manual is preferred on now (2017 Spring). use &shy; to hyphenation */
149
-webkit-hyphens: auto;
150
-ms-hyphens: auto;
151
hyphens: auto;
152
}
153
</style>
154
155
<!-- layer: more bottom element (bottom code), upper layer; if not position: static -->
156
<div class="magazine-imagebox" style="top: 0px; left: 0px; opacity: 0.1;">
157
<svg id="svg1" width="490" height="490">
158
<use xlink:href="#bugufo-svg" />
159
</svg>
160
</div>
161
162
<div class="magazine-imagebox" style="top: 220px; left: 40px; opacity: 0.1;">
163
<svg id="svg2" width="720" height="720">
164
<use xlink:href="#bugufo-svg" />
165
</svg>
166
</div>
167
168
<div class="magazine-imagebox" style="bottom: 0px; right: 0px; opacity: 0.4;">
169
<svg id="svg3" width="980" height="980">
170
<use xlink:href="#bugufo-svg" />
171
</svg>
172
</div>
173
174
<div id="light-svg" class="magazine-imagebox" style="top: 30px; left: 20px; opacity: 0.3;">
175
<svg version="1.1" id="svg4" width="1000" height="120" viewBox="0 0 1000 120">
176
<defs>
177
<linearGradient id="gradient1" gradientUnits="objectBoundingBox" x1="0" x2="0" y1="0" y2="1">
178
<stop offset="0" stop-color="white" />
179
<stop offset="0.5" stop-color="blue" />
180
<stop offset="1" stop-color="black" stop-opacity="0.6" />
181
</linearGradient>
182
<filter id="blurfilter" filterUnits="objectBoundingBox" x1="0" x2="0" y1="0" y2="1">
183
<feGaussianBlur stdDeviation="6" />
184
</filter>
185
</defs>
186
<g id="beam">
187
<polygon points="500 60, 0 0, 0 120" fill="url(#gradient1)" />
188
<polygon points="500 60, 1000 0, 1000 120" fill="url(#gradient1)" />
189
</g>
190
<circle id="light" filter="url(#blurfilter)" cx="500" cy="60" r="50" fill="white" opacity="0.9" />
191
</svg>
192
</div>
193
194
<div id="circle1" class="magazine-imagebox" style="top: 160px; left: 20px; opacity: 0.4;">
195
<svg version="1.1" id="svg5" width="110" height="110" viewBox="0 0 110 110">
196
<linearGradient id="gradient2" gradientUnits="objectBoundingBox" x1="0" x2="0" y1="0" y2="1">
197
<stop offset="0" stop-color="black" stop-opacity="0" />
198
<stop offset="0.8" stop-color="blue" stop-opacity="0.3"/>
199
<stop offset="1" stop-color="white" />
200
</linearGradient>
201
<circle id="svgcircle" cx="55" cy="55" r="50" fill="transparent" opacity="0.9" stroke="url(#gradient2)" stroke-width="6" />
202
</svg>
203
</div>
204
205
<div class="magazine-textbox" style="top: 180px;left: 30px;">
206
[codeview_byid theme="magazine" id="desc" start="11" width="980px"]1144[/codeview_byid]
207
</div>
208
209
<div class="magazine-textbox" style="top: 1000px;left: 30px;">
210
[codeview_byid theme="magazine" id="desc" start="13" width="980px"]1144[/codeview_byid]
211
</div>
212
213
<div class="magazine-textbox" style="top: 600px;left: 30px;">
214
[codeview_byid theme="magazine" id="desc" start="15" width="980px" font-size="36px" font-weight="bold"]1144[/codeview_byid]
215
</div>
216
217
</div>
218
219
<!-- To use #bugufo-svg above -->
220
[articleloader_byname]bugufo-svg[/articleloader_byname]
221
222
[init_spansearch]
223
224
[spansearch_all id="desc" color="red"]MORAL[/spansearch_all]
225
226
[spansearch_all id="desc" color="blue"]KOKORO[/spansearch_all]
227
228
<script type="text/javascript">
229
// Capsulation is recommended to hide name-space pollution globally (whole of one page)
230
(function() {
231
var timeoutid;
232
var beam = document.getElementById("beam");
233
var light = document.getElementById("light");
234
var svgcircle = document.getElementById("svgcircle");
235
// radius 50 circle so the circumference is 50*2*3.14
236
svgcircle.style.strokeDasharray = "160 154";
237
var degs = 0;
238
!function() {
239
beam.style.transform = "rotateY(" + degs + "deg)";
240
var cal = degs + 90;
241
light.style.transform = "rotateY(" + cal + "deg)";
242
svgcircle.style.transform = "rotateZ(" + degs + "deg)";
243
//From 360 scale to 314 (same as the circumference) scale
244
var cal2 = degs * 0.872;
245
svgcircle.style.strokeDashoffset = "-" + cal2 + "";
246
degs += 0.4;
247
if ( degs >= 360) {
248
degs -= 360;
249
}
250
// Clear Callback
251
if (timeoutid !== null) {
252
window.clearTimeout(timeoutid);
253
}
254
255
// Repeat This Method
256
timeoutid = window.setTimeout(arguments.callee, 20);
257
}();
258
})();
259
</script>

Code of Layout Sample Magazine Type No.1

751 Views