2010-10-01

Цветное подчеркивание средствами CSS

Случайно обнаружил способ как сделать цветное почеркивание для текста средствами CSS:

Текст с цветным подчеркиванием!

При этом это не бордер, а именно подчеркивание - можно заметить, что подчеркивание проходит гораздо ближе к тексту чем бордер и иногда пересекается с нижними глифами шрифта.

Сама идея проста до безобразия - делаем красный текст с подчеркиванием, затем у вложенного спана переопределяем текст на черный:

<p style="text-align: center; font-size: 1.5em; color: red; text-decoration: underline;">    <span style="color: black;">Текст с цветным подчеркиванием!</span> </p>
 

Оставить комментарий

 
  2010-08-25

FCKeditor умер, да здравствует CKEditor!!!

Самого лучшего Wysiwyg редактора для работы с HTML больше не существует и новых версий больше не ожидается!

Недавно решил проверить как поживает творение Фредерико Кальдейра Кнаббена и обнаружил множество удивительных вещей. Во первых, он больше не FCKEditor — теперь он CKEditor. Оказывается, сочетание букв FCK образованное из инициалов простого итальянского парня неблагозвучно звучит в англоговорящих странах.

Во вторых, теперь редактор не умеет закачивать файлы. Та часть редактора которая предназначалась для загрузки файлов теперь выделена в отдельный проект который называется CKFinder. Странно то, что CKFinder распространяется только по коммерческой лицензии для персонального использования он будет стоить 60 баксов.

Штука поначалу показалась мне жутко неприятной даже катастрофической - без закачивания файлов редактирование текстов мало кому нужно. К счастью, в Интернете оказалось несколько бесплатных альтернатив умеющих работать с CKEditor. Больше всего мне понравился KCFinder. Мне даже показалось, что сделан он гораздо приятней чем кнаббеновский прототип.

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

Так что буду переходить на новую версию - оно того стоит.

 

Оставить комментарий

 
  2010-06-22

RealTime 3D движки для Flash

Трехмерная графика до сих пор не получила достаточного распространения в Web, если видишь на сайте трехмерную графику сразу возникает вопрос - как?

В настоящий момент самым перспективным способом создания трехмерных эффектом мне представляется Flash. Да, знаю, что многие начнут кидать в меня камни ссылаясь на то что всем дружно нужно переходить на HTML5, но как это ни странно HTML5 значительно уступает технологии Flash по скорости прорисовки сцены - сказывается необходимость разработчиков тащить за собой длинный поезд технологий включая DOM, CSS, DHTML и так далее. Flash же наоборот - закрытая платформа, с ограниченной совместимостью между версиями плагинов, что значительно упрощает жизнь разработчкикам платформы.

Однако, сама по себе технология Flash не предоставляет инструментов для работы с трехмерной графикой и скорее всего их и не будет: цезарю - цезарево а Богу - Божье, но зато это предоставляет разработчикам широкое поле для творчества. Сейчас на рынке есть несколько библиотек для работы с трехмерной графикой.

Sandy

OpenSourse движек - на сайте так и не нашел его лицензию но написано, что можно использовать бесплатно в бесплатных и коммерческих проектах. Имеются парсеры из различных 3D форматов, в том числе 3DS, имеется подробная документация.

демо: http://www.flashsandy.org/demos 

Papervision3D
MIT лицензия

демо:
http://papervision3d.org/ - вы оказываетесь под водой среди корралловых рифов с красивыми рыбками.
http://blog.papervision3d.org/p/papervision3d/
http://www.digimi.com/newsite/presite/studioPage.jsp?partner=studio&scene=17889727
http://papervision3d.org/

Away3D

демо:
http://www.infiniteturtles.co.uk/projects/away3d/demos/hacienda/BSPImportTest.html
http://www.syerit.com/think360/ - абалденная трехмерная игра/демо

Alternativa3D
free for non commercial usage, coomercial licence available

Ребята из Перми написали свой движек, но вот похоже исходниками они делятся не так охотно - на сайте говорится что дают они только SWC library. Ребята мощные - их библиотека используется ими же самими в ряде онлайн игр.

примеры игр с демо:
http://tankionline.com/ru/
http://drevnii.ru/bunker.htm

FIVe3D

Прикольная простая библиотечка - не столько для отрисовки/рендеринга трехмерных сцен, сколько для создания трехмерных сцен с нуля - подойдет для тех кто хочет создавать трехмерные эффекты но не хочет использовать такое дорогое программное обеспечение как 3DMax.

демо:
http://five3d.mathieu-badimon.com/gallery/keyboard/

 

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

 

