CSS - Efecto Espejo para Firefox

 
Vista:
Imágen de perfil de Adolfo

Efecto Espejo para Firefox

Publicado por Adolfo (18 intervenciones) el 18/10/2022 18:53:20
Hola amigos, había escrito un mensaje anteriormente presentándome pero cuando llevaba un rato narrativo, la web se puso a "pensar" y ya no me dejó seguir, así que......adiós a la parrafada!.

Iré al grano en esta ocasión, me gustaría conseguir que las miniaturas de mi fotogalería tuvieran efecto espejo. Ahora mismo lo hago con PhotoShop (mediante una acción lo hago en un segundo), con éste resultado (es un jpg, cuyo fondo tiene el mismo color que mi anterior background):

thumb__04_0956

Ya me supongo que esto se consigue prácticamente igual usando efecto box-reflect pero resulta que no funciona en Firefox y, casualmente, es mi explorador favorito (y también el de muchos usuarios). Ignoro por qué, tras tanto tiempo, Firefox es el único navegador que aún no lo incorpora. He cambiado de diseño web con otro background. Ahora, mis miniaturas "prefabricadas" en mi pc y subidas al hosting reemplazando las que genera la fotogalería, ya no quedan bien y no puedo volver a sustituirlas todas rediseñando el jpg (pueden ser 1.000), pero sí puede la fotogalería autogenerarlas y, de ahí, poder aplicar un estilo para conseguir el efecto espejo a todas que sea independiente del templete que esté usando en la galería.

He visto este resultado que no usa box-reflect pero no me convence (además me parece complicado de integrar en mi sitio);

https://webdesign.tutsplus.com/es/tutorials/cross-browser-css-reflections-glows-and-blurs--webdesign-6294

He de decir que mi fotogalería esta creada con CPG (Coppmernie Photo Gallery) con un tema o plantilla externo. Lo ideal sería trabajar con algo sobre el estilo de las miniaturas que no conlleve tocar el php interno, que es lo que genera toda la página.

Alguna idea de una alternativa a box-reflect?. No tengo mucha idea de programación, pero puedo tocar "cosas" ya creadas de mi página.

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Adolfo

Efecto Espejo para Firefox

Publicado por Adolfo (18 intervenciones) el 19/10/2022 07:21:36
Qué cosas!, al volver hoy a encender el ordenador me encontré todavía el mensaje sin enviar con la que me presentaba así que.....ya que escribí el Quijote......pues qué menos que conste en acta :)

-----------------------------------
Hola amigos, me llamo Adolfo y éste es mi primer mensaje. Vaya por delante decir que tengo casi ninguna (o ninguna directamente) noción de programación, pero en mi defensa diré que me va gustando este mundillo. Por tanto, entenderé que me mandéis al destierro más absoluto por creerme con nociones suficientes para entrar aquí sin haber hecho un curso de html en mi vida

Pero si me admitís, tengo una en la que me vendría bien una ayuda. Tengo una web prediseñada, una fotogalería de Coppermine, desde hace muchos años. No tengo idea de códigos como para hacer algo tan complicado, pero sí sé qué pequeñas cosas puedo tocar tanto en el html como en css para darle otro aspecto a mi página (de php mejor ni hablemos).

El caso es que, hasta hoy, las minituras de mi web eran tal que así:

thumb__01_5173

La fotogalería genera una miniatura de manera automática, pero era muy sosa así que yo la cambiaba en mi Hosting con un efecto reflejo y queda bastante bien. Ahora he cambiado de templete (o theme) y el aspecto no es oscuro, es claro, y ese efecto de espejo que yo hacía con PhotoShop ya no queda bien porque el fondo es blanco, y no oscuro (la minitura es un jpg, cuyo fondo se corresponde con el rgb de mi diseño anterior). He valorador diferentes opciones para corregir ésto:

A) Cambiar todos los jps de las miniaturas de mi hosting por otras con un diseño de fondo blanco. Lo descarto porque son unas 1.000 imágenes, un trabajo excesivo.

