Awebdesign's Blog

The Expressive Web, все самые последние достижения HTML5 и CSS3 в реальном времени

Expressive Web - последние достижения HTML5 & CSS3

CSS3-анимацию можно посмотреть на сайте Expressive Web здесь.

Научиться делать покадровую CSS3-анимацию можно здесь.

Чтобы просматривать различные свойства CSS3, кликайте на пункты меню слева.

Когда откроете вкладку «CSS3 Media Queries» попробуйте поменять размер окна браузера — на маленьком размере вы должны получить бургер.

В CSS3 Shadows нужно нажимать на «лампочки», чтобы поменять направление тени солнечных часов.

CSS3 Transforms: после того, как бомба взорвется, потаскайте ползунки справа вверху. Первый искажает кусочки взорванной бомбы в двухмерном измерении. Второй крутит их в 3D (только сделайте кусочки нормального размера, чтобы было видно).

Кроме того в будущем мы сможем беспрепятственно вставлять аудио и видео на сайты, а также хранить информацию на клиентсой стороне. Web Storage — это почти как Cookies, только в отличие от них данные не высылаются на сервер при каждом обращении к сайту, не имеют ограничений в размере. Вы можете делать интерактивные игры, и вся получаемая от клиента информация (действия, количество шагов и пр.) будут сохраняться только посредством самого HTML.

Реклама

Покадровая анимация HTML5 и CSS3 — урок

(Перевод Виктории Шидловской статьи Louis Lazaris в Smashing Magazine — An Introduction To CSS3 Keyframe Animations)

Покадровая анимация CSS3 и HTML5

Наверное, вы уже слышали о CSS3-анимации. Спецификация была разработана пару лет назад и, как показывает время, становится технологией будущего. Это элегантный способ решить проблему анимации в вебе.

Продолжение статьи здесь.

Boilerplate — как собирать сайты на HTML5 уже сейчас!

HTML5 Boilerplate - собирай сайты на HTML5 сейчас!

Boilerplate — это BADASS HTML/CSS/JS template (думаю, все поняли :)), с помощью которого вы можете собирать полнофункциональные интерактивные сайты на HTML5 и с уверенностью пользоваться всеми тегами HTML5!

Раньше я писала о том, как делать сайты, чтобы они были на острие новых технологий для самых последних версий браузеров, а также для мобильных и тач-скрин устройств, но при этом хорошо интерпретировались старыми браузерами и нашим «любимым» IE.

Для каждого решения требовались свои уловки на ява-скрипте.

HTML5 Boilerplate содержит в себе, как я понимаю, все необходимые javascript-уловки, какие только могут быть, не нужно больше тратить часы и сутки на то, чтобы заставить сайт работать в Эксплорере.

Вот, что они пишут сами о себе:

Почему HTML5 Boilerplate это круто:

Кроссбраузерность (да-да, IE6 тоже);

HTML5-поддержка. Используйте любые тэги уверенно;

Оптимальное кэширование и компрессия для совершенного отображения сайта;

Лучшие установки по умолчанию;

Оптимизация для мобильных устройств;

Прогрессивное развитие и высокое качество деградации (то есть – все самое лучшее в новых браузерах и при этом в старых браузерах выглядит тоже прекрасно);

Специальные классы для IE для максимального контроля кроссбраузерности;

Управляемые .no-js и .js классы;

Хочешь написать тестовый сайт, но лень? Полностью готовый набор ждет тебя.

В общем, качать всем!

Горизонтальная прокрутка с ява-скрипт 4

Закончила свой сайт с горизонтальной прокруткой колесиком мыши и перетаскиванием – можете посмотреть и поскроллить здесь: http://awebdesign.ru

Сайт собран на основе урока Горизонтальная прокрутка с ява-скрипт 3, но так как использованы вместо текста картинки, к тому же эти изображения динамически меняют размер в зависимости от размеров окна браузера, то решила написать маленький тьютор по этому поводу.

Итак, смысл в том, что мы создаем список, пунктами которого являются изображения. И заставляем этот список прокручиваться горизонтально.

CSS

Стили для списка и его пунктов:

.in {
width: 7400px;
list-style: none;
padding: 0;
margin: 0;
}

.in li {
float: left;
margin: 0;
padding: 0;
}

Ширина списка класса in (7400px) – это ширина вашей горизонтальной страницы. К сожалению я не нашла способа динамически менять эту ширину в зависимости от суммы ширин всех изображений, возможно, вы найдете его сами. В противном случае нужно вручную настроить эту ширину в зависимости от количества изображений. Если, как в моем случае, изображения меняют свой размер динамически, то и ширина этого списка будет меняться, поэтому желательно тестировать страницу с максимальными размерами изображений, иначе последние в списке картинки «прыгнут» вниз. Если высота монитора не позволяет провести такой тест, оставляйте в ширине «запас».

jQuery

Для начала нужно подгрузить на страницу библиотеку jQuery и скрипт прокрутки:
(Ниже вы можете скачать исходные файлы вместе с ява-скриптами)
Скрипт, который нужно поставить в <header>:

<script charset="utf-8">
$(document).ready(function () {
$('#timeline').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function (event) {
$(this).data('down', false);
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}

}).mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 100);
}).css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
});

$(window).mouseout(function (event) {
if ($('#timeline').data('down')) {
try {
if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
$('#timeline').data('down', false);
}

} catch (e) {}
}
});

</script>

Timeline – это div, который содиржит список класса in. Именно этот див и прокручивается ява-скриптом.

HTML

Вкратце разметка выглядит таким образом:

<div>
<ul>
<li>
<img src="http://awebdesign.ru/img/grad.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#">
<img src="http://awebdesign.ru/img/origami_fish.jpg" class="source-image" alt="" />
</a>
</li>
<li>
<img src="http://awebdesign.ru/img/grad_mezhdu.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#" >
<img src="http://awebdesign.ru/img/origami_lily.jpg" class="source-image" alt="" />
</a>
</li>
</ul>
</div>

О том, как менять размеры изображения в зависимости от размеров окна браузера можете прочитать здесь:
Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

Скачать исходные файлы: http://awebdesign.ru/tutors/source_files.zip

Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

В комментариях пришел вопрос, можно ли динамически менять размер картинки в зависимости от размера браузера, как здесь: alexandergusev.com

Специально написала мини-тьютор, чтобы вы посмотрели, как это делается.

Пример здесь.

Попробуйте изменить размер браузера, и вы увидите, что размер картинки тоже меняется.

(Изображение в .png с прозрачностью, так что IE плохо его рендерит, с обычным прямоугольным изображением будет все в порядке в любом браузере.)

Итак, ява-скрипт динамического изменения размеров изображения:

<script type="text/javascript">
$(document).ready(function() {
var $winheight = $(window).height(); 

$(".source-image").attr({ height: $winheight });
$(window).bind("resize", function(){
var $winheight = $(window).height();
$(".source-image").attr({ height: $winheight });
});
});
</script>

Код очень простой. Класс .source-image относится к нашему изображению. Достаточно в коде HTML присвоить этот класс объекту img.

<img class="source-image" src="http://awebdesign.ru/tutors/img/fish.png" alt="" />

Не забудьте в header-е страницы прописать ссылку на jQuery, в моем случае ссылка на удаленный сервер:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 

type="text/javascript" charset="utf-8"></script>

Шпаргалка по CSS3 – список новых стилей

Это шпаргалка по CSS3, написанная специально для Smashing Magazine. Ссылка ведет на .pdf файл на их ресурсе. Новые стили можно использовать только для новых браузеров (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.) Список можно распечатать.

download the pdf (5 pages, 123 Kb)

CSS3 список свойств

Всплывающая панель на ява-скрипт и CSS3

(Перевод Виктории Шидловской урока Джона Филлипса на spyrestudios.com)

Все больше людей используют на своих сайтах всплывающие полупрозрачные панели, и это выглядит очень здорово. Кто-то размещает там дополнительную информацию, кто-то — форму логина и пароля, а кто-то — ссылки на социальную сеть.

Что мы будем делать:

Разметка HTML

