Часто творческие и по-настоящему замечательный дизайн solutions остаться неизвестным, потому что мы, дизайнеры, просто игнорировать их.
Будучи заняты своими собственными проектами, мы иногда пытаемся понять интуицию сзади (наверное) сложным и суматоху код других дизайнеров, чтобы понять, как им удается реализовать частности дизайнерские идеи.В самом деле, просто наблюдая код других разработчиков, мы можем многому научиться от них, мы можем найти интересные идеи и улучшить качество нашей work.
За последние месяцы we’ посетили обращать более пристальное внимание на интересную методов проектирования и кодирования решений и пытался понять, как каждая из этих работ решения и как они могут воспользоваться другими дизайнерами и разработчиками.Такие конструкции часто трудно найти, так что было бы здорово, если бы вы могли предложить некоторые решения, которые стоит изучить подробнее – we’! Будем, конечно, рассматривать их в наших следующих сообщений
Так let’ возьмем более близкий взгляд на 10 полезных CSS & Javascript методы и кодирования solutions которая может оказаться полезной для Вашего следующего проекта.Вы должны иметь по крайней мере базовые знания CSS и JavaScript, прежде чем читать весь article.
Вы можете быть заинтересованы в следующих связанные должности:
- 5 Полезные кодирования решений для дизайнеров и Developers
- 7 принципов чистого и оптимизированные CSS Code
- 8 простых способов улучшить типографику в вашем CSS-Designs
- Фиксированные Жидкость против против Упругие Layout: что это правильный выбор для Вас
1.Инлайн-содержимое Imagery
При просмотре сообщения в блоге или интернет-статье, мы обычно склонны считать, что большинство фотографий, которые “ dropped” в story’ с фактическим содержанием, часто представлены в скучной или мягкий manner.
Однако, на самом деле довольно легко создать привлекательное содержание imagery, которая поддерживает сильное чувство дизайна и брендинга, но все же удается течь естественно с содержанием вашего сайта. UXBooth обеспечивает чистый и элегантный пример этого метода (прокрутите вниз, пока не увидите серебряная).На скриншоте ниже, обратите внимание, как Silverback ‘ имидж сидит естественно-лайн и в потоке с содержанием на page.
UxBooth’ S встроенного содержимого изображений в Action
Как это делается
На первый взгляд выглядит как серебряная фонового изображения, которые были расположены в центре содержания колонки с CSS или JavaScript (или комбинацию из двух), однако, это чистое решение CSS.DIV упаковки образ серебряная (простой . PNG-image) сплавляется с правой стороны.Сразу после этого в HTML приходит пункта и упорядоченный список.“ silverback”-дел имеет левый край 47px который держит тег р и ПР tag’ с содержанием от наложения изображения, что обеспечивает хороший визуальный интервал и общую страницу flow.
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.Типографские Tricks
CommandShift3, самопровозглашенный горячей или не-веб-сайтов, использует интересный трюк типографских для отображения результатов голосования для каждого веб-сайта, в котором вы подали голос.Очевидно, что этот эффект достигается использованием только CSS.
Nice типографских эффектов, чтобы показать процент votes
Как это делается
Каждая строка содержит результате “ наградами percentage”-дел скриншот, а также “ потери percentage”-дел скриншот (изображение ниже, должны прояснить, что имеется в виду).Каждый из блоков проценты получает ширину, что немного меньше, чем ширина оно должно отображать ее полный текст.Кроме того, атрибут __ CSS 3 | переполнения: hidden применяется, чтобы скрыть содержимое, которое не needed.
Это весь код, необходимый для “ наградами percentage”-див.“ потери percentage”-дел получает тот же кусок кода с добавлением отрицательной маржи, чтобы казалось, скользит за потери site’ миниатюр с.
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.Встроенный информационный Overlays
Это 31three.com версия myfamily.com имеет интересную использование икон пронизывают тело текста.Если вы выбросили на значок календаря информационного наложения (очень похоже на подсказку) отображается – последняя отображается графическая о том, что ваш потенциальный календаре будет выглядеть, когда вы подписываете с myfamily.com.Обратите внимание на эффект прозрачности и стрелки на левой стороне появляются block.
Как это делается
При наведении курсора на значок календаря, JavaScript используется, чтобы показать скрытые DIV, который содержит . Прозрачного PNG-image.Когда мышь уходит от значка календаря, дел скрыт снова.Этот частный пример doesn’ т использовать рамки JavaScript, как JQuery или Prototype, вместо этого он использует два пользовательских функций, скрывать и показывать DIV accordingly.
Пожалуйста, обратите внимание, что этот код не adher хорошей практики кодирования, так как он не отдельная функция JavaScript с стиль сайта.Вы должны никогда не включают Javascript событий, как встроенные attributes и этот пример является довольно быстрый прототип.Это лучше для инкапсуляции кода JavaScript в одном JS-файла и вставить его на веб-страницу с помощью <. Script>-тегов.Подробнее читайте в нашей статье JQuery: примеры и лучшие Practices
.
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.Продукт Highlighting
Basecamp, 37signals продукта, выбирает выделите ее самый популярный продукт plan для того, чтобы обратить на него внимание и, надеюсь, создать больше переходов посетителей в клиентов.Рекомендуемые плана товар, также имеет дополнительный бонус в размере Javascript tooltips предложить более подробно выделенные характеристики продукта.Обратите внимание, что каждое звено имеет свою подсказку, которая появляется на правой стороне, когда текстовая ссылка является hovered.
Популярные Планы продукт для Basecamp
Как это делается
Команда 37signals решили использовать Prototype.js и CSS для достижения подсказка effect, опираясь на чистом CSS, чтобы выделить признакам плане продукт.Каждый из планов заключается в ее собственных дел, с классом “ short”;. Выделенный план заменяется коротким класса с классом “ tall”
Дивы слева и справа от выбранного плана имеют дополнительные классы CSS к ним добавляются обеспечить тень на левой и правой сторонах рук, чтобы создать видимость, что показанный план роста на этой странице.Javascript, написанные с использованием prototype.js, слушает для каждого из компонентов продукта, чтобы быть завис над.Когда функцияпарили над, подсказки все скрытое, а затем соответствующие подсказка shown.
Продукт план подсказки в Action
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="http://media.smashingmagazine.com/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-snippet), который использует функциональность prototype.js.Обратите внимание, что есть и другие способы для достижения этого же effect.
5.Раздвижные Menus
Раздел портфолио на четкую направленность Designs содержит хорошее меню по правой части страницы, которая следует за вами, как вы прокрутите вниз.Этот скольжения меню с JQuery и CSS является эффективным способ …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров