Блог старого компьютера

Блог старого компьютера


Главная html & css CSS3 несколько интересных примеров

CSS3 несколько интересных примеров

02.12.2012 11:29 Администратор html & css
Печать PDF
Как я привык говорить - мир не стоит на месте и с каждым годом появляются новые и интересные возможности. Данное утверждение не обходит стороной и CSS. Если посмотреть на историю создания то видно что примерно в 1996 году появился CSS 1, через 2 года (1998 год) появилась вторая версия css, которая потерпела несколько обновлений и исправлений. Сейчас же есть CSS версии 3 которая до сих пор находится в процесее разработки и год издания у нее неизвестен, но на сколько я помню упоминания начались примерно в 2009 году (если ошибаюсь поправьте). Так же примерно год назад (в 2011) стало известно что разрабатывает CSS4. Сегодня мы поговорим о CSS 3.

На данный момент есть много интересных свойств и возможностей в CSS 3 которые начинаются от простых теней до анимации. К сожалению  не все возможности CSS3 являются кросбраузерными. Сегодня я хочу отметить несколько полезных возможностей  CSS3 в примерах. Про opacity и text-shadow я думаю знают все и про них речь вести не будем, рассмотрим нечто более интересное и полезное.

box-shadow - с помощью данного свойства можно задать тень блоку.

<style>
.box1{
width:200px;
height:100px;
box-shadow: #333 3px 3px 4px;

-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;
}
</style>

<p class="box1">box1</p>

 Результат:

 border-radius - с помощью данного свойства можно закруглить края блока так как нам вздумается

<style>
.box2{
width:200px;
height:100px;
border:1px solid black;
border-radius: 12px;

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
</style>

<p class="box2">box2</p>

Результат:

 Так же можно задать каждому углу разное закругление

<style>
.box3{
width:200px;
height:100px;
border:1px solid black;
border-radius: 12px 30px 50px 21px;

-webkit-border-radius: 12px 50px 1px 21px;
-moz-border-radius: 12px 50px 1px 21px;
}
</style>

<p class="box3">box3</p>

В результате получим следующее:

linear-gradient  - свойство для реализации градиента

<style>
.box4{
width:200px;
height:100px;

background: -moz-linear-gradient(#FFF, #000);
background: -ms-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-linear-gradient(#FFF, #000);
}
</style>

<p class="box4">box4</p>

 Результат:

 background-repeat:space - позволяет множить изображение так чтоб оно не обрезалось краем блока.

<style>
.box5{
width:200px;
height:100px;
background: url("2.gif");
background-repeat:space;
}
</style>

<p class="box5">box5</p>

На сколько я помню работает это как ни странно только в opera и ie9.

Результат:

background - добавлена возможность использовать для фона несколько изображений

 <style>
.box6{
width:200px;
height:100px;
background:
url("3.gif") top left no-repeat,
url("4.jpg") top right no-repeat,
url("2.gif") bottom left no-repeat,
url("1.png") bottom right no-repeat;
}
</style>

<p class="box6">box6</p>

 Результат:

resize - позволяет изменять размеры текстового поля  (хотя в хроме я изменял размеры и блоку <p>)

<style>
.box7{
width:200px;
height:100px;
resize: both;
overflow: auto;
border:1px solid silver;
}
</style>

<textarea class="box7">box7</textarea>

Результат:

 На этот раз я закончу описание CSS, но в будующем я планирую проводить похожие анонсы. Весь приведенный код годится только для ознакомления. Если обратится к справочнику то вы увидите что с помощю этих свойств вы можете задавать различного образа тени, несколько по другому управлять фоном блока и так далее. Свойства все эти несомненно полезные вот еще бы они все были кросбраузерными это бы был отличный подарок каждому верстальщику на новый год!

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


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?