Статьи

25.11.2012

CSS, Статьи, Трюки

Границы не на всю высоту в списке товаров

Последнее обновление: 27.11.2012.

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

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

20.11.2012 (обн. 19.12.2013)

CSS, Статьи, Трюки

Клевый эффект для текста из частиц на Canvas

Максим Усачев

Прикольный эффект для текста сделан с помощью элемента HTML5 canvas. Но это сделал не я. Идея принадлежит автору оригинала. Я просто нашёл его демо-страницу.

Обновление: Автором оригинала является Ruby on Tails. Я заметил, что демо-пример немного неисправен и производительность его слабая. Так что если кто-нибудь может аккуратненько подправить пример, поделитесь решением в комментариях.

17.11.2012 (обн. 19.12.2013)

CSS, Статьи, Трюки

Игра: Цветной понг на CSS3 и Сanvas

Максим Усачев

Очень простая игра в понг со случайным изменением цвета. Слабо выбить больше 50-и?;)

15.11.2012

HTML5, Статьи

«Блочные» Сcылки в HTML5

Екатерина

Одной из новых и захватывающих вещей, которые можно реализовать в HTML5 является возможность оборачивания ссылками блочных элементов.

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

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

13.11.2012 (обн. 14.04.2015)

CSS, Статьи, Трюки

Меню со всплывающими подсказками (Tooltips Menu) на CSS3

Максим Усачев

Меню со всплывающими подсказками

Меню со всплывающими подсказками (Tooltips Menu) на CSS3

06.11.2012

CSS, Статьи, Трюки

Анимированная типографика на CSS3

Максим Усачев

Каждая буква создана с помощью нескольких элементов HTML и каждая часть буквы будет иметь собственное объявление CSS-анимации, но с разными задержками. Это отзывчивая типографика. Лучше всего она будет смотреться на экранах с разрешением 1920px или 1000px и ниже. Типографика будет трансформироваться в том случае, если ширина экрана будет 1280px и 1024px.

HTML:

<!--[if lte IE 10]>
<style type='text/css'>
html body #typo-wrap {
  margin:0 auto !important;
  padding:10px;
}
</style>
<![endif]-->
<section id="typo-wrap">
	<h1><!--
	--><span class="char char-w collapsed">W<!--
		--><span class="part-1 bevel bevel-left-bottom"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-bottom-middle"></span><!--
	--></span><!--
	--><span class="char char-h collapsed">H<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-i collapsed"><span>I</span></span><!--
		--><span class="char char-t collapsed">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-e collapsed">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-s">S<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-p">P<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char char-c">C<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E <!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-small char-i clear">I</span><!--
	--><span class="char char-small char-s">S <!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-b clear">B<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-r">R<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char char-t">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-h">H,<br><!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-w collapsed clear">W<!--
		--><span class="part-1 bevel bevel-left-bottom"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-bottom-middle"></span><!--
	--></span><!--
	--><span class="char char-h collapsed">H<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-i collapsed"><span>I</span></span><!--
	--><span class="char char-t collapsed">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-e collapsed">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-s">S<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char same char-p">P<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char same char-c">C<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-e">E <!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-small char-i clear">I</span><!--
	--><span class="char char-small char-s">S <!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-f clear">F<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-r">R<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-d">D<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-right-top bevel bevel-right-bottom"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-o">O<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top bevel-left-bottom"></span><!--
		--><span class="part-4 bevel bevel-right-top bevel-right-bottom"></span><!--
	--></span><!--
	--><span class="char char-m">M<!--
		--><span class="part-1"></span><!--
		--><span class="part-2 bevel bevel-top-middle"></span><!--
		--><span class="part-3 bevel bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="blink">.</span>
	</h1>
	<div class="clear"></div>
</section>

02.11.2012

CSS, Статьи, Трюки

Непростая стилизация строк таблицы и непонятный баг в IE9

Максим Усачев

Несколько дней назад, у одной моей знакомой верстальщицы возникла задачка по вёрстке, которая касалась необычного раскрашивания строк таблицы при наведении. Во время того, как рассматривались всякие решения, был выявлен странный баг в IE9.

В общем, в этом посте я хочу поделиться найдненными решениями (а возможно узнать и лучше), а заодно и непонятным багом, в надежде что кто-нибудь из заинтересовавшихся комментаторов поможет мне понять его природу.

30.10.2012

CSS, JavaScript, Статьи, Трюки

Плавающий текст на CSS3 и JavaScript

Максим Усачев

Плавающий текст! В основном CSS-анимации, легко реализуемые на чистом CSS, всё же не могут запросто изменить целое слово, сделав его плавающим. Хорошо работает в вебкитах, в других похуже…

HTML:

    <!-- try changing the text -->
    <p>Floating</p>

28.10.2012

F.A.Q., Статьи

Лень — двигатель регресса: эффективный поиск ответов на вопросы

Александр Старцев

Приветствую, сообщество!

