Форум Сайтостроение Веб-строительство

Как с помощью CSS сделать тень

MerryRobby
На сайте с 06.02.2010
Offline
4
MerryRobby
1912

Как в CSS сделатьЮ чтобы текст отбрасывал небольшую тень?

malls
На сайте с 08.08.2005
Offline
255
malls
#1

есть там какой-то shadow - но кажись не везде работает. Проще двойной див сделать с текстом, но нижний сдвинуть на пару пикселей и прозрачность задать ему 80%

MerryRobby
На сайте с 06.02.2010
Offline
4
MerryRobby
#2

Да, shadow не работает, а вот про див хорошая идея..) попробую. Спасибо.

malls
На сайте с 08.08.2005
Offline
255
malls
#3

токма текст хуже читается с тенями

pelvis
На сайте с 01.09.2005
Offline
345
pelvis
#4

MerryRobby, покурите исходные коды здесь http://sobeski.ru/ это одна из наших работ, там есть нужный плагин.

Продаю вывески. Задарма и задорого (https://www.ledsvetzavod.ru/)
MerryRobby
На сайте с 06.02.2010
Offline
4
MerryRobby
#5

pelvis, но по-моему, текст, что слева, не текст, а картинки? И ещё вот за прокрутку только вот это отвечает и больше ничего?

<script type="text/javascript">
$(function()
{
$('.main_text').jScrollPane({showArrows:true, scrollbarWidth:12, dragMaxHeight:43});
$('.content_info').jScrollPane({showArrows:true, scrollbarWidth:12, dragMaxHeight:43});
$('.gallery b').dropShadow({left: 2, top: 2, blur: 1, opacity: 0.8});
});
</script>
K
На сайте с 29.06.2005
Offline
76
Kalian
#6

Можно сделать с помощью свойства text-shadow, но оно работает только в браузерах, поддерживающих CSS3, т.е. IE пролетает.

Но можно и так (работает даже в IE6, проверял): 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Заголовок</title>

<meta http-equiv="content-type" content="text/html;charset=win-1251" />

<style type="text/css">

* {

	font: bold 17px Tahoma;

	margin: 0;

	padding: 0;

}

body {

	background: #ccc;

}

.shadow {

	color: #555;

	margin: 5px;

	position: relative;

}

.shadow span {

	color: #fff;

	position: absolute;

	left: -1px;

	top: -1px;

	z-index: 2;

}

</style>

</head>

<body>

<div class="shadow">

	text

	<span>text</span>

</div>

</body>

</html>
Frendlix
На сайте с 13.11.2009
Offline
78
Frendlix
#7

Яндекс нэ?

Первый результат.

Корпоративные мероприятия здесь (https://4-event.ru)!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий