Страница 1 из 212»
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » 3D текст с помощью text-shadow
3D текст с помощью text-shadow
workman
Дата: Четверг, 25.09.2014, 23:32 | Сообщение # 1
Гл. Модератор
Сообщений:1610
Награды: 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
Страна: (RU)
kredit-oformi
Дата: Четверг, 25.09.2014, 23:35 | Сообщение # 2
Vip
Сообщений:1964
Награды: 5


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


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

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


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
Kosten
Дата: Пятница, 26.09.2014, 00:04 | Сообщение # 4
Администраторы
Сообщений:15290
Награды: 50


workman, слов нет, шикарно смотрится и на любом дизайне очень оригинально обзор просматриваться будет.
Страна: (RU)
Kosten
Дата: Пятница, 26.09.2014, 00:08 | Сообщение # 5
Администраторы
Сообщений:15290
Награды: 50


workman, у меня один вопрос к тебе. Ты не пробовал верстать шаблоны, так как в кодах и стилях шаришь мама не горюй. Да и ресурс у тебя сделан оригинально, с фишками, которые не напрягают и в тоже время очень нужные.
Страна: (RU)
Kosten
Дата: Пятница, 26.09.2014, 00:12 | Сообщение # 6
Администраторы
Сообщений:15290
Награды: 50


workman, да и как сполер сделать который ты на демо представил. Так как тот был через F5 или я что то пропустил. Я бы такой на кино сайт поставил с названием фильма под сериал.. думаю не дурно смотрелось.
Страна: (RU)
workman
Дата: Пятница, 26.09.2014, 03:05 | Сообщение # 7
Гл. Модератор
Сообщений:1610
Награды: 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>


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
workman
Дата: Пятница, 26.09.2014, 03:08 | Сообщение # 8
Гл. Модератор
Сообщений:1610
Награды: 7


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

Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
Kosten
Дата: Пятница, 26.09.2014, 03:18 | Сообщение # 9
Администраторы
Сообщений:15290
Награды: 50


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

пример

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

Клик на его и появляется плеер с этой серией.
Страна: (RU)
workman
Дата: Пятница, 26.09.2014, 03:23 | Сообщение # 10
Гл. Модератор
Сообщений:1610
Награды: 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
Страна: (RU)
Dimstrik
Дата: Пятница, 26.09.2014, 03:32 | Сообщение # 11
Vip
Сообщений:621
Награды: 6


Прикольно что сказать , красиво оригинально можно оформить сайт
Страна: (RU)
workman
Дата: Пятница, 26.09.2014, 03:34 | Сообщение # 12
Гл. Модератор
Сообщений:1610
Награды: 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
Страна: (RU)
workman
Дата: Пятница, 26.09.2014, 03:39 | Сообщение # 13
Гл. Модератор
Сообщений:1610
Награды: 7


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


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
Slavik
Дата: Пятница, 26.09.2014, 03:53 | Сообщение # 14
Гл. Модератор
Сообщений:1698
Награды: 3


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

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


workman, реально слов нет!
Шикарно cool
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » 3D текст с помощью text-shadow
Страница 1 из 212»
Поиск: