Tagкак сделать

Градиентный маркер списка средствами css (с помощью :before)

Решил поделиться одним изысканием.

Представим, что дизайн нашего сайта таков, что нам очень хочется, чтобы ненумерованные списки маркировались градиентными цветными кружочками. Самое простое решение — нарисовать гифку или png в графическом редакторе и подключить её при помощи css следующим образом:

li {list-style-image:url("hujovina.gif"); }

Однако, не знаю, как кто, а я не любою плодить в вёрстке миллион мелких графических файлов. Десяток незначительных изменений дизайна — и папки на хостинге полны какой-то фигни, а ты даже толком не помнишь, используются они у тебя где-то или нет. Это, конечно, легко выяснить, но зачем эти лишние движения? Лучше максимум оформления влепить в css и не париться.

Поскольку маркер — фиговина, находящаяся перед элементом списка, первое, что приходит в голову, использовать псевдоэлемент :before, а именно — запихнуть в его свойство content код блока с градиентным бэкграундом и скруглёнными углами. Однако, как выяснилось, хрен: код, введённый в качестве значения свойства content, причём хоть тупо с клавиатуры, хоть в виде искейп-последовательностей, хоть в виде шестнадцатеричных кодов с обратным слэшем, выводится перед элементом именно как код. То есть, таким образом мы получаем не градиентный блочок перед каждым элементом списка, а код градиентного блочка перед каждым элементом списка. Можно, конечно, оформить список и так, но, во-первых, задача стоит не такая, а, во-вторых, как говорил во времена оны один мой товарищ, это слишком духовно.

Помедитировав, я спросил себя: зачем, собственно, пытаться придать вид блока с градиентным фоном контенту псевдоэлемента :before, когда можно придать этот самый вид самому этому псевдоэлементу?

В-общем, представляю итог. Представим, что у нас есть некий список:


<ul class="listahan">
<li>Хуй;</li>
<li>пизда;</li>
<li>птичка без гнезда;</li>
<li>жалкие солдаты;</li>
<li>тупые депутаты.</li>
</ul>

Что нам надо сделать? Убрать страндартные маркеры и прописать для псевдоэлемента li:before стили, которые представят его в виде блока с нужным нам фоном (цвета возьмём поядрёнее, для наглядности) и скруглёнными углами. Вот такой, примерно, css (градиент для разных современных браузеров прописывается уже вполне одинаково, однако специфические префиксы ещё стоит использовать):


.listahan li {
list-style-type: none;
font-size: 120%;
font-weight:bold;
}

.listahan li:before {
content: "";
display: inline-block;
border: none;
border-radius: 5px;
width: 11px;
height: 11px;
background-image: -moz-linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
background-image: -webkit-linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
background-image: -o-linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
background-image: -ms-linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
background-image: linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
margin-right: 6px;
}

Так будет выглядеть результат (если вы смотрите репост в ЖЖ или в ФБ, вы нихуя не видите, само собой. Идите по ссылке — http://blog.yatsutko.net/2371):

  • Хуй;
  • пизда;
  • птичка без гнезда;
  • жалкие солдаты;
  • тупые депутаты.

Вот.

Profit.

Велосипедисты должны вести себя как православные пидарасы

По вопросу, что делать велосипедистам, которые боятся ездить по проезжей части, я солидарен с позицией иеромонаха Григория (Лурье) по поводу гомосексуалистов. Как он говорит? Православие принимает гомосексуалистов, как и всех прочих, но содомия — грех, потому гомосексуалисту в православии следует просто воздерживаться от сексуальных контактов и желаний. Грубо говоря — не ебаться. Вот так и велосипедистам, я считаю, надо. Нет в Москве копенгагенских велодорожек, а по проезжей части ты ездить ссышь? Не езди вообще. Всё просто. Осознавай, что ты велосипедист, но не покупай велосипед, не держи его дома и, сука, не езди по тротуарам. Потому что ездить по тротуарам — грех. Понял-нет?

Что делать, если вам всё безразлично

Некоторые мои ФБ- и ЖЖ-знакомые, особенно те, кому за сорок, жалуются иногда на полное безразличие ко всему, апатию, падение работоспособности и т.п.

Я расскажу, что нужно делать, чтобы никакого безраличия ко всему и вообще вот этого вот всего не было. Нужно кое-что в себя закидывать. А именно:

1. Какой-нибудь поливитамин, по капсуле в день. Если вам за 60 — выбирайте комплекс с селеном. Пейте поливитамин постоянно, иногда меняя комплексы.

2. Ноотропил. Дозу рассчитывайте из пропорции 60-160 мг на килограмм вашего живого веса. Пропейте его месяц-два, потом сделайте перерыв на полгода, потом повторите.

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

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

4. Если вы мужчина, накидайте в себя тестостероновых бустеров. Это могут быть уколы хорионического гонадотропина внутримышечно в дозировке 5000ЕД один раз в неделю в течение двух-трёх месяцев. Эта штука стимулирует выработку собственного тестостерона, а это как раз энергичность, целеустремлённость и отсутствие апатии. Если ломы колоть уколы, можно купить Д-аспарагиновую кислоту в порошке и закидываться чайной ложкой два-три раза в день. Она также стимулирует выработку внутреннего тестостерона, а заодно является нейромедиатором.

5. Перед сном пейте мелатонин. Можно чистый, можно в комплексных добавках (типа ZMA Sleep Max). Он поможет нормализовать суточные циклы сна и бодрствования.

6. Кофермент Q-10 (коэнзим Q-10, ку-энзим, убихинон). Эта штука нейромедиатор, антиоксидант, а также замедляет процесс закупорки сосудов и участвует в синтезе АТФ, который в свою очередь необходим для энергетического обмена внутри организма. Ку-энзим бывает в виде пищевой добавки в капсулах, а бывает в составе противопохмельного напитка «Пазл». Капсулу кофермента Q-10 или бутылку «Пазла» по утрам через день (ну, или хотя бы ешьте побольше говяжьей и куриной печени) — и жизнь станет светлее. Вообще эта хрень вырабатывается в организме сама, но, начиная с, примерно, 30 лет — всё меньше. А если вы бухаете (или бухали) и ваша печень несколько пострадала, а также если у вас недостаток витаминов в организме, то хуй вам, а не кофермент из собственной печени. Ешьте чужую. Ну, или капсулы, да.

7. Янтарная кислота. Есть такие очень дешёвые таблетки. Участвует в процессах клеточного дыхания, помогает с похмелюги, а также является лёгким геропротектором, т.е. некоторым образом замедляет старение. Кстати, если не ошибаюсь, как и кофермент, янтарка входит в состав напитка «Пазл».

8. Глюкуронолактон. Стимулирует работу мозга. Есть в большинстве энергетических напитков. Однако там его термоядерно дохера, а также в них обычно слишком дофига сахара, который вообще нифига не полезен в таких количествах. Потому каждый день заглатывать по нескольку банок редбула не надо. Но раз в неделю баночку не помешает. Или бутылку сухого красного вина. Там он тоже есть. Только не утром, понятное дело.

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

10. Китайский зелёный и белый чай. Ежедневно. Ибо кофеин, танины, антиоксиданты и прочая хрень, положительно влияющая на здоровье, настроение и когнитивные способности.

Такой совет. А также ешьте свежие фрукты: организм им радуется, выделяя эндоморфины. А когда эндоморфины — счастье.

Да, если вам 20, не ешьте ничего из вышеперечисленного, кроме чая и фруктов: в этом возрасте эндогенной дури должно хватать. А если не хватает, выпейте водки.

Солдатская смекалка

Сабж, а также рак на безрыбье и голь, которая на выдумки.

Очень срочно понадобился небольшой кусок жести. В ближайшем небольшом ремонтно-хозяйственном магазинчике не оказалось. Ехать куда-то ещё нет времени. Зато в магазинчике были ведёрки из оцинкованной жести. Я немедленно купил одно и, помня аксиому, гласящую, что Москва строится, пошарил взглядом в поисках ближайшей бригады строителей или ремонтников, каковую и обнаружил в двух шагах, мирно переделывающей офис в другой офис. Подошёл к ним с ведром и попросил чиркнуть по нему болгаркой. Профит.

Сервис трансляции материалов (постов, новостей, картинок) ifttt.com

Всем, кто путается между несколькими аккаунтами в разных социальных сетях, блог- и фотосервисах, ридерах и прочих интернет-службах и не может толком настроить импорт-экспорт постов, статей, изображений между ними, хочу посоветовать замечательный сервис ifttt.com. С его помощью вы сможете замечательно настроить взаимодействие между вашими площадками в Фейсбуке, Твиттере, Фликре, Гугл-ридере, на Вордпресс.ком и во множестве других мест. Вконтакта и ЖЖ там, правда, нет, но это не страшно: ЖЖ стремительно устаревает и теряет популярность, а той части аудитории Вконтакта, которая не пересекается с аудиторией в ФБ и/или на паре других площадок, по-хорошему, и не нужна большая часть того, что пишется в других местах. Кроме того, трансляцию из ЖЖ можно настроить с помощью rss, например. А так в iffft есть всё наиболее используемое. Самое главное — rss, facebook, twitter. Плюс всякие штуки, модные среди обладателей современных смартфонов: форсквер, инстаграмм и т.п. А также карьеристский linkedin.

Пользоваться ifttt проще простого. Сначала надо зарегистрироваться. После регистрации надо будет подтвердить аккаунт обычным способом — нажав на ссылку в письме от робота. При необходимости письмо подтверждения можно запросить ещё раз:

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

ifttt

Непременно активируйте канал Feed. Это rss — на сегодняшний день самый универсальный транспорт. Например, этот пост, который вы сейчас читаете, написан на стэндэлоне на вордпрессе, а в ФБ, твиттер и Постерус он отправился при помощи ifttt, который забрал его контент из rss-канала.

После активации каналов можно переходить к заданиям. Нажмите на синий пункт меню Tasks — вы перейдёте на страницу заданий и прямо под своим главным синим меню увидите огромную кнопку «Create task» — «Создать задание». Continue reading

Редирект сложных url с параметрами в WordPress

Раньше мой основной сайт, http://yatsutko.net, работал на старенькой-старенькой юмле (joomla), а недавно я перевёл его на wordpress. И столкнулся с проблемой. Вы же знаете, какие у юмлы url? Во всяком случае, у старой юмлы без специально настроенных ЧПУ? Все эти «?option=com_content&task=section&id=5&Itemid=» и прочий подобный ад. На некоторые тексты старого моего сайта при этом в инете немало ссылок. После замены CMS все они стали приводить на главную страницу. Я, конечно, немедленно взял .htaccess и, не мудрствуя, прописал туда 301-й редирект. Проверил — не работает. Полез гуглить. Гуглил-гуглил, писал через мод_рерайт, пробовал всякие регулярные выражения — не работает. Оказалось, что редирект со сложного динамического УРЛ с кучей параметров и использованием разных небуквенных значков — не такая уж простая задача. По инету по ней всё больше перепечатаны тысячами бложеков три-четыре унылых поста без подробностей. Ну и подробные мануалы по .htaccess с описанием всех возможностей, но весьма скудными примерами.

Перепробовал в итоге много вариантов — не заработало. Собрался уж, было, вручную вписывать куда-нибудь в файло темы wordpess php-редирект (а из меня не то что кодер, а даже вписыватель кода — как из Питера Венеция), приготовился, что сейчас вообще всё сломается, но в этот момент вдруг подумал: wordpress же! Должен быть плагин! Зашёл в меню установки плагинов, прямо там в строчке поиска ввёл «Redirection», и — оп! — есть плагин ровно с таким названием, вот — http://wordpress.org/extend/plugins/redirection/.

Установил и прям обрадовался: в меню Tools появилась строчка Redirection. Шлёпаю по ней — получаю простое меню:

В строчку «Source URL» вбиваю старый URL, в «Target URL» — новый. Жму кнопочку «Add redirection» — готово. Редирект появляется в списке наверху. Чтобы не забывать, чего вообще уже наредиректил, а чего ещё нет. Замечательная штука.

jQuery: скругление углов, 2-я серия. Мыло

Чуваки, я недавно уже писал про этот плагин — http://www.steamdev.com/imgr/. Так вот, он правда отлично скругляет углы, но есть проблема: он слегка размывает картинку. Причём, если на 24-дюймовом современном мониторе с хорошим разрешением это заметно только (или преимущественно) по оказавшемуся на картинке тексту, то на мониторах хуёвых заметно мылится вся пикча. Это проблема. Как бы её обойти?

Может, в коде у него что-нибудь надо ковырнуть?

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

Про вот этот — http://www.malsup.com/jquery/corner/ — я как-то не могу сообразить, как его подключать.

upd. sky_thunder, спасибо ему, подсказал поменять в коде плагина завышенные проценты в строчках вроде «background-size:101%» на 100%. Теперь всё скругляется и ничего не мылится. Чего и вам желаю.

____________

А также Open Sans

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

Кстати, имеет ли смысл пробовать подключать как веб-шрифт обычный тру/опентайп? Не тяжеловато ли будет подключить юникодный шрифт? Он, по идее, должен кешироваться, но всё-таки. Сколько весит какая-нибудь люцида санс уникот? Метров двадцать?