Эта статья вышла из моего пути “проб и ошибок”, и почти каждый тезис так или иначе связан с неудачей ...
Эта статья вышла из моего пути “проб и ошибок”, и почти каждый тезис так или иначе связан с неудачей или успехом на этапе проектирования и дизайна для какого-либо стартапа.
Надеюсь, что она поможет дизайнерам избежать тех же ошибок, на которые натолкнулась в свое время я. Людям, которые решили сделать свой стартап, эта статья поможет учесть тонкости, связанные с процессом разработки и сделать более качественный продукт.
Читать дальше →
... статей по теме
, новых инструментов и ...
Сегодня мы сделаем текст 3D,смотрится классно,можно использовать в качестве лого или названия сайта. ...
Сегодня мы сделаем текст 3D,смотрится классно,можно использовать в качестве лого или названия сайта.Основная идея очень проста. Вы можете получить хороший эффект 3D объеденив нескольких слоев text-shadow .
И так приступим
1. Заключаем текст который хотим изменить в блок с id="text":
Код:
<div id="text">
<h1>Это наш текст</h1>
<h2>И это красиво!</h2>
</div>
2.В CSS добавляем :
Код:
#text {
position:absolute;
width:600px;
height:120px;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-60px;
text-align:center;
text-transform:uppercase;
-webkit-tranform:translateZ(0);
-webkit-transition-duration:0.05s;
-moz-tranform:translateZ(0);
color:#f3f3f3;
text-shadow:0 0 1px rgba(0,0,0,.2);
}2.И последнее ,перед /body добавляем скрипт :
Код:
<script type="text/javascript">
var text = document.getElementById('text'),
body = document.body,
steps = 7;
function threedee (e) {
var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
shadow = '',
color = 190,
radius = 3,
i;
for (i=0; i<steps; i++) {
tx = Math.round(x / steps * i);
ty = Math.round(y / steps * i);
if (tx || ty) {
color -= 3 * i;
shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
}
}
shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';
text.style.textShadow = shadow;
text.style.webkitTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
text.style.MozTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
}
document.addEventListener('mousemove', threedee, false);
</script>
На этом все ,кому что не понятно,пишем комментарии
Сегодня воспользуемся JQuery плагином tzineClock.
1.Скачиваем архив [isnt- ...
Сегодня воспользуемся JQuery плагином tzineClock.
Для начала
1.Скачиваем архив [isnt-logged]
Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам demochasy.zip (50.54 Kb)[/is-logged],распаковываем и заливаем в папку с шаблоном.
2.В хеад подключаем стиль и скрипты необходимые для работы часов:
Код:
<link rel="stylesheet" type="text/css" href="css/jquery.tzineClock.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.tzineClock.js"></script>
<script type="text/javascript" src="{tpl_url}/js/script.js"></script>
3.Добавляем блок в котором будут отображаться часы:
Код:
<div id="fancyClock"></div>
Вот и все пользуемся
...
Уже конец недели и пора плавно переходить к режиму «Safe mode». Поэтому делюсь с вами подборкой интересных сайтов и ресурсов, чтобы к концу дня отвлечься от рабочего процесса.
Читать дальше →
