Искатель :

Примеры css3

15 Янв 2014
Официально, css3 еще не вышло, но некоторое примеры работы свойств уже есть в сети. После просмотра 10-20 свойств меня поразили некоторые примеры нового css.
С помощью нескольких строк css3 можно заменить большой сценарий javasсript, увеличив скорость загрузки страницы и улучшив читаемость кода.
Начнём с создания красивого заголовка с помощью css3
Красивый Заголовок с помощью CSS3
1 h1 {
2 width:400px;
3 text-align:center;
4 background-color: #CCFF33;
5 -webkit-border-radius: 20px;
6 -moz-border-radius: 20px;
7 border-radius: 20px 20px 20px 20px;
8 font-size:18px;
9 }
-moz-border-radius - Закруглённые углы для Firefox
border-radius - Закругляем углы для браузера Opera
После написания таблицы стилей, в HTML страницу вставляйте h1 заголовок, который будет в рамке с закруглёнными углами - смотрится красиво, но не поддерживается в IE, в опере, Firefox - работает.
Делаем тень с помощью css3
Стиль css3 - тень текста
1 .shadow {
2 color: #00FF00;
3 text-shadow: 5px 5px 5px #00FF00;
4 font-size: 20px;
5 }
После задания этого стиля весь текст который будет вставлен в тег p и иметь class="shadow" - будет иметь красивую тень.
Красивый css3 шрифт
Beautiful font with CSS3
1 @font-face {
2 font-family: 'Loyal';
3 src: url('temp/RAGE.TTF');
4 }
5 .font {
6 font-family: Loyal;
7 font-size: 35px;
8 }
Очень понравился этот эффект, только шрифт не будет отображаться у всех, а только у тех, у кого установлен предлагаемый вами шрифт.
Чтобы шрифт отображался корректно, нужно скопировать его из папки шрифтов в папку с сайтом, в моём случае temp/rage.ttf.
1 <span class="font">Пишем текст для отображения</span>
Это лишь малая часть css3 примеров, скоро нас ждёт полное открытие в css3 и html5 с которыми стили сайтов значительно улучшаться.