Архив метки: css3

CSS3 Показ и скрытие контента по нажатию на элемент

CSS3_hide_showСделать по нажатию показ некоего контента, при повторном нажатии его исчезновение.

Это можно сделать с помощью CSS3

 

Пример листинга

<!DOCTYPE html>
<html>
<head>
</head>
<style>
label {
display: inline-block;
padding: 1em;
border: 2px solid black;
}
#chk {
display: none;
}
#chk + div {
display: none;
width: 200px;
height: 100px;
position: absolute;
top: 40%;
left: 40%;
margin-top: -120px;
margin-left: -120px;
border: 1px solid black;
line-height: 50px;
text-align: center;
}
/* magic here*/
#chk:checked + div {
display: block;
}
</style>
<body>
<label for="chk">Коротко</label>
<input type="checkbox" id="chk" />
<div>Полный контент</div>
<div>Просто какойто текст.</div>
</body>
<html>

Тоже самое сделатьс помощью AJAX —  листинг тут

Кнопка полностью на CSS3

Создадим кнопку с помощью только стилей версии CSS3.

Для этого создадим в самой html странице заготовку для нашей будущей кнопки

<a href="">CSS3</a>

Сами стили для тега <а> будут выглядеть так:

a {
position: relative;
color: white;
text-decoration: none;
background-color: rgba(219,87,5,1);
font-weight: 700;
font-size: 2em;
display: block;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,1);
margin: 100px auto;
width: 100px;
text-align: center;
-webkit-transition: all .1s ease;
transition: all .1s ease;
}
a:active {
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}

В итоге получиться наша кнопка как в картинке в заголовке.

Колонки в CSS3

Использование колонок в CSS3.

Для того чтобы текст в элементе стал много колоночным необходимо через стили в CSS прописать одно из свойств: column-width или column-count в значение, отличное от auto. 

Есть 2 возможности при создания колонок.

1 способ — указать количество колонок.

К примеру для создания текста из 2-х колонок, нужно выставить след свойство в стилях

#Col_Count{
-webkit-column-count: 2;
}

получиться так

2 Колонки

2 способ — указать ширину колонок

Пример укажем ширину колонок 80px, при общей длине блока 400px

#Col_width{
width:400px;
-webkit-column-width: 80px;
}

получиться так

Колонки

Видно что хотя общая ширина 400 и мы указали ширину 1 колонки 80, всего колонок не 5 (400/80=5) а 4. Это связано с тем что есть еще межколночные интервалы.

Посмотреть пример

Скачать пример

Масштабирование фона в CSS3

С приходом CSS3 изменять фон в соответствии с размерами, можно без блоков-обёрток, таблиц и прочих дополнительных элементов.

Работоспособный код для масштабирования фонового изображения.

Листинг примера масштабирования

<html>
<head>
<meta charset="utf-8">
<title>CSS3 background-size</title>
<style type="text/css">
#a{
width:100%;
height:481px;
overflow:hidden;
background:url(ipad3.jpg) no-repeat center top;/* здесь наш фон */
-moz-background-size:100% 100%; /* для Firefox 4+ */
-o-background-size:100% 100%; /* для Opera 9.5+ */
-webkit-background-size:100% 100%; /* для Safari 5+ и Chrome 4+ */
-khtml-background-size:100% 100%; /* для Konqueror (WebKit-браузеров) */
background-size:100% 100%; /* CSS3 свойство */
}
</style>

</head>
<body>
<div id=a>
<h1> Резиновые изображения, подстройка картинок под </h1>
</div>
</body>
</html>

Всплывающие подсказки с помощью CSS3

Анимация всплывающих подсказок с помощью CSS3

Создадим анимацию всплывающих подсказок (tooltip) вот такого вида

Всплывающие подсказки с анимацией

Шаг 1

Покажем наши картинки, для которых нужны всплывающие подсказки.

Код html

<div class="tt-wrapper"> 
 <a href=""><img src="img/class-mage.png"><span>Маг</span></a>
 <a href=""><img src="img/class-priest.png"><span>Монах</span></a> 
 <a href=""><img src="img/class-warrior.png"><span>Воин</span></a> 
 <a href=""><img src="img/class-scout.png"><span >Разведчик</span></a>
</div>

Шаг 2

Создаем стили
Для начала создадим стиль для общего div
код css

.tt-wrapper{
	padding: 0;
	width: 800px;
	margin-top:150px;
    margin-left:25%;
	text-align:center;
}

Затем создадим стили для подсказок

.tt-wrapper a span{
    width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	margin-left:-123px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;
    font-style: Bolder;
    font-size: 14px;
    color: #004A7F;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	text-decoration:none;
    text-align: center;
    border: 2px solid #fff;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 15px;
    position: absolute;
    pointer-events: none;
	bottom: 570px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

}
.tt-wrapper  a span:before,
.tt-wrapper  a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
a {
text-decoration:none;
}
.tt-wrapper  a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}

В заключении стиль в котором указываем где появиться нашему блоку с подсказкой

.tt-wrapper a:hover span{
    opacity: 0.9;
    bottom: 600px;
	text-decoration:none;
}

Работающий пример подсказок — DEMO