Разделы
Veselov CV | vvShop © 2008 – 2018
Контакты
email: igor@veselov.sumy.ua
skype: utz0r2
» » Страница 335

Повернутый текст под любым углом без JS и флеш


Приступим. Для начала нам нужен блок:
css:
.vertical { overflow:hidden; line-height:30px; position:relative; white-space:nowrap; width:30px; height:200px; border:1px solid #999; }

html:
<div class="vertical"></div>

Для современных браузеров будем использовать svg:

css:
.vertical object { width:30px; height:200px; display:block; } - задаем ширину равную высоте и высоту равную ширине обрамляющего блока.

html:
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><text x="-200" y="18" fill="#000000" transform="rotate(-90)">вертикальный текст</text></svg>">
</object>

— x='-200' - координата начала строки текста от верхней стороны object, y='18' - координата базовой линии строки текста от левой стороны object,
font-family='Arial' font-size='12' - размер, гарнитура шрифта,
fill='#000000' - цвет текста,
transform='rotate(-90)' - поворачиваем текст на -90 градусов. мы можем повернуть текст на любой угол
Для IE всех версий:

Так как IE даже 8-й версии не поддерживает svg(разработчики сказали что у них и так было много работы), будем использовать специфические свойства:
writing-mode:tb-rl; — текст размещаем вертикально сверху вниз и справа налево
filter:flipv() fliph(); — отражаем по горизонтали и вертикали.
css:
.vertical object { display:none; } - скрываем svg.
.vertical span { filter:flipv() fliph(); writing-mode:tb-rl; display:block; position:absolute; left:0; bottom:0; height:200px; width:30px; }

html:
<span>вертикальный текст</span>

Для текста под углом css выглядит так:
.vertical3 span { top:-8px; left:-31px; width:200px; writing-mode:lr-tb; filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.985', M12='-0.174', M21='0.174', M22='0.985', SizingMethod=«auto expand»); }

top, left — эмпирические значения. находятся экспериментально.
M11 = cos(угла в градусах)
M12 = -sin(угла в градусах)
M21 = sin(угла в градусах)
M22 = cos(угла в градусах)
Отрицательные значения не берем! если нам надо повернуть на -45 градусов то значения тригонометрических функций берем от угла 315 градусов.

Ограничения:
Возможно сделать текст только в одну строку, и в блоке с жестко заданными размерами в пикселях.

Колонки одинаковой высоты


Хинт: для того что бы у Вас работало несколько версий IE юзайте tredosoft.com/Multiple_IE

Особенностью табличной верстки является то, что колонки, получаемые с помощью ячеек таблицы, имеют одну высоту. Это неудивительно, поскольку ячейки взаимосвязаны и при повышении высоты одной ячейки, соответственно увеличивается высота рядом расположенных ячеек. Многие разработчики пытаются произвести подобный эффект и с помощью слоев, т.е. сделать их взаимосвязанными и одной высоты, независимо от объема содержимого. Но это НЕПРАВИЛЬНО!

А правильно Вот так:
<style type="text/css">
#container {
border-left: 200px solid maroon; /* Цвет и ширина левой колонки */
background: #f0f0f0; /* Цвет фона правой колонки */
}

#col1 {
width: 200px; /* Ширина левой колонки */
float: left; /* Превращаем в плавающий элемент */
margin-left: -200px; /* Сдвигаем все влево на ширину границы */
color: #fff; /* Цвет текста в колонке */
}

#col1 p {
padding: 5px; /* Поля вокруг абзаца текста */
margin: 0; /* Обнуляем отступы */
}

#col2 {
padding: 5px;
}

div.clear {
clear: both; /* Убираем все плавающие элементы */
}
</style>
</head>
<body>
<div id="container">
<div id="col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>
<div id="col2">
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="clear">&nbsp;</div>
</div>

Понятия и сокращения о которых Вы слышали, но не знали что это


Текстовый спамдексинг - накачка страницы ключевыми словами.

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

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

Клоакинг (cloaking) - технология выдачи различного содержания в зависимости от запрашивающего клиента.

Свопинг (code swapping) - оптимизация страниц для достижения верхних позиций в результатах выдачи поисковой системы с последующей полной заменой или значительным изменением содержимого страницы, когда нужное положение страницы в индексе достигнуто.

Ссылочный спам (непотизм) - ссылки, устанавливаемые исключительно с целью повышения авторитетности сайта для поисковых систем.

AD = Advertisement = Реклама, текст, баннер, флеш- или видео-ролик, – да всё, что угодно

ASP = Application Service Provider = Провайдер сервиса приложений

CPA = Cost per Action = Цена за действие.
CPC = Cost per Click = Цена за клик
CPL = Cost per Lead = Цена за лид
CPM = Cost per Mil = Цена за тысячу (показов)
CPS = Cost per Sale = Цена за продажу

CR = Conversion Rate = Коэффициент конверсии

CSS = Cascading Style Sheets = Таблицы каскадных стилей

CTR = Click through rate/Click-Through Ratio = Коэффициент «кликабельности»

DH = Direct Hit (поисковая система)

DRM = Dynamic Rich Media (технология динамической рекламы)

DRM = Digital Rights Management = Технические средства защиты авторских прав

EPC = Earnings per Click / Earnings per 100 Clicks = Заработок за Клик/100 кликов

FFA = Free-For-All Link List = Бесплатные списки ссылок

MFA = Made For AdSense = Сделанный для контекстной рекламы (сайт)

OPM = Outsourced (Affiliate) Program Management = Программа управления мощностями

PFI = Pay For Inclusion = Оплата за включение
PFP = Pay For Performance = Оплата за исполнение
PPA = Pay per Action = Оплата за действие
PPC = Pay per Click = Оплата за клик
PPCSE = Pay Per Click Search Engine = Поисковая система с оплатой за клики
PPI = Pay Per Impression = Оплата за показ
PPL = Pay Per Lead = Оплата за лид
PPS = Pay Per Sale = Оплата за продажу

PV = Page View = Просмотр страницы

ROI = Return on Investment = Возврат на инвестиции

RON = Run Of Network = Динамическая реклама, отображающаяся на всех сайтах сети

ROS = Run Of Site = Динамическая реклама, отображающаяся на всех страницах сайта

SB = Small Business = Малый бизнес

SE = Search Engine = Поисковая система

SEM = Search Engine Marketing = Маркетинг в поисковых системах

SEO = Search Engine Optimization = Оптимизация для поисковых систем

SEP = Search Engine Positioning = Индексирование в поисковой системе

SERP = Search Engine Result Page = Страница результатов поиска

SID = параметр URL, используемый Аффилиатом для собственных целей трекингаSMO = Social Media Optimization = Оптимизация для продвижения в социальных медиа-сетях

SSI = Server Side Include = Включения на стороне сервера (скрипт, исполняемый сервером)

USP = Unique Selling Proposition = Уникальное торговое предложение

UV = Unique Visitor = Уникальный посетитель

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

Кликабельность – Когда посетитель делает клик по ссылке. Это может быть клик по Вашей партнёрской ссылки или по отображаемому URL в Вашем объявлении в результатах поиска.

CTR (коэффициент кликабельности, или рейтинг кликов) – Отношение числа кликов по ссылке к числу показов Вашего объявления, выраженное в процентах.

Комиссионные – Процент, или ставка, которую Вы получаете от мерчанта за продажу, клик и.т.д.

Куки – Небольшой скрипт, используемый мерчантом, чтобы идентифицировать “Ваших” посетителей и отслеживать, сколько времени прошло между первым визитом посетителя и продажей.

Отображаемый URL – URL, который видят люди в Вашей оплачиваемой рекламе. Не обязательно тот самый URL, куда Вы отправляете посетителей, но тот, что показан в Вашем объявлении.

URL назначения –URL, куда попадает пользователь, когда делает клик по отображаемому URL (см. выше).

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

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

URL переадресации– закодированный URL на Вашу основную страницу для отслеживания активности посетителей.

Предпродажа – Обеспечение посетителей информацией, помогающей им принять обоснованное решение о покупке продукта, который Вы продвигаете. Предпродажный контент должен побуждать посетителя совершить клик по ссылке, чтобы перейти на сайт мерчанта.

Коэффициент возврата инвестиций (ROI) – Заработок аффилиата с учётом затрат, выраженный в процентах. Простая формула для определения ROI: % = Прибыль/ Инвестиции x 100. Большинство PPC бизнесменов для всех своих кампаний ставят целью получить ROI не менее 100%.

Простая истина о веб-дизайне


Веб-дизайн – это такое же серьезное занятие, как, скажем, дизайн автомобиля, дизайн мебели или дизайн бытовой техники.

Нарисовать картинку в Adobe Illustrator`e и обработать ее в Adobe Photoshop`e действительно могут многие. Сделать же ее так, чтобы она реально стала дизайном – удел далеко не каждого.

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


Не правда ли?

День Знаний и все такое


Первое сентября, а я впервые с 5-и лет никуда не иду учиться! Погода просто ни к черту, пасмурно, сыро, холодно. Все время хочется спать.

Не бойся, что не знаешь – бойся, что не учишься (кто-то умный сказал). Поэтому я наверно боюсь и поэтому учусь (а может просто люблю совершенствоваться), но уже сам… и думаю, буду учиться всю свою сознательную жизнь.

Очень хорошая новость: вышла финальная 10 опера! Ура товарищи, ура!

Я не успеваю прочитывать ленту новостей, а Вы?

Алкогольный человек


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

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

Алкогольный человек


Начало все трезвые. Позже выпивают.

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

Идут еще за одной дозой.

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

Логично предположить, чем это завершается – отравление и рвота. А на следующий день с утра этим людям не позавидуешь… будут ссаться мозгами.

Теперь вопрос, как тогда себя разогнать на веселье, если не хочется не алкогольных напитков ни травы, а вокруг все уныло?…
«»
Вверх