fablee

Первый шаг

Сначала нужно добавить HTML-разметку.

<div class="tabslide">
<div class="tabs">
      <span class="tab" data-id="1">Шаг 1</span>
      <span class="tab" data-id="2">Шаг 2</span>
      <span class="tab" data-id="3">Шаг 3</span>
      <span class="tab" data-id="4">Шаг 4</span>

fablee

/*
==============================================
slideDown
==============================================
*/


.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

fablee

<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
   <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

html, body {
  height: 100%;
}

body {
  display: -webkit-box;

fablee

-o- — для браузера Опера;
-moz- — для Firefox;
-webkit- — для Google Chrome и Safari.
Ну а теперь давайте всё рассмотрим подробнее.

В данном случае мы будем создавать самый обычный блок с разрешением 200 на 100 пикселей, а потом уже прикреплять к нему анимацию.

HTML

Чтобы добавить такой блок на страницу, нужно просто добавить <div> с соответствующим классом, например:

fablee

@charset "UTF-8";

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {

fablee

                      15 эффектов для изображений (используем только CSS3)
     //*Перед тем, как приступить к созданию отдельных демонстраций, вот кусочек CSS, 
     который устанавливает базовые правила для изображений.*//
   
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

fablee

Список, разделенный линиями
Исходный код:
<style type="text/css">
ul.line-separated{
    background-color: blue;
    padding: 0;
    margin-left: 1em;
    color:#383838;
    }
ul.line-separated li{

fablee

Таблица символов
Коды символов для html.
Незабывайте, для стрелочек есть свои коды, и не надо нагружать пользователя картинками.(Лично мне приходилось видеть когда создаваличь картинки в место ← и →)
Часто используемые:
 	
неразрывный пробел
 	 	короткий пробел
 	 	длинный пробел
­		мягкий перенос
—	—	длинное тире

fablee

Ссылка ввиде картинки, как сделать так чтоб при наведении курсора на эту картинку, она исчезала и мы видели обыкновенную ссылку, средствами XHTML/CSS?

Надо использовать метод замещения текста картинкой, где картинка закрывает текст, путем присваивания ей (картинке) абсолютного позиционирования и поднимая её по оси z (position:absolute;z-index:100; ) . Так вот - идея проста. Поднимаем картинку, под ней у нас текст ссылки и при наведении на ссылку мышки (a:hover) картинка исчезает (display:none)
<style type="text/css">
.container a{
    text-align:center;
    display:block;
    position:relative;
    height:80px;
    width:80px;

fablee

<snippet>
	<content><![CDATA[
<!-- begin bla -->
<div class="bla">
	$2
</div>
<!-- end bla -->
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>di</tabTrigger>