B) Cambiar el fondo de mi diseño web actual con el fondo RGB que tenía antes, pero también lo descarto porque esta plantilla tiene un diseño concreto, cambiar esto sería poco coherente estéticamente hablando.

C) Modificar el estilo de la miniatura para que genere un reflejo, con la ventaja de que la fotogalería tiene la opción de autoregerenar las miniaturas por lo que esta solución podría quedar bien, pero he aquí mis dudas:

Para hacer esto, no veo ninguna opción mejor que usar en CSS el atributo de box-reflect. Ya lo he probado y funciona, pero resulta que, todavía en estos años, no está disponible en Firefox (algo asombroso, he revisado ya este problema a primeros de los años 2010). Casualmente es

-----------------------------------

Ea!, ya me he despachado ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ivan

Efecto Espejo para Firefox

Publicado por Ivan (45 intervenciones) el 20/10/2022 13:40:00
Hola,

como bien dices box-reflect no está soportado por firefox y no debería usarse.

Lo más parecido que he encontrado con CSS es esto:

1
2
3
4
5
6
7
<style>
.espejo {
opacity: 0.6;
transform: scaleY(-1) scaleY(50%) translate(0, 50%);
background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
</style>

Y debes añadir las dos imágenes como si fueran un espejo

1
2
<img src="img_tree.png"><br>
<img class="espejo" src="img_tree.png">

No se si es exactamente lo que buscas, pero puedes jugar con los valores css y conseguir un "apaño".

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Adolfo

Efecto Espejo para Firefox

Publicado por Adolfo (18 intervenciones) el 20/10/2022 20:20:16
Ante todo, muchas gracias por contestar Iván ;)

Lo cierto es que había pensado en algo así, generando una segunda imagen, invirtiéndola con css y crear de manera más artesanal lo que hace box-reflect de manera sencilla.

Pero pensé que no era posible ya que tengo unas 1.000 imágenes, con sus correspondientes miniaturas que, a su vez, son las usadas como portada de los albúmes. Además de imágenes al azar, carrusel, etc. No podía generar una segunda imagen sin tocar en el php y rezar por no estropear nada confiando que salieran cada miniatura con su reflejo, incluso las que salen al azar:

Captura
Captura2

Supongo que en alguna parte del código php puedo duplicar imagen, pero tengo serias dudas que que coincidan la imagen con su reflejo (me refiero a que me temo que lo que hará sería poner una imagen y el reflejo de cualquier otra).

Investigaré a ver qué puedo sacar.

El código del php que genera las thumnails es éste:

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<?php
/**
 * Coppermine Photo Gallery
 *
 * v1.0 originally written by Gregory Demar
 *
 * @copyright  Copyright (c) 2003-2020 Coppermine Dev Team
 * @license    GNU General Public License version 3 or later; see LICENSE
 *
 * thumbnails.php
 * @since  1.6.08
 */
 
/**
 *
 * @ignore
 */
define('IN_COPPERMINE', true);
define('THUMBNAILS_PHP', true);
define('SMILIES_PHP', true);
 
/**
 *
 * @ignore
 */
define('INDEX_PHP', true);
 
require_once 'include/init.inc.php';
 
if (!USER_ID && ($CONFIG['allow_unlogged_access'] == 0)) {
    $redirect = 'login.php';
    header("Location: $redirect");
    exit();
}
 
if (USER_ID && (USER_ACCESS_LEVEL == 0)) {
    cpg_die(ERROR, $lang_errors['access_none'], __FILE__, __LINE__);
}
 
if ($CONFIG['enable_smilies']) {
    include 'include/smilies.inc.php';
}
 
/**
 * Main code
 */
if ($superCage->get->keyExists('sort')) {
    $USER['sort'] = $superCage->get->getAlpha('sort');
}
 
if ($superCage->get->testInt('cat')) {
    $cat = $superCage->get->getInt('cat');
}
 
if ($superCage->get->keyExists('uid')) {
    $USER['uid'] = $superCage->get->getInt('uid');
}
 
