Архив рубрики: CSS

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>

Подключение своего шрифта

Подключение и использование своего шрифта на сайте.

Необходимо предварительно скачать и поместить нужный нам шрифт (в примере это myFonts.ttf), затем в стилях прописать следующее

@font-face {
font-family:myFonts;
src: url('myFonts.TTF');
}

Этим мы привязываем имя шрифта с его местоположением

Затем это имя можно использовать в других стилях, например так для параграфа.

p {
font-family: myFonts;
}

и в теле страницы

<body>
Hello world ПРивет
<p>
Hello world ПРивет
</p>
</body>

Скриншот примера

Шрифт