webkeepers, создание сайта

webkeepers


WebKeepers

Создание сайта и его продвижение


Первая в России профессиональная конференция о Performance Marketing
webkeepers, создание сайта
webkeepers
Приглашаем вас 15 октября на первую в России профессиональную конференцию о Performance Marketing.

Конференция Performance Marketing Moscow посвящена стратегии построения эффективного присутствия брендов в интернете, а также инструментам, каналам и технологиям, которые позволяют обеспечить максимальный ROI для бизнеса.

Обращайтесь по всем вопросам:
+7 (916) 709-69-71 или pr@rta-moscow.com

Кроссбраузерные CSS-приемы
webkeepers, создание сайта
webkeepers
Прозрачность:

.selector {
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 версии*/
filter: alpha(opacity=50); /* internet explorer 5~7 версии */
-khtml-opacity: 0.5; /* khtml, старые версии safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* firefox, safari, opera */
}

Тени для текста:

p {
text-shadow: #000000 0 0 1px; /*Для всех браузеров за исключением IE */
zoom:1;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
/*Для IE особое описание*/
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
7 }

Тени для областей:

.shadow {
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
box-shadow: 0 0 4px #000;
}

Цветовая передача в RGBA:

.element {
background-color: transparent;
background-color: rgba(255, 255, 255,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";/*Для IExplorer*/
}

Закруглённые углы:

.rounded {
-moz-border-radius: 10px; /* gecko */
-webkit-border-radius: 10px; /* webkit */
border-radius: 10px; /*стандартный CSS3 */
-khtml-border-radius: 10px; /* старый konkeror */
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

Работа с изображениями:

img {
transform:
rotate(180deg)
scale(-1, 1);
/* Для следующих браузеров firefox, safari, chrome */
-webkit-transform:
rotate(180deg)
scale(-1, 1);
-moz-transform:
rotate(180deg)
scale(-1, 1);
/* Для ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
/* opera */
-o-transform:
rotate(180deg)
scale(-1, 1);
}

Несколько границ:

div {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7 и ниже */
}
div:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 1px solid #212121; /* Верхняя граница! */
content: '';
}
div:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 1px solid #212121; /* Нижняя граница */
content: '';
}

Ждем вас на мероприятиях!
webkeepers, создание сайта
webkeepers
17, 18 и 19 октября в Экспоцентре (Москва) будет проходить одно из самых важных мероприятий, посвященных интернет-технологиям и всему, что с ними связано! RIW 2013 - http://2013.russianinternetweek.ru/
А 30 октября состоится международный форум «VMware Tour Russia 2013». VMware Tour aka Виртуальная Россия - это наиболее актуальная практическая информация о создании, поддержке и перспективах развития виртуальных сред и “облаков”.

Тусим с делом, господа! :)

Непостяжимость WebKit'овского движка
webkeepers, создание сайта
webkeepers

-webkit-touch-callout

Данное свойство позволяет управлять поведением браузера в момент тапа и удержания пальца на ссылке. По дефолту в браузерах всплывает окно, которое содержит информацию о ссылке, а значение ровно default, но установив значение none окно с информацией всплывать не будет.


a.js-only {
  -webkit-touch-callout: none;
}


-webkit-user-drag

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

/* ничего не перетаскивает */
.content p.noDrag {
  -webkit-user-drag: none;
}

/* перетаскивается весь элемент а не контент внутри */
.sidebar div.elDrag {
  -webkit-user-drag: element;
}




-webkit-appearance

А это свойство определяет то, как будет выглядеть элемент SPAN. Например, radio button:

span.lookLikeRadio {
  -webkit-appearance: radio;
}





Или textarea:

span.lookLikeTextarea {
  -webkit-appearance: textarea;
}





Всего таких значений около 50. Весь список можно посмотреть тут.



-webkit-text-security

Данное свойство позволяет изменять маску при вводе пароля. К примеру, вместо кружков можно отображать квадратики:

input[type="password"] {
  -webkit-text-security: square;
}




-webkit-user-select

Ну а это свойство определяет возможность выбора (выделения) внутри элемента:

div {
  -webkit-user-select: none;
}





Это конечно далеко не все свойства, но по крайней мере наша заметка говорит о том, что многие верстальщики не юзают и 50% всех возможностей движка! ;)

Самая большая, интересная и даже захватывающая конференция 2013 года!
webkeepers, создание сайта
webkeepers
Приглашаем Вас принять участие в ШЕСТОЙ профессиональной конференции веб-разработчиков "Российские интернет-технологии", которая пройдет 22 и 23 апреля в Москве.