if ($superCage->get->keyExists('album')) {
    if ($superCage->get->testAlpha('album')) {
        $album = $superCage->get->getAlpha('album');
    } else {
        $album = $superCage->get->getInt('album');
    }
}
 
if ($superCage->get->keyExists('search')) {
 
    // find out if a parameter has been submitted at all
    $allowed = array('title', 'caption', 'keywords', 'filename', 'pic_raw_ip', 'pic_hdr_ip', 'user1', 'user2', 'user3', 'user4', 'type', 'owner_name', 'newer_than', 'older_than');
 
    foreach ($allowed as $key) {
        if ($superCage->get->keyExists($key)) {
            $USER['search']['params'][$key] = $superCage->get->getEscaped($key);
        } else {
            unset($USER['search']['params'][$key]);
        }
    }
 
    //here again the use of getRaw, but it will be sanitized in search.inc.php
    $USER['search']['search'] = utf_replace($superCage->get->getRaw('search'));
    $USER['search']['search'] = str_replace('&quot;', '\'', $USER['search']['search']);
    $album = 'search';
}
$page = $superCage->get->testInt('page') ? max($superCage->get->getInt('page'), 1) : 1;
$breadcrumb = '';
$breadcrumb_text = '';
$cat_data = array();
$lang_meta_album_names['lastupby'] = $lang_meta_album_names['lastup'];
$lang_meta_album_names['lastcomby'] = $lang_meta_album_names['lastcom'];
if (isset($album) && is_numeric($album)) {
    $result = cpg_db_query("SELECT category, title, aid, keyword, description, alb_password_hint FROM {$CONFIG['TABLE_ALBUMS']} WHERE aid = $album");
    if ($result->numRows() > 0) {
        $CURRENT_ALBUM_DATA = $result->fetchAssoc();
        $actual_cat = $CURRENT_ALBUM_DATA['category'];
        $CURRENT_ALBUM_KEYWORD = $CURRENT_ALBUM_DATA['keyword'];
        breadcrumb($actual_cat, $breadcrumb, $breadcrumb_text);
        $cat = - $album;
    }
    $result->free();
    if ($CONFIG['custom_sortorder_thumbs']) {
        //show sort options only when not a meta album
        $js_sort_vars = array(
            'aid'           => $album,
            'page'          => $page,
            'sort_name'     => $lang_thumb_view['name'],
            'sort_title'    => $lang_common['title'],
            'sort_date'     => $lang_thumb_view['date'],
            'sort_position' => $lang_thumb_view['position'],
            'sort_ta'       => $lang_thumb_view['sort_ta'],
            'sort_td'       => $lang_thumb_view['sort_td'],
            'sort_na'       => $lang_thumb_view['sort_na'],
            'sort_nd'       => $lang_thumb_view['sort_nd'],
            'sort_da'       => $lang_thumb_view['sort_da'],
            'sort_dd'       => $lang_thumb_view['sort_dd'],
            'sort_pa'       => $lang_thumb_view['sort_pa'],
            'sort_pd'       => $lang_thumb_view['sort_pd']
        );
        set_js_var('sort_vars', $js_sort_vars);
        js_include('js/thumbnails.js');
    }
    // Meta albums, we need to restrict the albums to the current category
    // except lastupby and lastcomby as CPG currently restricts these to the user's albums
} elseif (isset($cat) && $album != 'lastupby' && $album != 'lastcomby') {
 
    if ($cat < 0) {
        $result = cpg_db_query("SELECT category, title, aid, keyword, description, alb_password_hint FROM {$CONFIG['TABLE_ALBUMS']} WHERE aid = " . (- $cat));
        if ($result->numRows() > 0) {
            $CURRENT_ALBUM_DATA = $result->fetchAssoc();
            $actual_cat = $CURRENT_ALBUM_DATA['category'];
            $CURRENT_ALBUM_KEYWORD = $CURRENT_ALBUM_DATA['keyword'];
        }
        $result->free();
        get_meta_album_set($cat);
 
        breadcrumb($actual_cat, $breadcrumb, $breadcrumb_text);
        $CURRENT_CAT_NAME = $CURRENT_ALBUM_DATA['title'];
        $CURRENT_ALBUM_KEYWORD = $CURRENT_ALBUM_DATA['keyword'];
 
    } elseif ($cat == 0) {
        get_meta_album_set(0);
    } else {
 
        if ($cat >= FIRST_USER_CAT) {
            $user_name = get_username($cat - FIRST_USER_CAT);
            $CURRENT_CAT_NAME = sprintf($lang_list_categories['xx_s_gallery'], $user_name);
        } else {
            $result = cpg_db_query("SELECT name FROM {$CONFIG['TABLE_CATEGORIES']} WHERE cid = $cat");
            if ($result->numRows() == 0) {
                cpg_die(CRITICAL_ERROR, $lang_errors['non_exist_cat'], __FILE__, __LINE__);
            }
            $row = $result->fetchAssoc(true);
            $CURRENT_CAT_NAME = $row['name'];
        }
 
        get_meta_album_set($cat);
 
        breadcrumb($cat, $breadcrumb, $breadcrumb_text);
    }
} else {
    get_meta_album_set(0);
}
 
