• 41085
  • 526
  • 71
Нравится блог?
Подписывайтесь!

Печенюки или мини-фреймворк от домохозяйки

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

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

В интерфейсе есть много кнопочек, хороших и разных. Разных габаритов (2 вида габарита) и четыре цветовых решения. Проект , изначально, сам по себе мультиязычный, и обходится деревенскими костылями вроде "запекания картинки-кнопочки для разных языковых версий" это не комильфо ни разу. Посему, пришлось выкручиваться.

рисунок 1. так выглядят кнопочки в макете

вот так выглядит разметка для кнопки

<a href="#"> Leave</a>

Как известно, у элемента может быть один ID  и несколько классов. Этим можно как раз грязно воспользоваться - описать габарит кнопки, цветовое решение (это общие классы) и расположение кнопки (дополнительный класс) отдельно.

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

.size {width: ; height: ; display: ;

font-size:; text-align:center ; text-decoration:none ; color: ; }

(где width ,height и font-size разные для разных габаритов)

в классе, который предназначен для цвета, прописываем

.color {backgound:(url'') no-repeat top left }

и при наведении мыши, естественно

.color:hover {backgound:(url'') no-repeat top left }

background, естественно, разный для каждого цветового решения: это картинка - фон кнопки

рисунок2 . фон кнопки - каждому свой

и третий вид класса - расположение. где указываете position, если нужно, или float

в итоге, в сборке, разметка будет выглядеть вот так:

<a href="#" class="size color position"> Leave</a>

 

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

Или название кнопки. Было Yes, станет No или еще как-нибудь.

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


Такие дела. Домохозяйки пекут не только пироги, но и вот такие вот печеньки.

Кимушка Горымушка Kimberly
концептуальный боянист, тетенька с термосом
14 мая 2013, 0:27
736

Загрузка...
Loading...

Комментарии

xapon
1
0
Можно бы и без картинок - обрати внимание на www.colorzilla.com :)
круто, спасибо! я пошла совсем костыльным образом, чтобы избежать меньшего кодинга. и надо было сделать поддержку для IE8, а боюсь, прелести колорзиллы потеряются там.
xapon
0
0
он генерирует градиенты для ие 6+ через магические фильтры, там в коментах написано же)
я попячилась:) и устыдилась:)
казалось бы, при чем тут бутстрап?
ну я же велосипеды изобретаю, мне можно :)

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

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

Юрист, пришедший в школу учителем по зову души, о главной проблеме системы образования

Юрист, пришедший в школу учителем по зову души, о главной проблеме системы образования

Алматинский учитель поставил диагноз системе, частью которой является образование. Будучи успешным юристом, имевший степень МВА, он вдруг развернул траекторию своей карьеры, став обычным учителем.
Zhumanova
22 сент. 2017 / 16:26
  • 10400
  • 33
«Это будут твои большие похороны». Гуф высказался о Скриптоните и Басте

«Это будут твои большие похороны». Гуф высказался о Скриптоните и Басте

Досталось и Скриптониту, который ранее опубликовал запись, о том, что больше не будет сниматься в клипе Гуфа и Тимати. "Я тебя ни о чем больше не попрошу, казах ты мой дорогой" - высказался рэпер.
tala03
21 сент. 2017 / 15:48
  • 4460
  • 12
«Честный взгляд» госслужащего: «Знала бы, что ты такой гнилой, я бы тебя не брала»

«Честный взгляд» госслужащего: «Знала бы, что ты такой гнилой, я бы тебя не брала»

Мы не такие блатные. Да, нас унижают руководители, возомнившие себя ханами, часто наши права не реализуются в должной мере. И я всегда задавался, почему на самом деле нет нормальных условий и льгот...
WriterKz
23 сент. 2017 / 0:41
Почему депутат Божко хочет ограничить приток сельской молодёжи в города?

Почему депутат Божко хочет ограничить приток сельской молодёжи в города?

Вице-спикер Мажилиса Владимир Божко остановился на некоторых деталях известного конфликта в Астане возле строящегося «Абу Даби Плаза», затронув проблему «многочисленной сельской молодёжи»...
openqazaqstan
19 сент. 2017 / 13:16
  • 2997
  • 72
Астана перестает быть городом-музеем, или Почему я хотел бы жить в столице

Астана перестает быть городом-музеем, или Почему я хотел бы жить в столице

Наш главный город страны стал избавляться от уже вполне неуместных моветонных клише, которые громоздились над ней, как черное облако над Мордором.
tentser
22 сент. 2017 / 21:04
  • 2091
  • 73
Дагестанские «миротворцы» борются за справедливость в Мьянме на улицах Москвы

Дагестанские «миротворцы» борются за справедливость в Мьянме на улицах Москвы

Парней начали осуждать за поступок в социальных сетях. Популярные группы Кавказа назвали выходку парней дикой, и пояснили, что они позорят нацию и религию.
tala03
20 сент. 2017 / 16:42
  • 1682
  • 53
Заметка №16. «Burger shop». Съесть и не обляпаться практически невозможно

Заметка №16. «Burger shop». Съесть и не обляпаться практически невозможно

Если честно, для нас формат заведения был в диковинку - раньше нам доводилось есть бургеры в сетевых ресторанах фаст-фуда или же в заведениях, где кроме бургеров подают еще много разных блюд.
zhanuska_checkedboe
19 сент. 2017 / 15:12
  • 1438
  • 16
Как КНДР «уничтожила» американские самолеты и авианосец

Как КНДР «уничтожила» американские самолеты и авианосец

Серию коллажей, показывающую как ракеты КНДР нанесли поражения американским самолетам, продемонстрировали в северокорейских СМИ.
tala03
24 сент. 2017 / 17:58
  • 1342
  • 9
Время забыть безумные траты молодости: навыки, которыми ты должен овладеть к 30 годам

Время забыть безумные траты молодости: навыки, которыми ты должен овладеть к 30 годам

Смысл бюджета в том, чтобы знать, куда ты, блин, потратил бабки. В том, чтобы в конце месяца, ты сел, почитал свои записи и понял, какой ты придурок. И принял уже наконец здравое решение, что куда идет.
Lesch
24 сент. 2017 / 21:03
  • 1304
  • 45