At first
Дизайн доделан, можно выдохнуть и может быть даже начать писать.
Подводим итоги. Благодаря блогхаусу и упорному желанию сделать так, как мне удобно, я:
1. Разобралась с css позиционированием
2. Победила z-index
3. Вспомнила флексбоксы
4. Раскурила гриды
5. Узнала основы типографики
6. Поняла, как надо верстать отступы
7. Нашла замечательный live editor для css
8. Накатала около 800 строк сss кода *
9. Окончательно задолбалась за неделю
* Код не минифицирован, с комментариями и форматированием, но всё равно
скрытый текст
Подводим итоги. Благодаря блогхаусу и упорному желанию сделать так, как мне удобно, я:
1. Разобралась с css позиционированием
2. Победила z-index
3. Вспомнила флексбоксы
4. Раскурила гриды
5. Узнала основы типографики
6. Поняла, как надо верстать отступы
7. Нашла замечательный live editor для css
8. Накатала около 800 строк сss кода *
9. Окончательно задолбалась за неделю
* Код не минифицирован, с комментариями и форматированием, но всё равно
скрытый текст
, а потом этой фотокарточки в углу, которая
Комментарии
Очень приятный дизайн получился! Выпадашки на мобилке супер :)
Я, кстати, гриды не курила еще, как-то не для чего было)
И спасибо С:
Выпадашки есть и на декстопной версии, но на мобилке смотрятся аккуратнее. А гриды я пыталась применить к структуре поста. Мне надо было, чтобы аватарка была в одной строке с автором и датой, а под ними уже название и текст. Но я так и не нашла красивого решения для ситуации, когда аватарки нет, получался пустой квадрат на этом месте. Так что снова флексбоксы)
Мастерски сделано.
Жаль только, что выпадашка с выбором авторов и блогов потерялась.
Кирилл Панфилов, она не совсем потерялась, она кликается на вкладках "блоги" и "ссылки". Наверное, стоило бы добавить иконку, чтобы обозначить выпадашку, но я уже заменила псевдокласс ::after на буквы и изображение туда никак не станет :(
Насчёт самой выпадашки долго думала, как её обыграть в этом решении, и пока текущий вариант самый оптимальный. Но я ещё подумаю.
Приятно получить оценку мастер, когда знаешь css на уровне любителя)
Боковая менюшка была как вызов :D
хДД, для меня это тоже был вызов :) В такие минуты главное помнить, что на css почти нет невозможного :)
да, точно, не сразу углядел =)
Псевдоэлемент after тут заменить на before, а для первого i.fa отменить display: none — останется изначальный треугольник-индикатор)
Кирилл Панфилов, а, точно. Я почему-то была уверена, что добавляла надписи к иконке и тем самым переписывала её.
Пользуясь случаем, задам два вопроса к создателю:
- Почему иконки выпадашек разные?) Мой внутренний перфекционист страдает)
- А можно при сохранении дизайна оставлять обратный слэш? Приходится при каждом сохранении его везде экранировать, это тяжело :(