http://ritconf.ru/

Лучший промо-сайт 2012
webkeepers, создание сайта
webkeepers
Друзья!
Спешим сообщить, что еще почти весь апрель будет идти голосование за "Лучший промо-сайт 2012" (Рейтинг Рунета) - http://www.ratingruneta.ru/awards/2012/
В связи с чем предлагаем проголосовать за http://apriorivk.ru/

Конференция "Сайт будущего"
webkeepers, создание сайта
webkeepers


25 марта

ул.Русаковская, д. 13, стр.5 (ст.м "Красносельская")


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

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


Секции конференции



    • Современный веб-дизайн. Все новинки разработки, западные технологии.

      Кейсы крупнейших брендов.


    • Умный сайт.

      Мобильный сайт, сайт для айпада, мобильное приложение, адаптивный сайт - что лучше?


    • Конверсия или секреты превращения посетителей в покупателей.

      Как сделать супер-продающий сайт.


    • Юзабилити.

      Если клиенту нравится интерфейс и удобство использования, то он остается на сайте и приносит Вам деньги




Поздравляем всех с Новым Годом!!!
webkeepers, создание сайта
webkeepers

Поздравляем всех с Новым 2013 Годом! Мы благодарны всем нашим клиентам, всем людям поддерживающим нас и конечно же W3C)) Чтобы мы без вас делали! Всем еще раз большой сэнкс, с праздником!

Коллектив интернет-агентства WebKeepers

Конференции, премии, тусовки
webkeepers, создание сайта
webkeepers
Плотный график:

Премия Рунета 2012 - 21 ноября

DIGITAL без силикона - 23 ноября

Internet Life 2012 - 7 декабря

Тестинг адаптивной верстки
webkeepers, создание сайта
webkeepers
Сейчас мы дадим пару советов как тестировать адаптивную верстку. Тема эта довольно насущная, т.к. многим теперь подавай "суперкроссбраузерноадаптивный" сайт... :) В общем, начнем...
Наверное, никто не будет спорить, что самый лучший вариант в таких случаях - это "live-тестинг", т.е. когда мы тестируем наш проект прямо на нужном нам девайсе. Но, как вы понимаете невсегда и не у всех есть такая возможность. Поэтому, для таких случаев и начали разрабатываться специальные эмуляторы.



На данный момент для эмуляции доступны следующие платформы: 


Эмуляция - это, к сожалению, единственный способ в отсутствие девайсов увидеть адаптивный дизайн именно так, как он будет выглядеть на устройстве. Тем не менее, это не самое удобное решение, потому что большинство перечисленных вариантов требует установки различных средств разработчика для необходимой платформы на компьютер. Поэтому, самый простой (хоть и "деревянный") вариант - это изменение ширины браузера. Чтобы автоматизировать данный процесс, есть неколько вариантов:

1. Установка плагина для браузера (например, Window Resizer)
2. Страница с iframe для каждого разрешения. Исходник, который мы приводим чуть ниже, нужно сохранить под  именем test.html в папке с index.html


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Responsive Design Testing</title>
 <style>
  body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
  .wrapper { width: 6000px; }
  .frame { float: left; }
  h2 { margin: 0 0 5px 0; }
  iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
 </style> 
</head>
<body>
 <div class="wrapper">
  <div class="frame">
   <h2>320 &times; 480 <small>(mobile)</small></h2>
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
  </div>
  <div class="frame">
   <h2>480 &times; 640 <small>(small tablet)</small></h2>                   
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
  </div>                                                                                                                        
  <div class="frame">
   <h2>768 &times; 1024 <small>(tablet - portrait)</small></h2>                   
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
  </div>
  <div class="frame">
   <h2>1024 &times; 768 <small>(tablet - landscape)</small></h2>
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
  </div>
  <div class="frame">
   <h2>1200 &times; 800 <small>(desktop)</small></h2>
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
  </div>
 </div>
</body>
</html>

3. Еще быстрее можно проверить адаптивную верстку с помощью закладки в браузере, просто перетягивая ее на тестируемую страницу.
4. Веб-инструмент Screenfly позволит посмотреть, как примерно выглядит ваш сайт на популярных устройствах. Это не эмуляция, а скорее быстрый вариант проверки, насколько хорошо вы написали media queries.
5. Ну и два самых наших любимых сервиса - Responsinator и ScreenQueri, которые также покажут вам как выглядит компоновка вашего адаптивного сайта на популярных устройствах.

?

Log in

No account? Create an account