Блог

Не много css магии и мы можем превратить тест в красивую типографию, опустив использование изображения. В этом уроке будем создавать различные веб-типографики, используя lettering.js плагин jquery методы css. Для некоторых примеров также добавим эффекты переходов, чтобы сделать вещи немного более интерактивным.

Работает во всех браузерах кроме IE

В большинстве случаев мы будем использовать lettering.js.

В дальнейшем будет восемь примеров.

Пример 1

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

Code

<h2 class="cs-text">
  <span class="cs-text-cut">Smooth</span>
  <span class="cs-text-mid">Operator</span>
  <span class="cs-text-cut">Smooth</span>
</h2>

Слово, которое будет отображаться на начальном этапе, будет дублироваться. (Заметим, что все эти примеры предназначены для декоративных целей и не могут быть "SEO дружественны").
Мы будем применять lettering.js плагин для слов, означающих, что у нас будет еще один пролет вокруг первого и последнего слова (дубликатов):

Code

$(".cs-text-cut").lettering('words');

Теперь давайте взглянем на стили. Прежде всего, мы дадим фиксированной ширины:

Code

.cs-text {
  width: 645px;
  margin: 120px auto 30px;
  cursor: default;
}

Первый слой пролета будут отображаться в виде блока элемент:

Code

.cs-text > span {
display: block;
}

Два внешних пролета с классом "cs-text-cut" будут иметь высоту 90px и мы установим скрытое переполнение. Идея состоит в том, чтобы сделать этот промежуток половинчатым. Мы также добавим переход на эти элементы:

Code

.cs-text-cut {
  width: 100%;
  height: 90px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

Давайте добавим границы к верхней и к нижней части:

Code

.cs-text-cut:first-child {
  border-top: 1px solid rgba(255,255,255,0.5);
}

.cs-text-cut:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.5);
}

Давайте установим размер шрифта и высоты строки внутренней службы в 180px, и добавим несколько стилей текста:

Code

.cs-text-cut span {
  display: block;
  line-height: 180px;
  color: rgba(255,255,255,1);
  font-size: 180px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  margin-top: 6px;
  font-family: 'Sancreek', cursive;
  text-shadow: 7px 2px 0 rgba(255,255,255,0.3);
}

Второй дубликат, который является последним подклассом в нашей структуре будет иметь свои службы "pulled up". Это покажет нижнюю часть слова:

Code

.cs-text-cut:last-child span {
margin-top: -84px;
}

Средний текст, который мы хотим показать при наведении курсора мыши будет позиционироваться абсолютно, и мы установим непрозрачность до 0. Он также будет уменьшено до 0,5:

Code

.cs-text-mid {
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  font-size: 50px;
  letter-spacing: 50px;
  line-height: 50px;
  text-indent: 20px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  color: rgba(255,255,255,0.3);
  text-shadow: 0 0 0 rgba(255,255,255,0.9);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s ease-in-out 0s;
}

Когда курсор мыши над словами, мы хотим, чтобы верхняя половина перемещалась вверх, так что мы будем переводить его на ось-Y и уменьшать его непрозрачность:

Code

.cs-text:hover .cs-text-cut:first-child {
transform: translateY(-25px);
opacity: 0.5;
}

В нижней половине будет перемещен вниз:

Code

.cs-text:hover .cs-text-cut:last-child {
transform: translateY(25px);
opacity: 0.5;
}

И, наконец, мы сделаем средний текст оживленным его прозрачностью и масштабированием. Обратите внимание, что мы добавили переход с задержкой 0,3 секунды. Это даст нам время, чтобы сначала переместить половину исходного слова вверх и вниз. Переход задержки нормальное состояние 0 секунд означает, что когда мы перемещаем мышь, оно исчезнет сразу:

Code

.cs-text:hover .cs-text-mid {
  transition-delay: 0.3s;
  opacity: 1;
  transform: scale(1);
}

И это первый пример. Давайте посмотрим второй.

Пример 2

Во втором примере мы будем преобразовывать и создавать полупрозрачные панели с буквами.

Code

<h2 class="cs-text" id="cs-text">Glass</h2>

Мы будем использовать буквы, чтобы отделить каждую букву от другой:

Code

.cs-text {
  width: 600px;
  margin: 70px auto 30px;
}

/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
  content: " ";
  display: table;
}

.cs-text:after {
  clear: both;
}
/* end clearfix hack */

аждый пролет будет плавающим с полупрозрачным фоном. Мы также будем применять тени, которые сделают хорошую толстую границу:

Code

.cs-text span {
  float: left;
  width: 120px;
  font-size: 120px;
  line-height: 230px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  cursor: default;
  font-family: 'Medula One', cursive;
  display: block;
  z-index: 1;
  position: relative;
  color: rgba(255,255,255,0.7);
  text-shadow: 5px 5px 2px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.05) url(../images/scratch-texture.png);
  box-shadow:
  -6px 2px 10px rgba(0,0,0,0.5),
  inset 0 0 0 20px rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  transform: skewY(8deg);
  transition: all 0.5s ease-in-out;
}

Мы будем использовать псевдо-класс :before того, чтобы создать другую вставку эффекта тени. Есть и другие способы сделать это, но давайте будем фантазировать smile

Итак, что мы делаем, чтобы растянуть ее, пока тень, которая 20px и дать ему белые тени окна и черной вставкой тень коробки (полупрозрачные RGBA):

