У меня есть веб-сайт, где я хочу, чтобы текстовые ссылки в навигации были размытыми. Когда посетитель наводит курсор на текстовую ссылку, она снова становится понятной.
Моя идея состоит в том, чтобы сделать какое-то размытое изображение в формате PNG для наложения на текстовую ссылку.
Я пытался это сделать, но мои навыки работы с Photoshop нудистны. Я мог бы сделать один, потому что размытый белый не работает:s
Невозможно создать (полу) прозрачное изображение PNG, которое будет размытым независимо от того, что оно перекрывает. Это просто невозможно сделать. Если вам действительно нужен динамический веб-сайт, чтобы вы могли легко изменить текст, я бы порекомендовал использовать скрипт PHP, как показано ниже, чтобы размыть изображение. Это идет отсюда. Вы можете использовать другой скрипт PHP для генерации текстового изображения.
Результат:
<?php
function blur (&$image) {
$imagex = imagesx($image);
$imagey = imagesy($image);
$dist = 2;
for ($x = 0; $x < $imagex; ++$x) {
for ($y = 0; $y < $imagey; ++$y) {
$newr = 0;
$newg = 0;
$newb = 0;
$colours = array();
$thiscol = imagecolorat($image, $x, $y);
for ($k = $x - $dist; $k <= $x + $dist; ++$k) {
for ($l = $y - $dist; $l <= $y + $dist; ++$l) {
if ($k < 0) { $colours[] = $thiscol; continue; }
if ($k >= $imagex) { $colours[] = $thiscol; continue; }
if ($l < 0) { $colours[] = $thiscol; continue; }
if ($l >= $imagey) { $colours[] = $thiscol; continue; }
$colours[] = imagecolorat($image, $k, $l);
}
}
foreach($colours as $colour) {
$newr += ($colour >> 16) & 0xFF;
$newg += ($colour >> 8) & 0xFF;
$newb += $colour & 0xFF;
}
$numelements = count($colours);
$newr /= $numelements;
$newg /= $numelements;
$newb /= $numelements;
$newcol = imagecolorallocate($image, $newr, $newg, $newb);
imagesetpixel($image, $x, $y, $newcol);
}
}
}
echo "Image before blurring: <img src=\"blurimg.jpg\" /><br /><br />";
$im = imagecreatefromjpeg("blurimg.jpg");
blur($im);
imagejpeg($im, "blurimg2.jpg");
echo "Image blurred: <img src=\"blurimg2.jpg\" /><br />";
imagedestroy($im);
?>
Вы должны быть в состоянии сделать заливку сплошным белым и установить прозрачность слоя менее 100%.
Я хотел бы создать текстовую кнопку, а затем использовать фильтр или эффект в Infranview (Freeware, AFIAK, только для Windows), чтобы сохранить копию с наложенным эффектом, чтобы у вас были image1.png и image1blurred.png (как пример). Затем вы создадите эффект переворачивания, чтобы всплывающее окно отображалось все время, пока вы не перевернете его.
Кроме того,> почему <вы хотите это сделать?