Примеры css3 свойств для ваших сайтов

css3 в примерах Официально, css3 еще не вышло, но некоторое примеры работы свойств уже есть в сети. После просмотра 10-20 свойств меня поразили некоторые примеры нового css.

С помощью нескольких строк css3 можно заменить большой сценарий javascript, увеличив скорость загрузки страницы и улучшив читаемость кода.

Начнём с создания красивого заголовка с помощью css3

Красивый Заголовок с помощью CSS3

h1 {
	width:400px;
	text-align:center;
	background-color: #CCFF33;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px 20px 20px 20px;
	font-size:18px;
}

-moz-border-radius - Закруглённые углы для Firefox

border-radius - Закругляем углы для браузера Opera

После написания таблицы стилей, в HTML страницу вставляйте h1 заголовок, который будет в рамке с закруглёнными углами - смотрится красиво, но не поддерживается в IE, в опере, Firefox - работает.

Делаем тень с помощью css3

Стиль css3 - тень текста

.shadow {
	color: #00FF00;
	text-shadow: 5px 5px 5px #00FF00;
	font-size: 20px;
}

После задания этого стиля весь текст который будет вставлен в тег p и иметь class="shadow" - будет иметь красивую тень.

Красивый css3 шрифт


Beautiful font with CSS3

@font-face {
	font-family: 'Loyal';
	src: url('temp/RAGE.TTF');
}
.font {
	font-family: Loyal;
	font-size: 35px;
}

Очень понравился этот эффект, только шрифт не будет отображаться у всех, а только у тех, у кого установлен предлагаемый вами шрифт.

Чтобы шрифт отображался корректно, нужно скопировать его из папки шрифтов в папку с сайтом, в моём случае temp/rage.ttf.

<span class="font">Пишем текст для отображения</span>

Это лишь малая часть css3 примеров, скоро нас ждёт полное открытие в css3 и html5 с которыми стили сайтов значительно улучшаться.

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Горизонтальное меню с помощью css (5 видов)

Создаём парсер сайтов

Влияние внутренних факторов сайта на раскрутку

Какой хостинг лучше выбрать

Замена изображения при наведении

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =