1 Тема від uaLoper

  • uaLoper
  • Заблокований
  • Поза форумом
  • Дата реєстрації: 07.04.2019
  • Повідомлень: 13
    • Репутація: 0

Тема: Простий та елегантний стиль

Сподобався стиль
http://mirohost.net
І я хочу зробити для свого інтернет-магазину ПЗ такий же, тільки з жово-чорним стилем.
Але потрібно створити блок, в якому буде фото з товаром. І я не знаю, як його краще зробити.
Тобто, якщо написати 

#item
{
border: 10px yellow;
}

То це виглядає не дуже. Потрібно туди щось ще додати, а що - не знаю.
Фото товару - це вималюваний в фотошопі диск з ПЗ збоку якого стоїть комп'ютер. Як звичайно короче. От тільки воно не в стиль і все.
Можете допомогти створити сам блок (інше не треба)?

2 Відповідь від koala Востаннє редагувалося koala (08.04.2019 06:34:56)

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 602
    • Репутація: 13310

Re: Простий та елегантний стиль

Намалюйте це. У фотошопі чи в пейнті - не важливо. А потім уже думайте, як малюнок перевести в HTML/CSS-код.

Подякували: uaLoper1

koala вебсайт

3 Відповідь від uaLoper

  • uaLoper
  • Заблокований
  • Поза форумом
  • Дата реєстрації: 07.04.2019
  • Повідомлень: 13
    • Репутація: 0

Re: Простий та елегантний стиль

https://replace.org.ua/uploads/images/9021/33281a1f5bd2f4501d84122e7f74357f.png

▼Прихований текст

я сподіваюся, що ТМ яку я починаю реєструвати (uaLoper) ще немає.  [Це зображення не порушує авторьких прав та є виключно прикладом створення сайту. В даному прикладі використовувалось зображення, авторські права якого належать ТМ Pixabay]

Я намалював. Мене цікавить, що треба додати ще, крім жовтих рамок, щоб фото товару виглядало краще. А також, що зробити, щоб сайт залишався одночасно таким же красивим і не був плагіатом мірохосту.

4 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

Re: Простий та елегантний стиль

Ну на мою скромну думку, якщо треба простий та елегантний стиль, то питання "що треба додати ще, крім жовтих рамок" - неправильне. Я б для початку забрав жовті рамки. Але я не дизайнер.

Подякували: uaLoper, 221VOLT2

bunyk вебсайт

5 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

Re: Простий та елегантний стиль

Ну й коли використовують слово "кращий" після нього пишуть "за". Типу "Кращий за всі інші магазин ....". Хоча "Кращий за всі інші" одним словом пишеться "Найкращий". Як в підзаголовку.

Подякували: uaLoper1

bunyk вебсайт

6 Відповідь від uaLoper

  • uaLoper
  • Заблокований
  • Поза форумом
  • Дата реєстрації: 07.04.2019
  • Повідомлень: 13
    • Репутація: 0

Re: Простий та елегантний стиль

Я дякую Вам! Я не здогадався що в пеінті. Ну а фотошоп в мене не ставиться.
І спасибі, дійсно, якщо рамки прибрати, виглядає краще. Але чогось не вистачає.
https://replace.org.ua/uploads/images/9021/0f71e9d023df2596230ca1257e0d7358.png
Може додати динаміки? От на чистому css не погано виходить випадаюче меню. А от як реалізувати на чистому css збільшення картинки коли на неї наводиш мишкою?
Чи може якусь рамку сіру коли наводиш мишкою? Щоб було видно, що це посилання. Або краще кнопку корзини чи кнопку опису. Але тоді потрібна рамка.
Я заплутався. Прошу допомогти.

7 Відповідь від datska777

  • datska777
  • datska777
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 09.04.2019
  • Повідомлень: 14
    • Репутація: 5

Re: Простий та елегантний стиль

Рамку зробіть, але не таку жовто яскраву, а виберіть щось значно спокійніше, можливо навіть світло сірого кольору, і добавте хавер ефект, при наведенні рамка стає більш розмитіша і за розмірами збільшується.