Code

.cs-text span:before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  box-shadow:
  1px 1px 1px rgba(255,255,255,0.4),
  inset 1px 1px 1px rgba(0,0,0,0.1);
}

: После псевдо-класс будет маленькая точка на верхней части элемента:

Code

.cs-text span:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.2);
}

И, наконец, при наведении курсора мыши, мы будем переводить элемент и масштабировать его немного при изменении его текста, теней и повышения прозрачности значение:

Code

.cs-text span:hover {
  transform: translateY(-10px) scale(1.1);
  color: rgba(255,255,255,1);
  text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

Пример 3

Стиль-й третий пример полностью основан на уроке о создании царапин на плитке для аккуратного эффекта текста textuts.com. Это отличный учебник, так что проверим это, прежде всего, чтобы понять эффекты тени для царапин на плитке.
Мы постараемся создать такой же эффект с чистым CSS.

Code

<h2 class="cs-text">
To sing is to ♥love and affirm, to fly and soar, to coast into the hearts of the people who listen, to tell them that life is to live, that love is there, that nothing is a promise, but that beauty exists, and must be hunted for and found.
</h2>
<h3 class="cs-text">Joan Baez</h3>

Мы будем применять lettering.js на слова и буквы:

Code

$(".cs-text").lettering('words').children('span').lettering()

Это будет каждое слово в промежуточном классе, начиная с "слова" и каждую букву слова с определенным классом, начинающиеся с "символа".

Code

.cs-text {
text-align: center;
margin-top: 70px;
}

Слова будут отображаться как инлайн-блоки и мы дадим им боковые края:

Code

.cs-text span[class^="word"] {
display: inline-block;
margin: 0 15px;
}

Символы будут иметь царапаный стиль цвета фона и мы установим ширину и высоту для них. Текст тени создаст резной эффект для писем и несколько теней окна добавят глубину плитке:

Code

.cs-text span[class^="char"] {
  width: 90px;
  height: 100px;
  display: inline-block;
  background: #e4d095;
  color: #2a1f1b;
  border-radius: 4px;
  font-size: 60px;
  font-weight: 400;
  line-height: 100px;
  margin: 10px 3px;
  text-align: center;
  cursor: default;
  font-family: "Spinnaker", Arial, sans-serif;
  text-shadow:
  1px 1px 1px rgba(255, 255, 255, 0.9),
  0 -1px 1px rgba(255,255,255,0.2);
  text-transform: uppercase;
  box-shadow:
  1px 7px 15px rgba(0,0,0,0.8),
  inset 3px 0 2px rgba(255,255,255,0.4),
  inset 0 3px 0px rgba(255,255,255,0.5),
  inset -2px -3px 0px rgba(143,128,82,0.6);
}

Теперь, давайте добавим немного "случайности" на плитку, поворачивая каждый нечетный одной и каждый третий незначительно:

Code

.cs-text span[class^="char"]:nth-child(odd) {
  transform: rotate(2deg);
}

.cs-text span[class^="char"]:nth-child(3n) {
  transform: rotate(-3deg);
}

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

Code

.cs-text > span:nth-child(5) span,
h3.cs-text span[class^="char"] {
  color: #a62a19;
}

h3.cs-text span[class^="char"] {
  font-size: 40px;
  width: 50px;
  height: 60px;
  line-height: 60px;
}

Пример 4

Например вперед является стиль для типографского фона. Мы сделаем буквы большие и полупрозрачные, добавим тени текста:

Code

<h2 class="cs-text" id="cs-text">Nothing can be more hopeless than to attempt to explain this similarity
of pattern in members of the same class, by utility or by the doctrine
of final causes. The hopelessness of the attempt has been expressly
admitted by Owen in his most interesting work on the "Nature of Limbs."
On the ordinary view of the independent creation of each being, we can
only say that so it is; that it has pleased the Creator to construct all
the animals and plants in each great class on a uniform plan; but this
is not a scientific explanation.</h2>

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

Code

$("#cs-text").lettering();

Весь текст будет резиновым, мы дадим ему ширину 100%:

Code

.cs-text {
  width: 100%;
  text-align: center;
  margin-top: 80px;
}

Буквы будут полупрозрачными, выбирая цвета RGBA с низким значением непрозрачности. Мы также добавим тени текста с большим смещением:

Code

.cs-text span {
  font-family: 'Cantata One', 'Trebuchet MS', sans-serif;
  font-size: 180px;
  line-height: 150px;
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  display: inline-block;
  text-transform: uppercase;
  text-shadow: 15px 15px 0 rgba(0,0,0,0.2);
  cursor: default;
  pointer-events: none;
}

Так как мы хотим использовать этот фон аа, мы будем использовать указатель события: none. Это позволит сделать текст интерактивными / кликабельным:

Code

.cs-text span:nth-child(2n) {
  transform: rotate(-6deg);
  color: rgba(255,255,255,0.4); ;
}

.cs-text span:nth-child(3n) {
  transform: translateY(20px);
}

.cs-text span:nth-child(4n) {
  color: rgba(255,255,255,0.2);
}

.cs-text span:nth-child(3n+3) {
  transform: scale(1.4) rotate(5deg);
}

.cs-text span:nth-child(7n) {
  font-size: 110px;
}

.cs-text span:nth-child(12n) {
  font-size: 200px;
}

И это все, очень простой, но захватывающий текстовый эффект.