|
3D текст с помощью text-shadow
|
|
| workman | Четверг, 25 Сентября 2014, 23:32 | Сообщение 1 |
| Красивое написание букв, которые будут выводиться 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>
DEMO
Сообщение отредактировал
workman - Пятница, 26 Сентября 2014, 21:00 | | [ RU ] |
| |
| kredit-oformi | Четверг, 25 Сентября 2014, 23:35 | Сообщение 2 |
| Здорово, надо попробовать обязательно текст так сделать
| | [ RU ] |
| |
| workman | Четверг, 25 Сентября 2014, 23:41 | Сообщение 3 |
|
| Цитата kredit-oformi (  ) Здорово, надо попробовать обязательно текст так сделать
Только под каждый дизайн сайта нужно менять коды цвета
| | [ RU ] |
| |
| Kosten | Пятница, 26 Сентября 2014, 00:04 | Сообщение 4 |
| workman, слов нет, шикарно смотрится и на любом дизайне очень оригинально обзор просматриваться будет.
| | [ RU ] |
| |
| Kosten | Пятница, 26 Сентября 2014, 00:08 | Сообщение 5 |
|
| workman, у меня один вопрос к тебе. Ты не пробовал верстать шаблоны, так как в кодах и стилях шаришь мама не горюй. Да и ресурс у тебя сделан оригинально, с фишками, которые не напрягают и в тоже время очень нужные.
| | [ RU ] |
| |
| Kosten | Пятница, 26 Сентября 2014, 00:12 | Сообщение 6 |
|
| workman, да и как сполер сделать который ты на демо представил. Так как тот был через F5 или я что то пропустил. Я бы такой на кино сайт поставил с названием фильма под сериал.. думаю не дурно смотрелось.
| | [ RU ] |
| |
| workman | Пятница, 26 Сентября 2014, 03:05 | Сообщение 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 Сентября 2014, 03:08 | Сообщение 8 |
|
| Kosten, Может тебе просто такой лучше нужно будет поставить??? Смотри
| | [ RU ] |
| |
| Kosten | Пятница, 26 Сентября 2014, 03:18 | Сообщение 9 |
|
| workman, мне простой с надписью.
пример
Сериал Побег: 3 серия
Клик на его и появляется плеер с этой серией.
| | [ RU ] |
| |
| workman | Пятница, 26 Сентября 2014, 03:23 | Сообщение 10 |
|
| ПО МЕСТУ СТАВИМ ЭТОТ КОДКод <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, 03:32 | Сообщение 11 |
| Прикольно что сказать , красиво оригинально можно оформить сайт
| | [ RU ] |
| |
| workman | Пятница, 26 Сентября 2014, 03:34 | Сообщение 12 |
|
| 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;
}
КАК ЭТО РАБОТАЕТ МОЖНО ПОСМОТРЕТЬ ТУТОЧКИ - ТРЕСЬ
Сообщение отредактировал
workman - Пятница, 26 Сентября 2014, 05:04 | | [ RU ] |
| |
| workman | Пятница, 26 Сентября 2014, 03:39 | Сообщение 13 |
|
| Dimstrik, Но только если стоит в модулях сайта H1 то они тоже примут такое очертание....
Просто для определеного заголовка можно прописать так Код H1 .my {...................} Код <H1 class="my">бла-бла-бла</H1> | | [ RU ] |
| |
|
| Kosten | Пятница, 26 Сентября 2014, 11:25 | Сообщение 15 |
|
| workman, реально слов нет!
Шикарно 
| | [ RU ] |
| |
