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








