• Страница 1 из 2
  • 1
  • 2
  • »
Форум » Веб-разработка » HTML + CSS — коды » 3D текст с помощью text-shadow
3D текст с помощью text-shadow
workman
Четверг, 25 Сентября 2014 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Красивое написание букв, которые будут выводиться 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 (48.6 Kb)


Сообщение отредактировал
workman - Пятница, 26 Сентября 2014, 21:00
Страна: (RU)
kredit-oformi
Четверг, 25 Сентября 2014 | Сообщение 2
Оффлайн
Vip
Сообщений:1975
Награды: 5
Здорово, надо попробовать обязательно текст так сделать
Страна: (RU)
workman
Четверг, 25 Сентября 2014 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата kredit-oformi ()
Здорово, надо попробовать обязательно текст так сделать

Только под каждый дизайн сайта нужно менять коды цвета
Страна: (RU)
Kosten
Пятница, 26 Сентября 2014 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
workman, слов нет, шикарно смотрится и на любом дизайне очень оригинально обзор просматриваться будет.
Страна: (RU)
Kosten
Пятница, 26 Сентября 2014 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
workman, у меня один вопрос к тебе. Ты не пробовал верстать шаблоны, так как в кодах и стилях шаришь мама не горюй. Да и ресурс у тебя сделан оригинально, с фишками, которые не напрягают и в тоже время очень нужные.
Страна: (RU)
Kosten
Пятница, 26 Сентября 2014 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
workman, да и как сполер сделать который ты на демо представил. Так как тот был через F5 или я что то пропустил. Я бы такой на кино сайт поставил с названием фильма под сериал.. думаю не дурно смотрелось.
Страна: (RU)
workman
Пятница, 26 Сентября 2014 | Сообщение 7
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
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 Сентября 2014 | Сообщение 8
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Kosten, Может тебе просто такой лучше нужно будет поставить??? Смотри
Страна: (RU)
Kosten
Пятница, 26 Сентября 2014 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
workman, мне простой с надписью.

пример

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

Клик на его и появляется плеер с этой серией.
Страна: (RU)
workman
Пятница, 26 Сентября 2014 | Сообщение 10
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
ПО МЕСТУ СТАВИМ ЭТОТ КОД
Код
<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 Сентября 2014, 04:53
Страна: (RU)
Dimstrik
Пятница, 26 Сентября 2014 | Сообщение 11
Оффлайн
Vip
Сообщений:621
Награды: 6
Прикольно что сказать , красиво оригинально можно оформить сайт
Страна: (RU)
workman
Пятница, 26 Сентября 2014 | Сообщение 12
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
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 (62.0 Kb)


Сообщение отредактировал
workman - Пятница, 26 Сентября 2014, 05:04
Страна: (RU)
workman
Пятница, 26 Сентября 2014 | Сообщение 13
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Dimstrik, Но только если стоит в модулях сайта H1 то они тоже примут такое очертание....
Просто для определеного заголовка можно прописать так
Код
H1 .my {...................}
ну и где будет заголовок красивый
Код
<H1 class="my">бла-бла-бла</H1>
Страна: (RU)
Slavik
Пятница, 26 Сентября 2014 | Сообщение 14
Оффлайн
Vip
Сообщений:1767
Награды: 4
workman, Круть что ещё сказать smile wink

MIR-HACK.RU - Добро пожаловать в мир читов!
Страна: (RU)
Kosten
Пятница, 26 Сентября 2014 | Сообщение 15
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
workman, реально слов нет!
Шикарно cool
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » 3D текст с помощью text-shadow
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: