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

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

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

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

В интерфейсе есть много кнопочек, хороших и разных. Разных габаритов (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
673

Loading...

Комментарии

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

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

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

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

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

Архивные фотографии Алма-Аты из семейного альбома. Ностальгический пост

Архивные фотографии Алма-Аты из семейного альбома. Ностальгический пост

Насобирал разных фотографий про наш город, из семейного архива. Фотографии не от сканированные, а пересняты на телефон. Давно хотел выставить, но не решался) Сейчас уже мы все поменялись, уже...
Ispanec
22 февр. 2017 / 11:05
  • 12719
  • 26
«Ау, дорогой, проснись! 21 век на дворе давно!». Бездипломный-безработный-бесквартирный!

«Ау, дорогой, проснись! 21 век на дворе давно!». Бездипломный-безработный-бесквартирный!

Ну реально же, парни, откуда вы только беретесь такие простые, а? Я сейчас просто расскажу несколько историй из личного опыта, и судите сами – нормально это? Но для начала расскажу немного о себе...
socium_kzo
22 февр. 2017 / 11:38
  • 7858
  • 98
Трамвайные пути Алматы ни в коем случае нельзя убирать, это окончательно уничтожит трамвай

Трамвайные пути Алматы ни в коем случае нельзя убирать, это окончательно уничтожит трамвай

В Алматы было сделано несколько заявлений касательно ситуации с трамваем, опять же не в пользу его восстановления и возвращения на улицы города. В городе собираются демонтировать рельсы...
SKYFALL
24 февр. 2017 / 16:01
  • 6157
  • 5
Диана Шурыгина – жертва или змея? Девочка красивая, а весь мир судит её именно за это

Диана Шурыгина – жертва или змея? Девочка красивая, а весь мир судит её именно за это

Я совсем не смотрю передачу "Пусть говорят", слишком много ругани и негатива, но новость про какую-то девушку заполонила все мои социальные сети, я открыла youtube и посмотрела несколько передач...
Roza_pvl
22 февр. 2017 / 11:49
  • 5782
  • 34
Как купить свое жилье при зарплате в 100 тысяч тенге

Как купить свое жилье при зарплате в 100 тысяч тенге

Итак, по просьбам трудящихся и по крикам души коллективного бессознательного решила я написать пост на эту тему. Вводные данные: 1) нет имущества, которое можно продать для покупки собственного...
DanaJarlygapova
20 февр. 2017 / 16:17
  • 4481
  • 47
В больнице пара бахил стоит 50 тенге, а оптом 4 тенге. Чувствуете разницу?

В больнице пара бахил стоит 50 тенге, а оптом 4 тенге. Чувствуете разницу?

Получается, цены на бахилы не повышались, а кто-то повысил их самовольно. Я думаю, что на этом пытаются заработать. Позже я нашла ещё одну удивительную штуку:) Упаковка бахил в количестве 50 пар...
killer_slova
сегодня / 9:15
  • 3672
  • 27
50 бизнес-встреч с лучшими предпринимателями Астаны. «Наш бизнес начинался как хобби»

50 бизнес-встреч с лучшими предпринимателями Астаны. «Наш бизнес начинался как хобби»

Друзья, представляю вашему вниманию второго героя моей рубрики "50 бизнес-встреч с лучшими (по моей версии) предпринимателей Астаны за 100 дней" - Асхата Солтанова!
Kultursyn
20 февр. 2017 / 12:46
  • 4171
  • 20
Замуж в 27. Это как отправиться на войну, но без оружия

Замуж в 27. Это как отправиться на войну, но без оружия

Я очень долго думала писать данный пост или нет. Потому, что тема очень тонкая, возможно кого-то может задеть, а, возможно, наоборот кому-то откроет глаза. Тема замужества в каждом поколении была и...
Adilyan
21 февр. 2017 / 20:22
  • 3845
  • 20
Диана Шурыгина как один из PR-инструментов продвижения своего товара и бренда

Диана Шурыгина как один из PR-инструментов продвижения своего товара и бренда

Простому обывателю социальных сетей уже известно, что самой обсуждаемой персоной в последнее время является печально известная 16-ти летняя девушка из Ульяновска Диана Шурыгина.
tala03
21 февр. 2017 / 13:27
  • 3635
  • 15