0 Пользователей и 1 Гость просматривают эту тему.
  • 35 Ответов
  • 1458 Просмотров
*

Леон

  • Давно я тут
  • 279
  • 4
Здравствуйте. Подскажите пожалуйста как сделать шапки у модулей примерно как на фото:



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

Сейчас у меня так, все нормально только без стрелки.
Код
.richbox-2 {
  padding: 10px;
  background: #007a8f;
  color: #fff;
}
« Последнее редактирование: 12.07.2015, 19:47:21 от Леон »
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
Сделайте фон шапки модуля готовой картинкой уже с выступом, если картинки по длине одинаковые(т.е. ширина модуля), а на ней уже название, которое регулируется в админке модуля.
Если не одинаковые, то начало картинки с выступом, а далее полоской дублируется до нужной ширины модуля, в итоге будет также.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Леон

  • Давно я тут
  • 279
  • 4
vipiusss, спасибо, отличное решение. Размеры будут одинаковые, сделаю первым вариантом.
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
плохое решение
Весь блок на градиенте http://www.colorzilla.com/gradient-editor/ а уголок через псевдо элемент after позиционировать, вот его можно картинкой вырезать.
Тогда будет универсальное решение под любую ширину блока
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

AlekVolsk

  • Профи
  • 6312
  • 336
А если картинка будет svg - вообще отлично
*

Леон

  • Давно я тут
  • 279
  • 4
Всем спасибо, решения все лучше и лучше идут.
Спойлер
[свернуть]
*

AlekVolsk

  • Профи
  • 6312
  • 336
легко, если вы скинете образец картинки (без лишнего фона) и дадите ссылку на сайт, где это применяется
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
ну я быстро написал решение, оно было по своему правильное.
можно вообще поизвращаться, пиксельную матрицу сделать, об этом не думали?!
конечно CSS самый оптимальный вариант, и кстати beliyadm,
раз уже туда полезли, можно и с помощью CSS сделать и уголок тот(или как его назвать), зачем картинки?
« Последнее редактирование: 15.07.2015, 15:01:54 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

AlekVolsk

  • Профи
  • 6312
  • 336
выеживаться с уголком на CSS уж больно геморно, там уголок острый, + заливка в нем, картинкой именно уголок проще будет, тем более свг ничего и не весит
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
#имя {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 50px solid #цвет;
}

будет треугольник, а потом по оси его поворачивать и сместить по диагонали, искривлением.
Вы же CSS хотели, дополняйте.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

AlekVolsk

  • Профи
  • 6312
  • 336
У этого треугольника угол 45 градусов, а надо 30, а то и 25. При повороте его угол не изменится, потому вариант отпадает. К тому же весь уголок - это бордер, а необходимо ему тонкую окантовку, и box-shadow не уверен, что может прокатить.
« Последнее редактирование: 16.07.2015, 07:39:52 от AlekVolsk »
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
я же писал, искажать треугольник.
сможешь, меньше слов, больше.....
ТС, пиво, и не будешь читать флуд, сделаю на CSS, срок 1 день, ТЗ на почту(или скайп)

и тему в свалку или ком раздел!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
vipiusss - сможешь сделать такой уголок на стилях? С поворотом, градиентом и бордером?
Хочу увидеть рабочий пример )
Хотя правильно говорят, гемор, не стоит потраченного времени
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
смогу, но гемор!
на спор могу, тогда с тебя пиво, а так леньки!
ещё и тултипы добавлю, чтоб не скучно было)))
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
на спор могу, тогда с тебя пиво, а так леньки!
не вопрос, приезжай в гости в Севастополь )
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
не вопрос, приезжай в гости в Севастополь )
я в Киеве, хотя ваш город красивый!
приезжай ко мне, натравлю кота)))) он как маленькая рысь, хищный ппц!
заодно посмотришь мой сервак, может чо и подскажешь в линуксе.
***
я кандидата на велике защитил, с Николаевки,4 дня, до вас доехал, в апреле было.Через арабатку и казантип.
вёл 10 человек,3 ночовки.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
заодно посмотришь мой сервак, может чо и подскажешь в линуксе.
если я тебе буду подсказывать в линуксе - твой сервак больше в жизни никогда мяу не скажет
по поводу стилей забей, можно конечно же сделать, но смысла большого не вижу, когда 30 секунд вырезать картинку
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
я и забил, смысл выделываться, ТС на пиво даст, если не надоело тему читать и его картинки устроили, тогда сделаю и покажу!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
http://jsfiddle.net/Shustry/vdkoauky/1/

У ТС на скрине уголок без градиента. Сделать градиентный на CSS не получится. Тут проще и рациональнее svg юзать.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Леон

  • Давно я тут
  • 279
  • 4
Еще один вопрос, тема практически та же. На CSS можно ли как-то сделать волнистый бордер, вот пример, также картинка непонятно как сделано((



Способы выше мне понятны, но если тут можно обойтись без картинок, будет отлично.
*

AlekVolsk

  • Профи
  • 6312
  • 336
нет, волнистый нельзя
*

Леон

  • Давно я тут
  • 279
  • 4
Ладно, забил, сделал картинками. 8)
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
нет, волнистый нельзя
Ну вот есть такой велосипед http://habrahabr.ru/sandbox/52113/ :)
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

Леон

  • Давно я тут
  • 279
  • 4
Находил такое) Меня эти php вставки пугают. Еще находил border-style: wave, не знаю откуда это но выдает ошибку в css))
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Меня эти php вставки пугают.
там ничего страшного, просто повторяется подряд много раз дивы типа waves1 и других, каждый из которых представляет собой квадратик 10*10 с круглым бордером. В итоге в верхней строке будет много много дивов, ширина_блока/10пкс, вот сколько ))
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
Что ещё никак не родили?  ::)
Да сделал бы как я картинкой бы уже и не парился......
Я бы давно на это забил бы.Может не грамотно, но на мобилках норм, ну и PC тем более.
Не понимаю, что вы преследуете этим разговором?: грамотность решения или итог?

Вообще банально можно поизвращаться и без css:таблицей друг над другом.
А <tr> и <td> стиле в коде задать...

ТС, да делай картинкой, норм вариант!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Ну вот есть такой велосипед http://habrahabr.ru/sandbox/52113/ :)
Хреналион мусорных тэгов в теле тебя н смущает?
Если без графики, то можно волну запихнуть в шрифт и вставить псевдоэлементом.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Хреналион мусорных тэгов в теле тебя н смущает?
смущает конечно :) я ж не предлагаю это в продакшн пускать. просто разные варианты
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Там же, на хабре, был вариант с вставкой • — этого символа. Но так немного не то получится.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • 5622
  • 322
  • Круглая ава-зло!
Хреналион мусорных тэгов в теле тебя н смущает?
Если без графики, то можно волну запихнуть в шрифт и вставить псевдоэлементом.

Щас Шустрый ТСу и скрипт напишет, который попиксельно, исходя от настроения юзера, просматриваемого сайт, будет изменять шапку модульных позиций, отталкиваясь на кеш браузера и анализируя запросы в поисковых сетях и социальных аккаунтах)))

Не сдержался)))
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Стиль для вышестоящего блока - HTML, CSS

Автор lalalag

Ответов: 6
Просмотров: 1121
Последний ответ 26.06.2017, 15:07:35
от Shustry
Как сделать нормальный caption для фото?

Автор Missile

Ответов: 18
Просмотров: 790
Последний ответ 01.05.2017, 07:54:46
от vipiusss
Позиционирование модулей.

Автор Briz1

Ответов: 2
Просмотров: 466
Последний ответ 17.02.2017, 13:09:47
от vipiusss
Свой стиль для placeholder

Автор kik84

Ответов: 2
Просмотров: 287
Последний ответ 22.11.2016, 16:04:10
от kik84
Стиль для всплывающего названия картинки- как?

Автор epson950

Ответов: 3
Просмотров: 347
Последний ответ 03.11.2016, 01:04:05
от AlekVolsk