Нередко творческие и поистине замечательные дизайнерские решения остаются неизвестными, потому что мы, дизайнеры просто не замечаем их. Будучи занятыми в своих собственных проектах, мы иногда, интуитивно пытаемся понять, за сложным нагромождением кода других дизайнеров, как они смогли осуществить свои дизайнерские идеи. На самом деле, просто рассматривая код других разработчиков, мы можем многому научиться у них, можем найти интересные идеи и повысить качество нашей работы.
Итак, давайте взглянем на 10 полезных CSS и JavaScript техник и примеров кода, которые могут оказаться полезными для вашего следующего проекта. Для понимания статьи вам понадобятся базовые знания CSS и JavaScript.
1. Встроенное в контент изображение
Читая блог или онлайн-статью, мы заметили, что большинство картинок, помещенных в тексте записи, зачастую выглядят скучно или неинтересно.
Между тем, нет ничего сложного в создании привлекательных иллюстраций, которые сохранят строгий стиль дизайна и фирменного стиля и будут органично смотреться с содержанием вашего сайта. UXBooth предлагает простой и элегантный пример этого приема (прокрутите вниз пока не увидите гориллу). Обратите внимание на скриншот ниже, насколько естественно изображение Гориллы смотрится в контенте страницы.
Как это делается?
На первый взгляд горилла выглядит как фоновое изображение, позиционированное по центру колонки с контентом, с помощью CSS или JavaScript (или их комбинации); однако это только CSS-решение. Элементу div, в котором находится изображение гориллы (простое .png-изображение), назначается правое обтекание. Сразу после этого в HTML следует параграф и нумерованный список. У блока «с гориллой» назначен левый отступ в 47px, благодаря которым тэги p и ol, находящиеся в контенте не перекрывают изображение, обеспечивая тем самым хороший визуальный интервал и общий поток страницы.
HTML
<h3>Contest Details</h3>
<div class="imagery"">
<img src="imagery.png" width="205" height="400" alt="Imagery" />
</div>
<p>...the introductory paragraph...</p>
<ol>
<li>...various bullet points went here...</li>
</ol>
CSS
.imagery {
/* The image is floated to the right */
width: 205px;
float: right;
/* The image is positioned precisely,
by pushing it 20px from the right border */
margin-right: -20px;
/* The image is pushed away from the text
(to the right) with a left margin of 47px */
margin-left: 47px;
}
2. Типографские трюки
CommandShift3 публикуют hot-or-not списки сайтов, используя интересный типографский прием – отображение результатов голосования для каждого сайта, которому вы отдали свой голос. Очевидно, что этот эффект, достигается только с помощью CSS.
Как это делается?
Каждая строка с результатом содержит «выигрышный процент»-div + скриншот, точно также как «проигрышный процент » + скриншот. Каждый из процентных блоков имеет значительно меньшую ширину, чем им необходима, для отображения полного текста. Кроме этого, применяется CSS-атрибут overflow: hidden, чтобы скрыть ненужное содержимое.
Далее представлен весь код, необходимый для блока «выигрышный процент». Блок «проигрышный процент» делается точно также, за исключением отрицательных полей, чтобы, расположить процент после миниатюры проигравшего сайта.
HTML
<div class="bar">
<div class="screen-left loser choice">
<div class="pct">
<div>46<span>%</span></div>
</div>
<div>
--the image goes here--
</div>
</div>
<div class="screen-right winner">
<div>
--the image goes here--
</div>
<div class="pct">
<div>54<span>%</span></div>
</div>
</div>
<div class="legend">
--You voted for text goes here--
</div>
</div>
CSS
.result .pct {
float:left;
height:80px;
margin:0;
overflow:hidden;
padding:0;
white-space:nowrap;
width:95px;
}
.result .screen-left .pct div {
margin:28px 0 0 10px;
float: left;
}
.result .loser .pct div {
color:#84C3FF;
}
.result .pct div span {
display:inline;
font-size:55px;
}
.result .screen-right .pct div {
margin:28px 0 0 -8px;
float: left;
}
.result-first .pct div {
color:#FFFFFF;
}
3. Информационные тултипы
31three.com – версия сайта myfamily.com, интересно использует иконки, разбросанные по всему тексту страницы. Если вы подведете к иконке календаря, отобразится информационный тултип, где можно увидеть, как будет выглядеть ваш потенциальный календарь, когда вы зарегистрируетесь на myfamily.com. Обратите внимания на эффект прозрачности и стрелку на левой стороне всплывающего блока.
Как это делается?
Когда пользователь подводит мышь к иконке календаря, с помощью JavaScript, отображается скрытый div, который содержит прозрачное .png-изображение. Когда мышь отводят от иконки календаря, div снова становится невидимым. Этот частный пример не использует JavaScript-фреймворки, такие как JQuery или Prototype, вместо этого он использует две простых функции, скрытия и отображения div-а, соответственно.
Пожалуйста, запомните, что этот код не является хорошим примером, поскольку он не разделяет функциональность JavaScript от стилей сайта. Вы никогда не должны включать JavaScript события в качестве линейных атрибутов, и этот пример является просто быстрым прототипом. Лучше вынести код JavaScript в отдельный .js-файл, а затем внедрить на страницу, используя тэги <script>.
HTML
<div id="hover" onmouseover="showLayer('image')" onmouseout="hideLayer('image')"> </div>
<div id="image" style="visibility: hidden;">
<img src="img/event_hover.png" alt="image" height="" width="">
</div>
JavaScript
function showLayer(layerName, shadowLayerName)
{
if (document.getElementById) // Netscape 6 and IE 5+
{
var targetElement = document.getElementById(layerName);
targetElement.style.visibility = 'visible';
}
}
function hideLayer(layerName)
{
if (document.getElementById)
{
var targetElement = document.getElementById(layerName);
targetElement.style.visibility = 'hidden';
}
}
4. Подсветка продукта
Basecamp, продукт компании 37signals, использует подсветку для выделения самого популярного тарифного плана, для привлечения внимания, и увеличения количества переходов по нему, посетителей и клиентов. Специальный тарифный план, также имеет бонус в виде JavaScript тултипа, для отображения более детальной информации об особенностях выделенного продукта. Обратите внимание, что каждая ссылка имеет свой собственный тултип, который появляется с правой стороны, при наведении мыши на ссылку.
Как это делается?
Команда 37signals, использует Prototype.js и CSS для получения эффекта тултипа, в то время как подсветку особого тарифного плана, они реализуют на чистом CSS. Каждый план расположен в собственном div-е, с назначенным классом «short»; выделенный план заменяет класс «short», классом «tall».
Div-ы, расположенные справа и слева от подсвеченного тарифного плана, имеют дополнительные CSS-стили, для отображения теней на их правой и левой стороне. Это создает впечатление, что выделенный тарифный план возвышается над страницей. JavaScript написанный с использованием prototype.js , обрабатывает наведение мыши, для каждой ссылки выделенного тарифного плана. При наведении мыши на ссылку, появится соответствующий ей тултип, в том время как все остальные тултипы будут скрыты.
HTML (для выделенного тарифного плана)
<div class="tall">
<h1><a href="https://signup.projectpath.com/signup/Plus">Plus</a></h1>
<h2>$49/month</h2>
<h3>Most popular plan</h3>
<ul class="highlight" style="margin-top: 12px;">
<li>
<a href="#" onclick="return false" class="hover_target" hover_container="users_bubble"><strong>35</strong> projects</a>
<span class="hover_container" id="users_bubble">
<div class="bubble hover_target"><div class="wrapper"><div class="content"><div class="inner">
<div class="arrow"></div>
<h2>What are active projects?</h2>
<p>..Content for the tool tip...</p>
</div></div></div></div>
</span>
</li>
...code repeats for all product bullet points...
</ul>
<a href="https://signup.projectpath.com/signup/Plus" onClick="return ConversionCount()"><img src="/images/btn_signupchart_large.png" width="113" height="45" alt="Sign Up" />
</div>
CSS
body.signup4 div.tall {
background-color:#FFFFFF;
border:3px solid #3671A1;
float:left;
font-family:helvetica,arial,sans-serif;
height:310px;
padding:8px 10px 10px;
text-align:center;
width:220px;
}
body.signup4 div.tall h1, body.signup4 div.tall h1 a {
color:#000000;
font-size:42px;
line-height:1em;
margin:0;
padding:0;
text-decoration:none;
}
body.signup4 div.tall h2 {
color:#000000;
font-size:24px;
font-weight:normal;
margin:0 0 2px;
padding:0;
}
body.signup4 div.tall h3 {
border-bottom:1px solid #CCCCCC;
color:#4582B5;
font-size:16px;
font-weight:bold;
margin:0;
padding:0 0 4px
text-transform:uppercase;
}
body.signup4 a.hover_target {
border-bottom:1px dotted #888888;
color:#64503F;
margin-left:6px;
text-decoration:none;
}
body.signup4 div.tall li strong, body.signup4 div.short li strong {
color:#C33700;
}
JavaScript
37Signals создали специальный класс HoverObserver (смотрите .js-сниппет), который использует функциональность prototype.js. Помните, что существуют и другие способы достижения такого же эффекта.
5. Скользящее меню
Раздел портфолио на сайте Clear Focus Designs содержит симпатичное меню с правой стороны страницы, которое последует за вами, если вы начнете прокручивать страницу. Это скользящее меню с использованием JQuery и CSS, довольно эффективный способ отобразить большое количество информации на странице и удобно расположить навигацию для посетителей сайта.
Как это делается?
Эта страница использует плагин JQuery, scrollFollow, который позволяет указанному блоку перемещаться по странице, если пользователь прокручивает страницу. В примере Clear Focus Design, блок с правым меню, передан в качестве параметра к плагину, для перемещения по странице.
HTML
<ul id="sites">
<li><a href="#copperStone">CopperStone Partners<br />
<span class="projectDesc">Development</span></a>
</li>
<li><a href="#vmg">Visionary Marketing Group<br />
<span class="projectDesc">Development</span></a>
</li>
...code repeats for all menu items...
</ui>
JavaScript
$( document ).ready( function ()
{
$( '#ourWork' ).scrollFollow(
{
speed: 1000,
easing: 'linear'
}
);
}
);
6. Авторские отметки
Расположение аватара рядом с текстом комментария, обычная практика. UxBooth (опять же) пошли дальше, и реализовала выделение комментариев цветом, позволив пользовательскому аватару находится за границей его/ее комментария к статье. Это позволяет пользователю быстро просмотреть комментарии и узнать, кто опубликовал ответ на этой странице. UxBooth использует этот метод немного иначе, поскольку статья написана несколькими авторами. Использование метод отметок помогает пользователям определять, какой автор, какую часть статьи написал.
Как это делается?
На сайте UxBooth, каждый автор имеет свой собственный div, с именем класса после слова «author». Например, автор Andrew, имеет авторский div с классом «author andrew». Класс «author» устанавливает базовый стиль, который является общим для всех авторских комментариев. Div расположен в документе, позиционирован как relative, в общем потоке документа.
Внутри div-а находится картинка с классом «avatar». Класс «avatar» позиционирован абсолютно, внутри относительно-позиционированного родительского элемента. У картинки установлены следующие координаты: top: 0, left: -54px. Проще говоря, этот прием выталкивает картинку за границу колонки с контентом и располагает ее поверх контейнера с фоновым цветом/изображением.
HTML
<div class="matt review-quote"> <p>...The user's comment went here...</p> <p><img class="avatar" src="/images/matt.gif" alt="Matthew Kammerer"></p> </div>
CSS
div#ux-booth div#content div.matt.review-quote {
border-color:#FF9F26;
}
div#ux-booth div#content div.review-quote {
border-left:6px solid #D8C9A1;
margin:0 -21px 0 -24px;
padding:0.5em 21px 1.5em 20px;
position:relative;
}
div#ux-booth div#content div.matt.review-quote img.avatar {
border-color:#CC7200;
}
div#ux-booth div#content div.andrew.review-quote img.avatar{
-moz-border-radius-bottomleft:9px;
-moz-border-radius-topleft:9px;
background:#888888 none repeat scroll 0 0;
border:4px solid #4B6500;
left:-54px;
position:absolute;
top:0;
}
7. Макет архивной страницы
Warpspire используют свой подход к формированию страницы с архивами. Вместо длинного списка, они решили представить текст в виде колонок, расположенные под названием каждого архивного месяца.
Как это делается?
Каждая запись архива содержит элемент h3 и тэг p, внутри элементов списка li. Каждому четному элементу списка li, назначен float: left, каждому нечетному – float: right. Вот так просто.
HTML
<div class="section-heading-small">
<h2>February 09</h2>
</div>
<ul class="archives">
<li class="odd">
<h3>...title of archived article...</h3>
<p>...summary and read more link for article...</p>
</li>
<li>
<h3>...title of archived article...</h3>
<p>...summary and read more link for article...</p>
</li>
</ul>
CSS
ul.archives li.odd {
clear:both;
float:left;
padding-right:20px;
}
ul.archives li {
float:right;
font-size:11px;
list-style-type:none;
margin:0 0 20px;
padding:0;
width:270px;
}
8. Прозрачные Округленные Ролловеры
Это пример другой архивной страницы, на этот раз от Particletree, которые используют прозрачные png в качестве фонового ролловера заголовка статьи.
Как это делается?
Каждый заголовок статьи, размещен внутри элементов h3, с якорем (a) внутри. Тэгу a назначено прозрачное .png-изображение в фоне, имеющее определенное свойство background-position, которое изменяется при наведении мыши, так же как background-color.
.png-картинка, позиционируется по правой стороне и располагается поверх изображения дерева. Цвет фона, заполняющий пространство между ними, создает иллюзию 3D (блок с контентом визуально отображается над картинкой с деревом). Каждая ссылка к тому же использует CSS-метод для округления углов (используется –moz-border-radius).
HTML
<div class="red headline">
<h3>
The Importance of Design in Business
<cite><b>By Chris Campbell</b> · Comments (<strong>15</strong>) · August 14th</cite>
</h3>
</div>
...code repeats...
CSS
#features .red a:hover {
background-position: 498px -30px;
}
#features .red a:hover{
background-image:url(/images/fadetree.png);
background-repeat:no-repeat;
}
#features[id] h3 a {
height:auto;
min-height:66px;
}
#features h3 a {
-moz-border-radius-bottomright:30px;
-moz-border-radius-topleft:30px;
font-size:210%;
height:66px;
padding:11px 15px 3px 105px;
}
.red a:hover, a.red:hover {
background:#5E2510 none repeat scroll 0 0;
color:#FFFFFF;
}
.red a, .red cite strong {
color:#843418;
}
h3 a {
display:block;
text-decoration:none;
}
9. Смешивание Flash и CSS
На домашней странице HunterBoot.com, расположено удивительное черно-белое изображение. Эта картинка часть флэш-ролика, который содержит не только картинку, но еще и симпатичные hover-эффекты у списка ссылок в нижней части макета. Для того чтобы понять о чем идет речь, взгляните на скриншот, ниже. Когда вы подводите мышь к ссылкам одной из четырех колонок ниже основного изображения, вы получаете красивый анимированный ролловер в фоне этой колонки.
Как это делается?
На первый взгляд может показаться, что используется какой-нибудь плагин к JQuery или что-то подобное. На самом деле это чисто CSS-решение, которое использует флэш-элементы для hover-эффекта. Этот метод начинается с разметки. Есть общий div, который содержит флэш-ролик, затем четыре отдельных div-а, по одному на каждую секцию.
Эти четыре div-а содержат заголовок, а затем список, содержащий индивидуальные ссылки. Основной div, позиционирован относительно своего родителя. Эти четыре ссылки, позиционированы абсолютно, внутри основного, содержащего блока, который позиционирован относительно. Благодаря этому ссылки располагаются поверх флэш-ролика. Когда мы подводите мышь к одной из четырех колонок, включается анимация флэш-ролика, потому что мышь находится точно над ним. Поскольку ссылки также расположены поверх флэша, вы можете кликать по ним, без появления неприятных побочны эффектов.
HTML
<!-- the flash container -->
<div id="featurePanelHomeFlashBoxCntr">
...the flash movie is inserted here via SWFObject...
...it's important to note that the .swf's wmode is set to transparent...
</div>
<!-- the product category links -- >
<div class="homeFlashListFun">
<ul>
<li><a href="/product/link/goes/here" >Link Text</a></li>
...repeat li's for each link
</ul>
</div>
<div class="homeFlashListSport">
<ul>
<li><a href="/product/link/goes/here" >Link Text</a></li>
...repeat li's for each link
</ul>
</div>
<div class="homeFlashListWork">
<ul>
<li><a href="/product/link/goes/here" >Link Text</a></li>
...repeat li's for each link
</ul>
</div>
<div class="homeFlashListKids">
<ul>
<li><a href="/product/link/goes/here" >Link Text</a></li>
...repeat li's for each link
</ul>
</div>
CSS
.featurePanelHomeFlashBox { margin: 0px; padding: 0px; float: left; height: 528px; width: 720px; position: relative; }
#featurePanelHomeFlashBoxCntr { width: 720px; height: 528px; position: absolute; top: 0px; left: 0px; background: #ffffff; z-index: 300; }
---This chunk of CSS is repeated for each of the lists, with the difference being the positioning of the ul---
.homeFlashListFun ul { position: absolute; top: 380px; left: 15px; z-index: 599; width: 100px; background: transparent; list-style: none; list-style-image: none; list-style-type: none; margin: 0px; padding: 10px 0px 0px 0px; }
.homeFlashListFun ul li { margin: 0px; padding: 0px 0px 6px 0px; background: transparent; text-decoration: none; line-height: 1em; }
.homeFlashListFun ul li a { text-decoration: none; color: #999; font-size: 0.95em; letter-spacing: -0.00em; background: transparent; }
.homeFlashListFun ul li a:hover { text-decoration: underline; color: #bf0000; }
10. График популярных меток
Oqilvy, для отображения самых популярных меток, с графиком в фоне (прокрутите страницу вниз, чтобы увидеть «Top 5 Tags»).
Как это делается?
Список меток это простой нумерованный список, каждый элемент списка имеет встроенный стиль с жестко заданной шириной (не самый лучший прием кода). Похоже, что график формируется на сервере, а затем выводится в линейный элемент. Oqilvy использует PHP, но этот код может быть выполнен на любом серверном языке, или даже на клиентском JavaScript. Каждому из элементов li, назначен свой фоновый цвет, и поскольку они все имеют разную ширину, результат имеет вид графика.
HTML
<ol class="transGreen">
<li style="width: 242px">
<a href="" style="display:block;width:100%;color:#fff" class="tag tag_1">work</a>
</li>
<li style="width: 216px">
<a href="" style="display:block;width:100%;color:#fff" class="tag tag_2">philosophy</a>
</li>
<li style="width: 153px">
<a href="" style="display:block;width:100%;color:#fff" class="tag tag_3">agency</a>
</li>
<li style="width: 104px">
<a href="" style="display:block;width:100%;color:#fff" class="tag tag_4">culture</a>
</li>
<li style="width: 77px">
<a href="" style="display:block;width:100%;color:#fff" class="tag tag_5">maslow</a>
</li>
</ol>
CSS
#top5 li a.tag {
padding: 1px 5px;
margin-bottom: 2px;
color: #fff;
text-transform: uppercase;
font-weight: normal;
}
#top5 li a.tag:hover { background: #000; }
.tag_1 { background: #c12; }
.tag_2 { background: #990000; }
.tag_3 { background: #ee6666; }
.tag_4 { background: #ee2222; }
.tag_5 { background: #cc6666; }
Перевод статьи «10 Useful CSS/JS-Coding Solutions For Web-Developers«, автор Justin Johnson