Оставить комментарий

 
  2010-05-13

Тег Q в Internet Explorer

Для создания различных цитат можно использовать тег q. В отличие от blockquote это inline элемент.

Он сказал <q>поехали</q> и махнул рукой!

Однако оказалось, что тег q в IE не работает -  кавычки к фразе не добавляются. Умельцы используют для добавления кавычек Javascript, но это не красиво и, по идее медленно, лучше для этих целей использовать behavior'ы, поэтому я сделал следующее (идею позаимствовал из pngfix):

1. Создаем quotesfix.htc:

<public:component>
<public:attach event="onpropertychange" onevent="fixQuotes()" />

<script type="text/javascript">

function fixQuotes()
{
	innerHTML = '"'+innerHTML+'"'
}
fixQuotes();

</script>
</public:component>

2. Добавляем в css файл следующие строчки:

q {
  behavior: url(quotesfix.htc);
}

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

P.S. Атиукс, да я знаю что это проктология, но проктологи ведь тоже люди, верно?

 

Оставить комментарий

 
  2010-05-04

Firebug Lite для IE

Давно пользуюсь Firebug'ом - незаменимая вещь при работе с FF, но иногда бывает нужно по-быстрому посмотреть что творится на странице под IE - для этих целей можно использовать Firebug lite. Для этого достаточно в букмарки добавить такую ссылку. Обещают что будет работать под всеми браузерами - я тестировал только под IE.

 

 

Коментариев: 4

 
  2010-04-05

Как показывать и прятать строки таблицы

Давным давно стояла задача, как при помощи JavaScript прятать одни строки таблицы и показывать другие. В CSS у стиля display есть значение table-row которое как раз и применяется по умолчанию к элементам типа TR, однако в Internet Explorer поддержка табличных классов практически не реализована, поэтому прямое присваивание .style.display = 'table-row' в IE ниже восьмой версии работать не будет. Не работает также и run-in. Однако, есть одно значение display которое железно работает везде - это nodisplay.

Как при помощи nodisplay показать спрятанный элемент? Просто удаляем связанный с TR класс! Т.е. у невидимых элеменов будет класс с display:nodisplay, назовем его nodisplay у видимых этого класса не будет и они останутся видимыми. Если хотим сделать видимыми невидимые элементы а невидимые видимыми то просто удаляем невидимый класс у одних и добавляем его другим. Очень просто! Как это сразу не пришло мне в голову....

пример

row 1 row 1
row 2 row 2

 

Коментариев: 7

 
  2009-11-02

Slicehost

Сегодня зарегистрировался на сабже. Впечатления самые положительные. В качестве операционной системы выбрал Ubuntu 9.10, все настройки заняли минут пятнадцать - поставил Apache, PHP, SVN и вуаля сайт закрутился. Мне понравилось.

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

За двадцать баксов в месяц можно получить полноценный VDS с рутовым доступом  - и главное - никой cpanel! Только голая операционка и делай что хочешь. Вот оно счастье.

 

Коментариев: 2

 
  2009-10-26

говорят SVN это дырка...

На Хабрахабре интересная статейка про то как люди часто пренебрегают элементарными средствами безопастности, выставляя служебные папочки .svn на всеобщее оборзение.

http://habrahabr.ru/blogs/infosecurity/70330/

Upd:
чтобы запретить это безобразие просто добавьте в .htaccess или в httpd.conf:

<IfModule mod_rewrite.c>
  RewriteRule ^(.*/)?\.svn/ - [F,L]
  ErrorDocument 403 "Access Forbidden"
</IfModule>
 

Причем как то странно на одном сервере это не сработало, сработало вот это:

<DirectoryMatch "^/.*/(\.svn|CVS)/">
  Order deny,allow
  Deny from all 
</DirectoryMatch>
 

Коментариев: 2

 
  2009-08-21

Закачака файлов AJAX

Нашел занимательный пример по закачке файлов посредством AJAX. Решение, оказывается, простое ну просто до безобразия - у формы с файлом ставится target с именем невидимого фрейма, за счет этого форма с файлом не перегружается а перегружается этот самый невидимый фрейм. Гениально!

 

Оставить комментарий

 
  2009-07-02

Скругленные углы в FF и Safari

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

Здесь описаны примеры как в мозиле и фаерфоксе добиться скруглённых уголков. Все предельно просто:

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. This is an example:

пользователи Mozilla/Firefox и Safari 3 увидят прямоугольный бокс со скругленными углами.

 Код который это делает выглядит следующим образом:

 <div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

Жаль IE пока такое себе не позволяет.

 

Коментариев: 1