Страница 1 из 212»
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » 3D текст с помощью text-shadow
3D текст с помощью text-shadow
workman
Дата: Четверг, 25.09.2014, 23:32 | Сообщение # 1
Vip
Сообщений:1576
Награды: 7


Красивое написание букв, которые будут выводиться 3D текст. Сейчас очень распространенная такая тема вывода красивого текста как заголовок раздела или что то нужного на сайте. Так как согласитесь, такая красота написание сразу бросается в глаза как пользователю так и гостю, который решил посетить ваш сайт.

Код
<STYLE>
h1 {
color:#fff;
font:bold 70px Georgia, Helvetica, Arial, sans-serif;
margin:0;
text-align:center;
text-shadow:0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);
}

h2 {
color:#fff;
font:bold 50px Georgia, Helvetica, Arial, sans-serif;
margin:0;
text-align:center;
text-shadow:0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);
}
</STYLE>


Код
<h1>Ваш текст</h1>


DEMO

Прикрепления: 6574930.jpg(49Kb)


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

Сообщение отредактировал workman - Пятница, 26.09.2014, 21:00
kredit-oformi
Дата: Четверг, 25.09.2014, 23:35 | Сообщение # 2
Vip
Сообщений:1953
Награды: 5


Здорово, надо попробовать обязательно текст так сделать
workman
Дата: Четверг, 25.09.2014, 23:41 | Сообщение # 3
Vip
Сообщений:1576
Награды: 7


Цитата kredit-oformi ()
Здорово, надо попробовать обязательно текст так сделать

Только под каждый дизайн сайта нужно менять коды цвета


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Kosten
Дата: Пятница, 26.09.2014, 00:04 | Сообщение # 4
Администраторы
Сообщений:12706
Награды: 39


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

Kosten
Дата: Пятница, 26.09.2014, 00:08 | Сообщение # 5
Администраторы
Сообщений:12706
Награды: 39


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

Kosten
Дата: Пятница, 26.09.2014, 00:12 | Сообщение # 6
Администраторы
Сообщений:12706
Награды: 39


workman, да и как сполер сделать который ты на демо представил. Так как тот был через F5 или я что то пропустил. Я бы такой на кино сайт поставил с названием фильма под сериал.. думаю не дурно смотрелось.

workman
Дата: Пятница, 26.09.2014, 03:05 | Сообщение # 7
Vip
Сообщений:1576
Награды: 7


Kosten, Вот сам спойлер как ты просил

Код
<a id="link1" href="#">Ссылка для клика</a>
<div id="content1" style="display: none;">Здесь то что будет спрятано</div>

<script>
    $(document).ready(function () {
         $('a#link1').click(function (e) {
             $(this).toggleClass('active');
             $('#content1').toggle();
                  
             e.stopPropagation();
         });

         $('#content1').click(function (e) {
             e.stopPropagation();
         });

         $('body').click(function () {
             var link = $('a#link1');
             if (link.hasClass('active')) {
                 link.click();
             }
         });
     });

</script>


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
workman
Дата: Пятница, 26.09.2014, 03:08 | Сообщение # 8
Vip
Сообщений:1576
Награды: 7


Kosten, Может тебе просто такой лучше нужно будет поставить??? Смотри

Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Kosten
Дата: Пятница, 26.09.2014, 03:18 | Сообщение # 9
Администраторы
Сообщений:12706
Награды: 39


workman, мне простой с надписью.

пример

Сериал Побег: 3 серия

Клик на его и появляется плеер с этой серией.


workman
Дата: Пятница, 26.09.2014, 03:23 | Сообщение # 10
Vip
Сообщений:1576
Награды: 7


ПО МЕСТУ СТАВИМ ЭТОТ КОД
Код
<a id="link1" href="#">ТУТ НАПРИМЕР ССЫЛКА ИЛИ КАРТИНКА С НАДПИСЬЮ - СМОТРЕТЬ.... </a>    
<div id="content1" style="display: none;">ЗДЕСЬ КОД ПЛЕЕРА</div>


