Блог Александра Башкирова

ИТ и бизнес, компьютеры и ПО, фото, программирование и просто мысли…

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

Метки: css

LESS или динамический CSS

Рубрика: MaxSite

Развитие веб-технологий не стоит на месте. Вот умные люди взяли и придумали LESS - динамический CSS. Чтобы понять, что это - приведу пример с официального сайта:

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Фактически, это "как бы" CSS - но с вкраплениями элементов языков выского уровня. LESS файл подключается, как обычный CSS, с одним "НО": чтобы все это заработало, нужно включить поддержку LESS на стороне сервера или на стороне клиента загрузить специальный JS файл. Примерно так:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Дальше - все стандартно и штатно.

Из мыслей. Не знаю, как обработка на стороне сервера, а обработка JS на стороне клиента - это лишнее время отрисовки старницы браузером. Стоит ли того гибкость решения - решать только разработчику.

Ссылки на сайты проекта:

http://lesscss.ru - русскоязычный сайт

http://lesscss.org - англоязычный сайт

Табы и оформление изображений средствами CSS

Рубрика: Alib.spb.ru

Пост для памяти.

Искал в сети оформление изображений при помощи CSS. Нашел интересный сайт - "Блог Алексея Ильина", от которого пришел в сугубый восторг. Итак, сфера интересов автора блога: CSS, JavaScript, HTML, jQuery. Если посмотреть попристальнее, то там кроме того, есть много чего интересного. Чего, например, стоит, IETester - свободный браузер, имитирующий работу IE от 5.5 до 9.0.

По теме:)

Первый пост "5 способов оформления изображений с помощью CSS". Систематизированы наиболее часто встречающееся трюки с CSS применительно к изображениям.

Второй пост "Табы с помощью CSS" вообще заставил меня немного по-иному посмотреть на CSS. Потому что там продемонстрированно, как просто, без использования хаков и JavaScript, сделать то, что мне казалось никак нельзя - без долгого-долгого программирования...

PS - пост не рекламный.

CSS генератор шаблона 1 – 3 колонки

Рубрика: Alib.spb.ru

Случайно наткнулся. Вот: http://xhtml.ru/instr/3col_creator/index.html

Совершенно замечательная штука: генерирует html + css шаблон для сайта от 1 до 3х колонок (разумеется, с "шапкой" и "подвалом") для разных doctype, разных пропорций... Вещь!

Я проверил пару шаблонов - в моем зоопарке браузеров (opera linux, opera windows на wine, firefox linux, firefox windows на wine, IE 7 и 8 на wine) все работало вполне себе корректно. Так что - пользуйтесь на здоровье.

CSS Menu, поле ввода с иконкой и многое другое…

Рубрика: Alib.spb.ru

Нашел классную ссылку, где приведены примеры практически всех наиболее часто встречающихся при верстке сайта CSS решений. Ссылка вот: http://www.shtogrin.com/design/, а находится по ней приемы того, как сделать с использованием CSS:

  • поле ввода с иконкой
  • иерархический список в select
  • горизонтальное одноуровневое CSS меню
  • рамки с уголком и с тенью, а также с круглыми краями
  • оформление формы ввода при помощи CSS
  • CSS галерея
  • заголовок в виде линии

CSS меню – подборка материалов

Рубрика: Alib.spb.ru

Образовалась задачка. Построить с минимальными затратами CSS меню. Вот что нарыл...

  1. Оказывается,в природе есть фреймворк для создания CSS меню. Живет по адресу http://www.lwis.net/free-css-drop-down-menu/, обладает хорошей настраивоемостью... базируется на jQuery. Подробный разбор, как "оно" работает и пример применения - тут (http://vremenno.net/html-css/css-drop-down-menu/).
  2. Можно воспользоваться генератором CSS меню. Простой, бесплатный. Из минусов - имеет 8 тем, если хочется "чего-то еще", то нужно ручками перелопачивать код. Ссылка: http://purecssmenu.com/
  3. Можно написать "с нуля" руками. Статья (на английском), описывающая процесс и рабочий пример тут: http://www.webdesign.org/html-and-css/tutorials/css-pop-up-menu-2-horizontal-menus.12089.html
  4. Еще один генератор меню. Вот: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/generator.htm
  5. Старенькая заметка об обходе проблемы :hover в IE (проблема в том, что IE не хочет видеть :hover ни для чего, кроме ссылки) - тут: http://www.umade.ru/log/2004/07/css-hover-any-element/
  6. Короткий пример красивого меню на Jquery: http://www.master-web.info/dropdownmenu-css-gquery/
  7. Статья, в которой описывается как сделать CSS меню на "голом CSS". Хороша для понимания принципов работы такого рода меню. http://cssor.ru/css/polezno-interesnoe/cssmenu
  8. Еще один бесплатный генератор меню. http://www.izzymenu.com/
  9. Хорошая (подробная) статья про то, как сделать CSS меню. http://beholder-eye.info/2006/03/30/dropdown-menu-css
  10. Неплохая статья о создании css/php/js меню: http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html
  11. CSS Play - хороший сайт, где есть CSS шаблоны на все случаи жизни... Есть и пример меню: http://www.cssplay.co.uk/menus/dd_valid.html
  12. По адресу http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started живет плагин для jQuery, с помощью которого (вроде) можно быстро сделать меню. ("Вроде" - потому что сам не пробовал).
  13. Простецкое jQuery меню: http://css-tricks.com/simple-jquery-dropdowns/
  14. Подробная статья о jQuery меню в wordpress: http://www.seoadsensethemes.com/wordpress-multi-level-drop-down-menu-using-jquery/
Дизайн от: Templates Next | Адаптация d51x