Рубрика Css


Генератор HTML+CSS шаблонов

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

На выходе получаем валидный html шаблон который отлично себя ведет.

Спасибо Дмитрию Лялину обновил генератор HTML+CSS шаблонов.

Для быстрого старта нового проекта — самое оно.

Смотреть тут >> csstool.ru

Теги: , , , , ,
Еще можно почитать по теме
http://dsda.ru/wp-content/themes/white
реклама в блоге реклама в блоге

hover любых элементов

Whatever:hover

Самые современные браузеры поддерживают :hover селектор для любого элемента html. Это клево, потому что это позволяет Вам применить эффект mouseover к строкам таблицы используя только CSS. IE откровенно лажает с :hover, в лучшем случае если стоит 7 версия, но в большенстве случаев стоит 6.

Whatever:hover – маленький скрипт, который автоматически исправляет :hover :active и :focus для IE6, IE7 и причуд IE8. Версия 3 вводит поддержку ajax, это значит, что любой html, который вставлен в документ через javascript, также имеет вызовы :hover :active и  стили :focus в IE. 

Читать полностью »

Теги: , , , ,
Еще можно почитать по теме
http://dsda.ru/wp-content/themes/white

Убрать рекламу в ЖЖ

Как я убрал рекламу СУПа у себя в ЖЖ? Просто!

1) Идем по этой ссылке: http://www.livejournal.com/customize/options.bml?group=customcss
2) Добавляем в поле «Custom stylesheet» вот это: .adv { display: none;}

За идею спасибо Brain1ess

UPD: вот такие теперь стили необходимы. 

#ad-leaderboard { display: none;} #ad-5linkunit { display: none;} .adv { display: none;}

За подсказку спасибо Пеплу.

Теги: , , , , , ,
Еще можно почитать по теме
http://dsda.ru/wp-content/themes/white
реклама в блоге реклама в блоге

Иконки

Неплохой набор иконок для блога или сайта.

Скачать

Теги: , ,
Еще можно почитать по теме
http://dsda.ru/wp-content/themes/white

PngFix

Обновился один из известных pngfix`ов. можно скачать тут.

UPDATE: http://dsda.ru/443/moshhnyj-pngfix/ тут клон pngfix`а но по качествам лучше. Так что качаем этот

Теги: , ,
Еще можно почитать по теме
http://dsda.ru/wp-content/themes/white
реклама в блоге реклама в блоге

Сглаженные закругленные углы без использования изображений

Делаю на заказ небольшую gallery заказчик шарит в теме и хочет web 2.0. По сему стал вопрос о круглых краях в блоках. Я как-то где-то наблюдал как делаю скугления div`ами и решил посмотреть что же дает эта технология.

Вот что выяснилось. Во-первых есть небольшая куча библиотек на JS которые только и занимаются скруглением. Но исользовать здоровые и непонятно как написанные библиотеки нехотелось.  Хотя нашел микрофреймворк который справляется с этой задачей на 5+. Nifty Corners 

Теперь о способе который выбрал я для своих нужд (но в последствии я его отбросил ввиду гемморойности внедрения). Он довольно простой и не отнимает много времени у браузера. Прошу считать это лишь как тренировка CSS навыков.

Это у нас стили.
block {width: 500px;margin: 30px auto 15px;}
.v1, .v2, .v3, .v4, .v5 {
 height: 1px;
 font-size: 1px;
 display: block;
 overflow: hidden;
 border: 1px solid #B8C3C8;
 border-width: 0 1px;}
.v1 {margin: 0 5px; background: #B8C3C8;}
.v2 {margin: 0 3px; border-width: 0 2px;}
.v3 {margin: 0 2px;}
.v4 {margin: 0 1px;}
.v5 {margin: 0 1px;}

Это HTML
<div id="v2">
  <b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
  <div class="text">
<h1>2. Простое закругление углов с помощью CSS</h1>
Здесь каждый угол состоит из пяти расположенных специальным образом пикселей.
</div>
<b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>

Вот вроде и все. Кстати это пример с сайта Свобода слова вебмастерского

Так-же советую псмотреть этот пример. Там достаточно хорошо все оптимизированно и есть градиенты (заливки) со скругленными углами. Тут.

 

UPDATE: -moz-border-radius и -webkit-border-radius это специфические свойтва браузера, которые эмулируют свойтво border-radius в CSS3. В Google Chrome, FF3 и Safari 3.1 уже работает border-radius. Полный список:
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

а для закругления отдельных углов подойдет следующее


-khtml-border-radius-bottomleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;

Теги: , , ,
Еще можно почитать по теме
http://dsda.ru/wp-content/themes/white