ЭТО ПОСТАВЬ В САМЫЙ НИЗ СТРАНИЦ САЙТА
Код
<script>    
       $(document).ready(function () {    
            $('a#link1').click(function (e) {    
                $(this).toggleClass('active');    
                $('#content1').toggle();    
                        
                e.stopPropagation();    
            });    

            $('#content1').click(function (e) {    
                e.stopPropagation();    
            });    

            $('body').click(function () {    
                var link = $('a#link1');    
                if (link.hasClass('active')) {    
                    link.click();    
                }    
            });    
        });    

</script>


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

Сообщение отредактировал workman - Пятница, 26.09.2014, 04:53
Dimstrik
Дата: Пятница, 26.09.2014, 03:32 | Сообщение # 11
Vip
Сообщений:621
Награды: 6


Прикольно что сказать , красиво оригинально можно оформить сайт
workman
Дата: Пятница, 26.09.2014, 03:34 | Сообщение # 12
Vip
Сообщений:1576
Награды: 7


Kosten. СДЕЛАЛ ТЕБЕ СКРИПТ. МОЖЕШЬ КОНЕЧНО ЖЕ РЕАЛИЗОВАТЬ И ТАК, ЕСЛИ ИМЕЕШЬ НА ОДНОЙ СТРАНИЦЕ СРАЗУ НЕСКОЛЬКО СЕРИЙ

Код
<a href="#" onclick="opcl(mydivs, '.box1'); return false;">ФИЛЬМ 1</a>
             <a href="#" onclick="opcl(mydivs, '.box2'); return false;">ФИЛЬМ  2</a>
             <a href="#" onclick="opcl(mydivs, '.box3'); return false;">ФИЛЬМ  3</a>
             <a href="#" onclick="opcl(mydivs, '.box4'); return false;">ФИЛЬМ  4</a>
             <a href="#" onclick="opcl(mydivs, '.box5'); return false;">ФИЛЬМ 5</a>
                      
             <div class="box1">КОД ФИЛЬМА 1</div>
             <div class="box2">КОД ФИЛЬМА 2</div>
             <div class="box3">КОД ФИЛЬМА 3</div>
             <div class="box4">КОД ФИЛЬМА 4</div>
             <div class="box5">КОД ФИЛЬМА 5</div>


СКРИПТ БУДЕТ ВЫГЛЯДЕТЬ ТАК
Код

var mydivs=new Array('.box1','.box2','.box3','.box4','.box5');
function opcl(arr, e){
             if ($(e).css('display') == 'none'){
                 for(var i in arr){            
                    $(arr[i]).hide();              
                 }
                 $(e).show();                
             }
}


НУ И КУДА ЖЕ БЕЗ СТИЛЕЙ

Код
.box1, .box2, .box3, .box4, .box5{
             display: none;
          }


КАК ЭТО РАБОТАЕТ МОЖНО ПОСМОТРЕТЬ ТУТОЧКИ - ТРЕСЬ

Прикрепления: 7234802.jpg(62Kb)


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

Сообщение отредактировал workman - Пятница, 26.09.2014, 05:04
workman
Дата: Пятница, 26.09.2014, 03:39 | Сообщение # 13
Vip
Сообщений:1576
Награды: 7


Dimstrik, Но только если стоит в модулях сайта H1 то они тоже примут такое очертание....
Просто для определеного заголовка можно прописать так
Код
H1 .my {...................}
ну и где будет заголовок красивый
Код
<H1 class="my">бла-бла-бла</H1>


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Slavik
Дата: Пятница, 26.09.2014, 03:53 | Сообщение # 14
Проверенные
Сообщений:1444
Награды: 1


workman, Круть что ещё сказать smile wink

MIR-HACK.RU - Добро пожаловать в мир читов!
Kosten
Дата: Пятница, 26.09.2014, 11:25 | Сообщение # 15
Администраторы
Сообщений:12706
Награды: 39


workman, реально слов нет!
Шикарно cool


Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » 3D текст с помощью text-shadow
Страница 1 из 212»
Поиск: