De PHPhulp kroeg
zichtbaar bij afdruk
Ik laat de gebruiker een paar instellingen zelf invullen voor de kopjes.
* De achter- en voorgrondkleur
* Of de tekst moet knipperen of niet
* in geval knipperen de frequentie
Het knipperen gebeurd via javascript door visibility op hidden of op visible te plaatsen. Als ik echter een afdruk wil maken MOET deze altijd zichtbaar zijn.
Gezien het gekozen gegevens zijn doe ik dit met in-line css.
php
Code (php)
1
2
2
style="background-color:'.$backcolor.'; color:'.$forecolor.';
@media print {visibility: visible;}"
@media print {visibility: visible;}"
html
Code (php)
1
2
3
2
3
<div id="datum26" class="datum" style="background-color:red; color:Yellow;
@media print {visibility: visible;}" title="">27/10/2015<br>Ladder</div>
</div>
@media print {visibility: visible;}" title="">27/10/2015<br>Ladder</div>
</div>
Echter bij mijn afdruk is het niet altijd zichtbaar, maar de status op het moment welke ik het printcommando geef.
Wat is er fout?
Jan
Gewijzigd op 06/10/2015 09:07:48 door Jan R
Misschien dat het script dit overruled anders?
Je kunt echter wel puur CSS gebruiken voor een knipperlichteffect:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.knipperlicht {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
Die 1s is de frequentie.
Een en ander kun je vervolgens ook nog verpakken in een @media-regel:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
@media screen {
.knipperlicht {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
}
.knipperlicht {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
}
Ik ga dieper zoeken op deze animatie. Heb het wel al werkende op een testje
Toevoeging op 06/10/2015 11:36:02:
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<title>test animation</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
.knipperlicht {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
.kleur {
animation: clr 4s linear infinite;
}
@keyframes clr {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
.lengte {
background-color: red;
animation: len 4s linear infinite;
}
@keyframes len {
0% {width:0%}
25% {width:50%}
50% {width:100%}
75% {width:50%}
100% {width:0%}
}
</style>
</head>
<body>
<h1>CSS Animations</h1>
<h2 class="knipperlicht">
Knipperen 1Hz
</h2>
<h2 class="kleur">
4 kleuren .25Hz
</h2>
<h2 class="lengte">
Lengte .25Hz
</h2>
</body>
</html>
<html>
<head>
<title>test animation</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
.knipperlicht {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
.kleur {
animation: clr 4s linear infinite;
}
@keyframes clr {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
.lengte {
background-color: red;
animation: len 4s linear infinite;
}
@keyframes len {
0% {width:0%}
25% {width:50%}
50% {width:100%}
75% {width:50%}
100% {width:0%}
}
</style>
</head>
<body>
<h1>CSS Animations</h1>
<h2 class="knipperlicht">
Knipperen 1Hz
</h2>
<h2 class="kleur">
4 kleuren .25Hz
</h2>
<h2 class="lengte">
Lengte .25Hz
</h2>
</body>
</html>
Heb je eventueel leuke animaties behalve deze snelle testjes
Gewijzigd op 06/10/2015 11:36:32 door Jan R