if (isset($CURRENT_ALBUM_DATA)) {
    $section = $CURRENT_ALBUM_DATA['title'];
} elseif (isset($album) && array_key_exists($album, $lang_meta_album_names)) {
    $section = $lang_meta_album_names[$album];
    if ($album == 'search' && isset($USER['search']['search'])) {
        $section .= ' - "' . strip_tags($USER['search']['search']) . '"';
    }
} else {
    $section = '';
}
 
$meta_keywords = '';
 
// keep the search engine spiders from indexing meta albums that are subject to constant changes
$meta_albums_array = array(
    'lastup',
    'lastcom',
    'topn',
    'toprated',
    'favpics',
    'random',
    'datebrowse'
);
 
if (in_array($superCage->get->getAlpha('album'), $meta_albums_array)) {
    $meta_keywords .= '<meta name="robots" content="noindex, nofollow" />';
}
 
pageheader($section, $meta_keywords);
 
if ($breadcrumb) {
    if (strpos($CONFIG['main_page_layout'], 'breadcrumb') !== false) {
        theme_display_breadcrumb($breadcrumb, $cat_data);
    }
    theme_display_cat_list($breadcrumb, $cat_data, '');
}
 
/**
 * Function to draw the password box if the album is password protected
 */
function form_albpw()
{
    global $lang_thumb_view, $CURRENT_ALBUM_DATA;
 
    $superCage = Inspekt::makeSuperCage();
 
    starttable('-1', $lang_thumb_view['enter_alb_pass'], 2);
 
    if ($superCage->post->keyExists('validate_album')) {
        $login_failed = "<tr><td class='tableh2' colspan='2' align='center'>
                               <span style='color:red'>{$lang_thumb_view['invalid_pass']}</span></td></tr>
                                         ";
    }
    if (!empty($CURRENT_ALBUM_DATA['alb_password_hint'])) {
        echo <<<EOT
                  <tr>
                    <td colspan="2" align="center" class="tableb">{$CURRENT_ALBUM_DATA['alb_password_hint']}</td>
                  </tr>
EOT;
    }
    echo <<<EOT
                        $login_failed
                        <tr>
              <form name="cpgform" id="cpgform" method="post" action="">
              <input type="hidden" name="validate_album" value="validate_album"/>
              <td class="tableb" width="40%">{$lang_thumb_view['pass']}: </td>
              <td class="tableb" width="60%"><input type="password" class="textinput" name="password" /></td>
             </tr>
             <tr>
              <td class="tablef" colspan="2" align="center"><input type="submit" class="button" name="submit" value={$lang_thumb_view['submit']} />
              </form>
            </tr>
EOT;
    endtable();
}
 
