CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

6

Обводка текста с помощью CSS + JS

Jemand 11362 ,
CSS, JavaScript

1. CSS

body {
	padding: 100px;
	background: #09F;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	}
.textBorder {
	position: relative;
	z-index: 1;
	}
.textBorder strong {
	position: relative;
	z-index: 5;
	}
.textBorder span {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	color: #FFF;
	font-weight: bold;
	}
/* С помощью значений top и left регулируем толщину обводки */
.textBorder span.b1 {top: -3px;}
.textBorder span.b2 {left: 3px;}
.textBorder span.b3 {top: 3px;}
.textBorder span.b4 {left: -3px;}
.textBorder span.b5 {top: -2px;left: 2px;}
.textBorder span.b6 {top: 2px;left: 2px;}
.textBorder span.b7 {top: 2px;left: -2px;}
.textBorder span.b8 {top: -2px;left: -2px;}

2. Подключение jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Данный код добавляем в раздел <head>
3. JavaScript

<script type="text/javascript">
$(document).ready(function (){
	var text = $('.textBorder strong').html();
	var textinner = '<span class="b1">'+text+'</span>'+'<span class="b2">'+text+'</span>'+'<span class="b3">'+text+'</span>'+'<span class="b4">'+text+'</span>'+'<span class="b5">'+text+'</span>'+'<span class="b6">'+text+'</span>'+'<span class="b7">'+text+'</span>'+'<span class="b8">'+text+'</span>';
	$('.textBorder').append(textinner);
});
</script>

Данный код, также, добавляем в раздел <head>, но после кода подключения jQuery.
4. HTML

<div class="textBorder">
	<strong>Привет! Я текст с обводкой!</strong>
</div>

Демо

Рекламная пауза

» 6 комментариев

  1. у меня в демо текст и тень рассыпаются

  2. думаю это не от браузера зависит, а от разрешения экрана.. у меня 1024 х 768.. в ие ОК, а в FF, в опере и в хроме глюки

  3. Действительно. Даже если просто уменьшать текст с помощью Ctrl + “-” , заметно, что в некоторых расширениях обводка съезжает.


Оставить комментарий