Начнем с шапки документа. Здесь главное — ссылки на наш файл CSS и файл jQuery из библиотеки Google. Позже мы вернемся к шапке и пропишем код ява-скрипта.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Vertical Sliding Info Panel With jQuery</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
</head>
</html>

В теле документа мы создадим div и назовем его «container». Этот div будет содержать весь наш контент, Lorem Ipsum в данном случае. Пока что это не панель.

<div id="container">
	<h1>Vertical Sliding Info Panel With jQuery</h1>
		<h2>The Sliding Panel And Trigger Button On The Left
Have Absolute Positioning</h2>
<p>This is an example of simple page that's centered
and has a vertical sliding panel on the far left (try it! click on
the 'infos' tab that's on the left!). We used jQuery to create this
sliding panel (and CSS3 rounded corners because it looks cool)</p>
<p>
<a href="http://spyrestudios.com/
how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/"
title="How To Create A Vertical Info Panel With jQuery">Click here
to return to the tutorial on SpyreStudios</a></p>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh
imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare
accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum
fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare.
Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
	</div>
</div>

Дальше примемся за нашу всплывающую панель. Здесь добавим несколько параграфов, h3 и линков.

<div>
	<h3>Sliding Panel</h3>
	<p>Here's our sliding panel/drawer made using jQuery with the 
toggle function and some CSS3 for the rounded corners</p>
	<p>This panel could also be placed on the right. This could be 
particularly useful if, <a href="http://spyrestudios.com" 
title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

	<h3>A Little Something About Me</h3>
	<img src="images/jon_image.jpg" alt="Jon Phillips" />
	<p>My name's Jon, I'm a freelance designer, blogger, musician. 
I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>
<div>
	<div>
	<h3>Navigation</h3>
		<ul>
<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
		</ul>
	</div>

	<div>
		<h3>Social Stuff</h3>
		<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
		</ul>
	</div>
</div>
<div style="clear:both;"></div>

</div>
<a href="#">infos</a>

Завершим наш HTML-документ тэгами body и html.

CSS

Как вы можете видеть, наш CSS очень прост, добавлены только сругленные углы и кнопка trigger, которая запускает выезд панели. Заметьте также, что у панели и trigger-а абсолютное позиционирование по левому краю.

body {
background:#1a1a1a;
text-align:left;
color:#666;
width:700px;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

a:focus {
outline: none;
}

h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}

h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

img{
float: right;
margin: 3px 3px 6px 8px;
padding: 5px;
background: #222222;
border: 1px solid #333333;
}

p {
color:#cccccc;
line-height:22px;
padding: 0 0 10px;
margin: 20px 0 20px 0;
}

img {
border:none;
}

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

Если хотите поставить кнопку открытия панели и саму панель вправо, просто перепишите код, вместо

a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}

нужно написать так:

a.trigger{
position: absolute;
top: 80px; right: 0;
}

.panel {
position: absolute;
top: 50px; right: 0;
}

Также перенесите скругленные углы, вместо

border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;

нужно написать так:

border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;

Если вы хотите, чтобы trigger и панель оставались всегда видимыми при прокрутке окна, пропишите фиксированное позиционирование:

a.trigger{
position: fixed;
top: 80px; left: 0;
}

.panel {
position: fixed;
top: 50px; left: 0;
}

Чтобы изменить прозрачность панели, измените код здесь:

filter: alpha(opacity=85);
opacity: .85;

jQuery

Ну и, наконец, нужно ввести в действие ява-скрипт, иначе у нас кроме неработающей кнопки ничего не будет. Как мы уже поняли из разметки, кнопка имеет класс .trigger, а панель — класс .panel. Следующий код должен стоять прямо перед закрывающим тэгом вот так:


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" 
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});
</script>
</head>

Этот код будет сообщать браузеру о том, когда закрывать и открывать (toggle) панель, а также о том, когда панель активна. Благодаря этому зеленый значок плюса будет меняться на красный минуса.

Вы также можете скачать zip-архив со всеми необходимыми файлами этого урока по jQuery и CSS3

%d такие блоггеры, как: