[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Текстовый дизайн
FatCat
Как-то видел от студии Лебедева, да потерял линк не могу найти...

А вообще у кого есть наработки по элементам дизайна без использования графики? Это тот текст,
который будет
на градиентной
подложке


Для затравки предлагаю градиентную заливку блока на джаваскрипт.
Писал давным-давно, сейчас наверное смог бы написать лучше, но сама идея, надеюсь будет понятна.

Сам джаваскрипт:
HTML
<script type="text/javascript">
he='F|E|D|C|B|A|9|8|7|6|5|4|3|2|1|0'.split('|')
function openfon(valy, valx, vr, vg, vb){
beginfon='<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">'
for(y=1;y<valy;y++){
beginfon+='<tr>'
for(x=0;x<valx;x++){
i=x+y
r1=(i*vr)/16+""
r1=r1.split('.')[0]*1
r1=he[r1]+""
r2=(i*vr)%16
r2=he[r2]+""
g1=(i*vg)/16+""
g1=g1.split('.')[0]*1
g1=he[g1]+""
g2=(i*vg)%16
g2=he[g2]+""
b1=(i*vb)/16+""
b1=b1.split('.')[0]*1
b1=he[b1]+""
b2=(i*vb)%16
b2=he[b2]+""
beginfon+='<td bgcolor="#'+r1+r2+g1+g2+b1+b2+'">&nbsp;&nbsp;&nbsp;</td>'
}
beginfon+='</tr>'
}
beginfon+='</table>'
beginfon='<table width="1%" align="right"><tr><td width="50%">'+beginfon+'</td><td width="50%"><table width="90%"><tr><td>'
document.write(beginfon)
}
function closefon(){
document.write('</td></tr></table></td></tr></table>')
}
</script>


Код вставки текста на градиентную подложку:
HTML
<script type="text/javascript">
openfon(7, 10, 1, 2, 3)
</script>
<span style="position:relative;top:0px;
font-family:Arial,Helvetica,sans-serif;
left:-109px;font-size:12px;">
Это тот текст, который будет на градиентной подложке
</span>
<script type="text/javascript">
closefon()
</script>




Спустя 29 минут, 41 секунда (22.06.2009 - 18:31) stepan написал(а):
Да таким я не пользовался но помню от нечего делать написал ручками из текста weber аббривеатуру cms.
Кстати хорошая идея с помощью js писать такие креативные вещи.

Спустя 40 минут, 55 секунд (22.06.2009 - 19:12) Sylex написал(а):
FatCat
прикольно!

щас вообще на jquery такие фишки можно мутить, примеров множества smile.gif


_____________
Бесплатному сыру в дырки не заглядывают...
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.