$valid = false; //flag to test whether the album is validated.
if ($CONFIG['allow_private_albums'] == 0 || !in_array($album, $FORBIDDEN_SET_DATA)) {
    $valid = true;
} elseif ($superCage->post->keyExists('validate_album')) {
    $password = md5($superCage->post->getEscaped('password'));
    $sql = "SELECT aid FROM {$CONFIG['TABLE_ALBUMS']} WHERE alb_password = '$password' AND aid = $album";
    $result = cpg_db_query($sql);
    if ($result->numRows()) {
        $albpw = $superCage->cookie->getEscaped($CONFIG['cookie_name'] . '_albpw');
        if (!empty($albpw)) {
            $albpw = unserialize($albpw);
        }
        $albpw[$album] = $password;
        $alb_cookie_str = serialize($albpw);
 
        setcookie($CONFIG['cookie_name'] . "_albpw", $alb_cookie_str);
        get_private_album_set($album);
        $valid = true;
    } else {
        // Invalid password
        $valid = false;
    }
} else {
    $sql = "SELECT aid FROM {$CONFIG['TABLE_ALBUMS']} WHERE aid = $album AND alb_password != ''";
    $result = cpg_db_query($sql);
    if ($result->numRows()) {
        // This album has a password.
        // Check whether the cookie is set for the current albums password
        $albpw = $superCage->cookie->getEscaped($CONFIG['cookie_name'] . '_albpw');
        if (!empty($albpw)) {
            $alb_pw = unserialize($albpw);
            // Check whether the alubm id in the cookie is same as that of the album id send by get
            if (isset($alb_pw[$album])) {
                $sql = "SELECT aid FROM {$CONFIG['TABLE_ALBUMS']} WHERE alb_password = '{$alb_pw[$album]}' AND aid = $album";
                $result = cpg_db_query($sql);
                if ($result->numRows()) {
                    $valid = true; //The album password is correct. Show the album details.
                    get_private_album_set();
                }
            }
        }
    } else {
        // Album with no password. Might be a private or normal album. Just set valid as true.
        $valid = true;
    }
}
 
CPGPluginAPI::action('post_breadcrumb', null);
 
if (!$valid) {
    form_albpw();
} else {
    display_thumbnails($album, (isset($cat) ? $cat : 0), $page, $CONFIG['thumbcols'], $CONFIG['thumbrows'], true);
}
 
pagefooter();
//EOF

Y el estilo para estas miniaturas:

1
2
3
4
5
6
7
8
9
10
11
12
.thumbnail {
  max-width: 12vw !important;
  height: auto;
}
.image {
  margin: 3px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  box-shadow: 0 0 4px rgba(0,0,0,.2);
  border-radius: 15px;

Lo dicho, a investigar me toca, gracias por el consejo ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ivan

Efecto Espejo para Firefox

Publicado por Ivan (45 intervenciones) el 20/10/2022 21:23:16
Hola,

Supongo que en alguna parte del código php puedo duplicar imagen, pero tengo serias dudas que que coincidan la imagen con su reflejo (me refiero a que me temo que lo que hará sería poner una imagen y el reflejo de cualquier otra).

Exacto! En alguna parte del código PHP se escribe el código HTML para mostrar la imagen <img src="imagen.jpg"> y creo que lo hace la función de la línea 301

1
display_thumbnails($album, (isset($cat) ? $cat : 0), $page, $CONFIG['thumbcols'], $CONFIG['thumbrows'], true);

Debes buscar allí y no es difícil duplicar la misma imagen, el inconveniente es que se te descuadre el espacio al añadir la imagen espejo.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Adolfo

Efecto Espejo para Firefox

Publicado por Adolfo (18 intervenciones) el 30/10/2022 11:39:01
Buenas, he tratado de usar ese camino pero es demasiado complejo para mí (desconozco las tripas del funcionamiento de CPG, ni siquiera sé si realmente el archivo php que toca ésto es el que indicaba). Por el momento desisto y lo dejo aparcado, quizás valore usar función box-reflect de CSS aunque no la pueda visualizar en Firefox (para los que usamos Firefox, tampoco es un gran problema ver la miniatura sencilla, casi es peor mantenerla como ahora, con un fondo oscuro cuando el background de la página es blanco y no me planteo cambiarlo).

Muchas gracias por el consejo en cualquier caso @Ivan ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar