Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
логин:
пароль:

Регистрация Забыл пароль
Скрипты для uCoz Шаблоны для uCoz
Для того что бы оставлять сообщения на форуме вам необходимо зарегистрироваться или войти под своим профилем.

Способ реализовать 3D текст без картинок в браузере - Форум


  • Страница 1 из 1
  • 1
Модератор форума: Fro0st, lewonchik  
Форум » Веб мастеру » Интересные решения в uCoz » Способ реализовать 3D текст без картинок в браузере
Способ реализовать 3D текст без картинок в браузере
FrоstДата написания: Понедельник, 06.06.2011, 21:12:21 | Сообщение № 1

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Еду я в автобусе домой и тут у меня возникла идея как реализовать 3D текст при помощи только лишь html и css. Сам объем текста осуществляется c помощью многократных text-shadow. Свойства в основном из CSS 3 (transform, box-shadow, rgba, border-radius...), так что работает только в последних популярных браузерах (opera, firefox, chrome...).
[cut=Сорец]
Code
<style type="text/css">
body{background:#000;padding:0;margin:0;font-family:Arial;color:#FFF}
#text{
position:absolute;
font-size:150px;
z-index:3;
top:100px;
left:150;
color:#777;
font-family:"Arial Black",Gadget,sans-serif;
text-shadow:
1px 0 1px #111,    
0 -1px 1px #555,    
2px -1px 1px #111,    
1px -2px 1px #555,    
3px -2px 1px #111,    
2px -3px 1px #555,    
4px -3px 1px #111,
3px -4px 1px #555,    
5px -4px 1px #111,    
4px -5px 1px #555,    
6px -5px 1px #111,    
5px -6px 1px #555,
7px -6px 1px #111,    
6px -7px 1px #555,
8px -7px 1px #111,    
7px -8px 1px #555,
9px -8px 1px #111,
8px -9px 1px #555,
10px -9px 1px #111,
9px -10px 1px #555,
11px -10px 1px #111,
10px -11px 1px #555,
12px -11px 1px #111,    
11px -12px 1px #555,
13px -12px 1px #111,    
12px -13px 1px #555,
14px -13px 1px #111,
13px -14px 1px #555,
15px -14px 1px #111;
}
#shadow{
position:absolute;
left:70px;
top:90px;
color:rgba(0,0,0,.0);
z-index:2;
text-shadow:0 0 10px #000;
/* background: -moz-linear-gradient(left, #000, rgba(0,0,0,.1)); */
transform: skewx(-45deg) translatex(150px);
-moz-transform: skewx(-45deg) translatex(150px);
-ms-transform: skewx(-45deg) translatex(150px);
-o-transform: skewx(-45deg) translatex(150px);
-webkit-transform: skewx(-45deg) translatex(150px);
-o-transform: skewx(-45deg) translatex(150px);
font-size:150px;
font-family:"Arial Black",Gadget,sans-serif;
}
#relative{
position:relative;
width:500px;
overflow:hidden
}
#light{
opacity:.3;
position:absolute;
top:230px;
left:110px;
transform: skewx(-45deg) translatex(150px);
-moz-transform: skewx(-45deg) translatex(150px);
-ms-transform: skewx(-45deg) translatex(150px);
-o-transform: skewx(-45deg) translatex(150px);
-webkit-transform: skewx(-45deg) translatex(150px);
-o-transform: skewx(-45deg) translatex(150px);
width:370px;
height:1px;
box-shadow: 0 0 150px 100px #FFF;
-moz-box-shadow: 0 0 150px 100px #FFF;
-webkit-box-shadow: 0 0 150px 100px #FFF;
}

#f,#t{color:#888}
#r,#s{color:#999}
#o{color:#AAA}

#css3D{
border:1px solid #333;
height:500px;
width:900px;
position:relative;
top:0px;
left:0px;
cursor:default;
}
.text{
z-index:1!important;
top:219px!important;
opacity:.03;
transform: matrix(1, 0 , 0, -1, 0, 0);
-moz-transform: matrix(1, 0 , 0, -1, 0, 0);
-webkit-transform: matrix(1, 0 , 0, -1, 0, 0);
-o-transform: matrix(1, 0 , 0, -1, 0, 0);
text-shadow:
1px 0 0 #111,    
0 -1px 0 #000,    
2px 1px 0 #111,    
1px 2px 0 #000,    
3px 2px 0 #111,    
2px 3px 0 #000,    
4px 3px 0 #111,
3px 4px 0 #000,    
5px 4px 0 #111,    
4px 5px 0 #000,    
6px 5px 0 #111,    
5px 6px 0 #000,    
7px 6px 0 #111,    
6px 7px 0 #000,    
8px 7px 0 #111,    
7px 8px 0 #000,    
9px 8px 0 #111,
8px 9px 0 #000,    
10px 9px 0 #111,
9px 10px 0 #000,    
11px 10px 0 #111,
10px 11px 0 #000,    
12px 11px 0 #111,    
11px 12px 0 #000,    
13px 12px 0 #111,    
12px 13px 0 #000,    
14px 13px 0 #111,
13px 14px 0 #000,    
15px 14px 0 #111!important;
}
</style>
<div id="css3D">
<div id="text"><b id="f">F</b><b id="r">R</b><b id="o">O</b><b id="s">S</b><b id="t">T</b></div>
<div id="text" class="text"><b id="f">F</b><b id="r">R</b><b id="o">O</b><b id="s">S</b><b id="t">T</b></div>
<span id="shadow">FROST</span>
<div id="light"></div>
</div>
<h1>No pictures!</h1>
[/cut]
Вот пример того, что у меня получилось.

З. Ы.
Вот как это выглядит у меня:
Прикрепления: 0843785.png(41Kb)

Если то, что у Вас отображается в браузере отличается от того, что изображено на скриншоте, отпишитесь в теме.




Сообщение отредактировал Frоst - Среда, 08.06.2011, 18:18:09
 
mixoДата написания: Понедельник, 06.06.2011, 21:14:38 | Сообщение № 2

Gm.Fuck...
Сообщений: 1176
Награды: 28
Репутация: 367
Вот это красиво. sideways Вроде бы и страницу не сильно загружает и интересно смотрится. wink

[text]Сайт о Lineage 2 и серверо-строении.[/text]
 
GoolfenДата написания: Вторник, 07.06.2011, 08:36:19 | Сообщение № 3

Постоянный
Сообщений: 471
Награды: 2
Репутация: 47
Прикольно сделал Frоst да и индексировать такой текст будут поисковики наверное, круто!

[text][/text]
[text][/text]
 
kshlkvVIPДата написания: Вторник, 07.06.2011, 22:52:24 | Сообщение № 4


Создание игр и программ
Сообщений: 836
Награды: 4
Репутация: 325
Frоst, класс! Только немного криво. Выдели задний шрифт тень и увидишь) А за старания лови +

[text]MicroBar's[/text][text]





[/text]
[text]UserBar's[/text][text]
 
FrоstДата написания: Вторник, 07.06.2011, 23:35:07 | Сообщение № 5

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Я так и не понял где криво. У меня всё нормально во всех трёх браузерах.

 
GegamusДата написания: Среда, 08.06.2011, 09:06:23 | Сообщение № 6

Веб-дизайнер
Сообщений: 441
Награды: 301
Репутация: 348
Frоst, он наверно имеет ввиду это:



----

Действительно интересно придумал, будет грузится быстрее =)


Разработка макетов для ваших проектов по хорошей цене ICQ 714565
 
kshlkvVIPДата написания: Среда, 08.06.2011, 09:54:36 | Сообщение № 7


Создание игр и программ
Сообщений: 836
Награды: 4
Репутация: 325
[cut][/cut]
Прикрепления: 5067289.png (66.8 Kb)


[text]MicroBar's[/text][text]





[/text]
[text]UserBar's[/text][text]
 
GoolfenДата написания: Среда, 08.06.2011, 10:06:57 | Сообщение № 8

Постоянный
Сообщений: 471
Награды: 2
Репутация: 47
Ага и в правду криво, надо тень не несколько пикселей в право сместить.

[text][/text]
[text][/text]
 
FrоstДата написания: Среда, 08.06.2011, 12:30:24 | Сообщение № 9

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Нет, это какой то баг. Я ставил на Arial Black шрифт. Странно, kshlkv, какой браузер?
Вот, что должно у Вас отображаться:
Прикрепления: 0843785.png (40.8 Kb)




Сообщение отредактировал Frоst - Среда, 08.06.2011, 12:31:04
 
GoolfenДата написания: Среда, 08.06.2011, 16:11:01 | Сообщение № 10

Постоянный
Сообщений: 471
Награды: 2
Репутация: 47
Через лису все норм и через оперу все норм!

[text][/text]
[text][/text]
 
kshlkvVIPДата написания: Среда, 08.06.2011, 16:47:21 | Сообщение № 11


Создание игр и программ
Сообщений: 836
Награды: 4
Репутация: 325
Frоst, лис. Посмотрел в опере и хроме, там шрифт другой unsure

[text]MicroBar's[/text][text]





[/text]
[text]UserBar's[/text][text]
 
FrоstДата написания: Среда, 08.06.2011, 18:09:11 | Сообщение № 12

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Всё, теперь должно работать. Попробуйте потестить, будут еще замечания или предложения, пишите.

 
MerzavecДата написания: Среда, 08.06.2011, 18:21:58 | Сообщение № 13

Проверенный
Сообщений: 983
Награды: 237
Репутация: 505
Спасибо!
Водителю автобуса +++ в репу :DD


[text][text]МикроБар'ы[/text]


[/text]
 
THE_KINGДата написания: Среда, 08.06.2011, 20:39:34 | Сообщение № 14

Освоившийся
Сообщений: 186
Награды: 1
Репутация: 112
Вот это мне нравится! Где-нибудь возможно пригодится..

trollhaus.ru - все уже там!
 
DizeLДата написания: Четверг, 09.06.2011, 11:00:10 | Сообщение № 15


Раскрутка сайта
Сообщений: 1695
Награды: 230
Репутация: 156
Quote (mixo)
Вроде бы и страницу не сильно загружает и интересно смотрится. wink

У меня грузит сильно - лагает страница.
 
mixoДата написания: Четверг, 09.06.2011, 13:08:32 | Сообщение № 16

Gm.Fuck...
Сообщений: 1176
Награды: 28
Репутация: 367
DizeL,

Незнаю. У меня всё хорошо и очень быстро грузит.


[text]Сайт о Lineage 2 и серверо-строении.[/text]
 
FrоstДата написания: Четверг, 09.06.2011, 18:10:14 | Сообщение № 17

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
DizeL, возможно у тебя железо настолько слабое :)

 
midlersenДата написания: Воскресенье, 09.10.2011, 23:06:50 | Сообщение № 18

-= Уровень: 1 =-
Сообщений: 27
Награды: 0
Репутация: 16
пример не работает :)

http://www.lesslife.ru/


Сообщение отредактировал midlersen - Воскресенье, 09.10.2011, 23:07:06
 
DizeLДата написания: Пятница, 14.10.2011, 13:11:07 | Сообщение № 19


Раскрутка сайта
Сообщений: 1695
Награды: 230
Репутация: 156
midlersen, тогда посмотри пример используя, код который дан
 
Форум » Веб мастеру » Интересные решения в uCoz » Способ реализовать 3D текст без картинок в браузере
  • Страница 1 из 1
  • 1
Поиск:
Обсуждение темы на форуме веб мастеров 3aKa4Ka.at.ua

© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.