Перед вами — очередная статья, рассчитанная на новичков, у которых часто возникает масса вопросов, связанных с вебом. Речь пойдёт о том, как эффективнее всего получать ответы на эти самые вопросы.

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

Мой основной посыл — учитесь думать и решать самостоятельно! Только таким образом можно добиться действительно значимых результатов в любой деятельности. О том, как и с помощью чего развить в себе это незаменимое качество, я и расскажу.

23.10.2012

CSS, Статьи, Трюки

Летающее меню на CSS3

Максим Усачев

Летающее меню на CSS3.

HTML:

<div class="fly-menu">
	<div class="fly-hover"></div>
		<ul>
			<li class="fly-item home"></li>
			<li class="fly-item about"></li>
			<li class="fly-item setting"></li>
			<li class="fly-item portfolio"></li>
			<li class="fly-item mail"></li>
		</ul>
		<div class="fly-main"></div>
	</div>
</div>

21.10.2012

CSS, Статьи, Трюки

Земля и Луна на CSS3

Максим Усачев

Земля и Луна на CSS3. Чтобы увидеть луну, нужно немножко подождать.

HTML:

<div id="moon_holder">
	<div id="moon_back"></div>
	<img  src="http://lab.legomushroom.com/___img/moon2.png"   id="moon">
	<div id="moon_ball"></div>
</div>

<div id="center" align="center">
	<div id="earth_holder">
		<div id="earth_ball"></div>
		<div id="earth_glow"></div>
		<div id="earth"></div>
	</div> 
</div>

11.10.2012 (обн. 31.03.2021)

F.A.Q., Статьи

Путь верстальщика

Максим Усачев

279

Основано на реальных событиях…

Будучи администратором одного из известных форумов, я часто сталкиваюсь с тем, что начинающие веб-технологи не знают, с чего начать своё обучение, какую читать литературу и в каком направлении им двигаться. Периодически мне доводится слышать один и тот же вопрос — «Как стать хорошим верстальщиком?». Краткий ответ может оставить у новичка ещё больше вопросов, поэтому одного или нескольких постов с ответами на форуме недостаточно, чтобы полностью описать все необходимые, на мой взгляд, пункты.

В этой статье я решил исправить ситуацию и описать свой путь обучения, который считаю наиболее правильным и эффективным.

09.10.2012

CSS, Статьи

«Старый» и «новый» Flexbox

Максим Усачев

От редакции css-live.ru: Flexbox — один из самых ожидаемых «раскладочных» модулей CSS3, но с непростой судьбой. Мы уже писали о нелегких приключениях этой спецификации. В последнее время интерес к этому механизму особенно вырос, благодаря тому, что новый синтаксис уже поддерживается в Chrome 21+ и вот-вот начнет поддерживаться в Опере. Но изменения спецификации привели к огромной путанице как в учебных материалах, так и в справочниках о браузерной поддержке, и разобраться, где о какой редакции идет речь — об актуальной или об устаревшей — очень непросто. Надеемся, что эта статья Криса Койера поможет вам сориентироваться во всей этой путанице.

Перевод статьи “Old” Flexbox and “New” Flexbox с сайта css-tricks.com, автор Крис Койер, переводчик Илья Стрельцын

7 августа 2012 г.

Просто ради того, чтобы прояснить для всех: «Flexbox» (точнее, CSS Flexible Box Layout Module — модуль «гибкой» раскладки) претерпел за последних три года много изменений. Изменений как в спецификации, так и в том, что реализовано в браузерах.

06.10.2012

CSS, Статьи, Трюки

Размытый текст

Максим Усачев

Сделать текст размытым с помощью простого CSS кода не так уж и сложно. Весь трюк заключается в свойстве text-shadow и использовании свойства transition, делающее плавную анимацию размытого текста. В этом примере используются две тени (одна из которых сдвигается вниз и вправо, а другая влево и вверх), разделяя их запятой. Кроме того, цвет текста должен быть таким же, как и цвет шрифта, чтобы текст выглядел размытым. Иначе он будет выглядеть как тень.

28.09.2012 (обн. 22.12.2021)

CSS, Статьи

Обзор: Инлайновый контекст форматирования

Максим Усачев

Эта книга, написанная создателями css-live.ru (Максимом Усачёвым aka psywalker и Ильёй Стрельцыным aka SelenIT), посвящена одной из самых важных и вместе с тем самой загадочной, неизученной, неоднозначной и полной неочевидных сюрпризов стороне действующей спецификации CSS — визуальному форматированию текста.

green к Убираем сдвиги в верстке наложением…: Статья не о чем,контент всегда сдвигается как не крути,особенно…

SelenIT к Подробно о размещении элементов в…: Как вариант, раз картинки выводятся циклом, можно этим же…

Евгений к Подробно о размещении элементов в…: Добрый день! Я только учусь всему и делаю для…

Игорь к Доступ к CSS-переменным и их…: F в области видимости. Присвоенное изменение будет применено только…

1 к Еженедельная подборка красивых эффектов на CSS/SVG/JS…: "Красивый рисунок из линий" нет