Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
Особый статус
 Аватар для Proffessional
743 / 145 / 6
Регистрация: 16.07.2009
Сообщений: 2,185
Записей в блоге: 1

Накладные элементы и внутренняя тень текста

14.11.2012, 20:59. Показов 2128. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Привет!
Есть макет (в приложении)
Вопрос 1 - как сделать наложение этих полосочек на изображении?
Вопрос 2 - как же всё-таки сделать нормальную внутреннюю тень для текста?? Перешерстил разные варианты, один не работают, другие не устраивают.
Вопрос 3 - как дотянуть футер (где меню) до конца страницы? Сейчас у меня он оторван оттдуа
Вообще, я не верстальщик, последний раз я этим занимался уже года 2 назад, так что прошу не бить)
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
@font-face {
 font-family: PFDinTextCompPro-Regular;
 src: url("PFDinTextCompPro-Regular.eot");
}
@font-face {
 font-family: PFDinTextCompPro-Regular;
 src: url("PFDinTextCompPro-Regular.ttf");
}
#header{
    padding: 0px;
    margin: 0px;
    text-align: center;
    background-color: #231f20;
    background-image: url(images/header_back.png);
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 10px;
    -moz-box-shadow: 0 0 10px;
    -webkit-box-shadow: 0 0 10px;
}
#main_img_div{
    padding: 58px;
    text-align: center;
}
#main_img{
    box-shadow: 0 0 30px rgba(0,0,0, 0.75);
    -moz-box-shadow: 0 0 30px rgba(0,0,0, 0.75);
    -webkit-box-shadow: 0 0 30px rgba(0,0,0, 0.75);
}
#footer{
    padding: 0px;
    margin: 0px;
    margin-top: -20px;
    padding-bottom: -100px;
    text-align: center;
    background-color: #231f20;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 10px;
    -moz-box-shadow: 0 0 10px;
    -webkit-box-shadow: 0 0 10px;
    min-height: 100%;
}
#menu{
    list-style: none;
    text-align: center;
    padding: 10px;
}
#menu li{
    text-align: center;
    padding: 10px;
    display: inline;
}
#menu li a{
    font-family: PFDinTextCompPro-Regular;
    font-size:24px;
    color: #FFF;
    text-shadow: 0px -2px 0px #080808;
    filter: dropshadow(color=#e5e5ee,offX=0,offY=1);
}
body{
    padding: 0px;
    margin: 0px;
    background: url(images/Background.jpg);
    min-width: 900px;
    max-height: 768px;
}
</style>
</head>
 
<body>
<div class="header" id="header">
    <img src="https://www.cyberforum.ru/images/Logo.png"/>
</div>
<div id="main_img_div">
    <img id="main_img" src="https://www.cyberforum.ru/images/photo.jpg"/>
</div>
<div id="footer">
    <ul id="menu">
        <li>
            <a>Galleries</a>
        </li>
        <li>
            <a>About</a>
        </li>
        <li>
            <a>Links</a>
        </li>
        <li>
            <a>Contacts</a>
        </li>
    </ul>
</div>
</body>
</html>
Миниатюры
Накладные элементы и внутренняя тень текста  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
14.11.2012, 20:59
Ответы с готовыми решениями:

Внутренняя тень
Доброй ночи дороги киберфорумцы. Меня мучает один вопрос, касающийся внутреней тени. Нужно сделать внутреннюю тень справа у меню, не могу...

Тень Текста
как пожно получить такое отражение текста,через text-shadow такого эффекта вроде бы не достигнуть?

Тень у текста
люди добрые помогите, пожалуйста, как сделать тень у текста? Если можно пример подробный, хотя бы одной буквы. text-shadow в...

4
Особый статус
 Аватар для Proffessional
743 / 145 / 6
Регистрация: 16.07.2009
Сообщений: 2,185
Записей в блоге: 1
15.11.2012, 16:01  [ТС]
Никто не поможет
0
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
15.11.2012, 17:58
border-bottom

http://www.xiper.net/collect/h... -nizu.html

http://www.xiper.net/search.html?s=text-shadow
0
Особый статус
 Аватар для Proffessional
743 / 145 / 6
Регистрация: 16.07.2009
Сообщений: 2,185
Записей в блоге: 1
15.11.2012, 19:10  [ТС]
Цитата Сообщение от Taatshi Посмотреть сообщение
border-bottom
а как он может помочь? Сделать широченную рамку вниз на 1000px?
Дело в том, что моя цель не прибить футер, а растянуть его до самого конца страницы.
Внутренняя тень... Там о ей вообще ничего не сказано. Как её сделать не светлом фоне ещё понятно...
0
IT-Философ
 Аватар для moisha
98 / 19 / 0
Регистрация: 13.06.2012
Сообщений: 220
15.11.2012, 19:50
а почему не устраивает увиличить высоту чтоб футер был внизу, поигратся с мин и макс высотой, или в % соотношении делать.
тень в меню нада? если да можно менюшку картинками через фотошоп сделать в png или gif а фон страницы будет братся.
Мое дело посоветовать.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.11.2012, 19:50
Помогаю со студенческими работами здесь

Тень для текста
Есть ли возможность добавить тень вокруг текста методами css?

Внутренняя оптимизация текста
Создаю для своих экспериментов по продвижению foto.zhidcov.ru Сайт сперва написал статью для главной, потом выбрал ключевики Интересные...

C++ / SFML контур текста и тень
Приветствую. Столкнулся с такой проблемой - не знаю как сделать текст с контуром. Использую SFML Text. Пробовал менять размер и выводить...

Как убрать тень текста
Добрый день. Переделываю сайт, и не могу разобраться в css. Там где то прописано чтоб буквы отбрасывали тень, как это убрать.

Тень текста нажатой кнопки
Есть TabHost. В нём несколько табов. На каждом табе чёрный текст с белой тенью. Когда таб нажат цвет текста меняю на белый. Нужно и цвет...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&amp;d=1772460536 Одним из. . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru