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

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 —  листинг тут

Форма и ее обработка в одном файле php

Форма и phpДля того чтобы результат обработки формы и сама форма была в одном файле чтобы не плодить файлы «обработчики», можно прописать использовать проверку на существование переменной в форме с помощью функции phpisset():

Пример:

1. Прописываем саму форму

<body>
<form action="one.php" method="POST">
<input type="TEXT" name="fio">
<input type="submit" value="Узнать">
</form>

2. Ниже прописываем код на PHP — сама проверка и обработчик формы

<?php if (isset($_POST['fio']))
{
//здесь прописываем код обработки формы
$str_out =$_POST['fio'] ;
$str_out=mb_strtoupper ($str_out, 'UTF-8');
echo $str_out
}
?>

В этом примере форма будет всегда.

Полный листинг примера формы и результата в одном файле

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<title> ФИО</title>
</head>
<body>
<form action="index2.php" method="POST">
<input type="TEXT" name="fio">
<input type="submit" value="Узнать">
</form>
<?php
if (isset($_POST['fio']))
{
//здесь прописываем код обработки формы
$str_out =$_POST['fio'] ;
$str_out=mb_strtoupper ($str_out, 'UTF-8');
echo $str_out
}
?>
</body>
</html>

 

Кнопка полностью на 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>