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


Красивое написание букв, которые будут выводиться 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
Гл. Модератор
Сообщений:1696
Награды: 8


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

Только под каждый дизайн сайта нужно менять коды цвета
Страна: (RU)
Kosten
Дата: Пятница, 26.09.2014, 00:04 | Сообщение # 4
Администраторы
Сообщений:15787
Награды: 51


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


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


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


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
Гл. Модератор
Сообщений:1696
Награды: 8


Kosten, Может тебе просто такой лучше нужно будет поставить??? Смотри
Страна: (RU)
Kosten
Дата: Пятница, 26.09.2014, 03:18 | Сообщение # 9
Администраторы
Сообщений:15787
Награды: 51


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

пример

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

Клик на его и появляется плеер с этой серией.
Страна: (RU)
workman
Дата: Пятница, 26.09.2014, 03:23 | Сообщение # 10
Гл. Модератор
Сообщений:1696
Награды: 8


ПО МЕСТУ СТАВИМ ЭТОТ КОД
Код
<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
Гл. Модератор
Сообщений:1696
Награды: 8


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
Гл. Модератор
Сообщений:1696
Награды: 8


Dimstrik, Но только если стоит в модулях сайта H1 то они тоже примут такое очертание....
Просто для определеного заголовка можно прописать так
Код
H1 .my {...................}
ну и где будет заголовок красивый
Код
<H1 class="my">бла-бла-бла</H1>
Страна: (RU)
Slavik
Дата: Пятница, 26.09.2014, 03:53 | Сообщение # 14
Гл. Модератор
Сообщений:1720
Награды: 4


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

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


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