Форум русской поддержки Joomla!® CMS
11.12.2016, 15:58:52 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

Стиль заголовков модулей как на фото

 (Прочитано 1099 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Леон
Давно я тут
****

Репутация: +4/-0
Offline Offline

Пол: Мужской
Сообщений: 266



« : 12.07.2015, 20:43:06 »

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



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

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #1 : 12.07.2015, 20:51:56 »

Сделайте фон шапки модуля готовой картинкой уже с выступом, если картинки по длине одинаковые(т.е. ширина модуля), а на ней уже название, которое регулируется в админке модуля.
Если не одинаковые, то начало картинки с выступом, а далее полоской дублируется до нужной ширины модуля, в итоге будет также.
Записан
Леон
Давно я тут
****

Репутация: +4/-0
Offline Offline

Пол: Мужской
Сообщений: 266



« Ответ #2 : 12.07.2015, 20:55:12 »

vipiusss, спасибо, отличное решение. Размеры будут одинаковые, сделаю первым вариантом.
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #3 : 13.07.2015, 14:26:51 »

плохое решение
Весь блок на градиенте http://www.colorzilla.com/gradient-editor/ а уголок через псевдо элемент after позиционировать, вот его можно картинкой вырезать.
Тогда будет универсальное решение под любую ширину блока
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #4 : 15.07.2015, 11:02:53 »

А если картинка будет svg - вообще отлично
Записан
Леон
Давно я тут
****

Репутация: +4/-0
Offline Offline

Пол: Мужской
Сообщений: 266



« Ответ #5 : 15.07.2015, 13:55:39 »

Всем спасибо, решения все лучше и лучше идут.
Показать текстовый блок
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #6 : 15.07.2015, 15:43:34 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #7 : 15.07.2015, 15:57:37 »

ну я быстро написал решение, оно было по своему правильное.
можно вообще поизвращаться, пиксельную матрицу сделать, об этом не думали?!
конечно CSS самый оптимальный вариант, и кстати beliyadm,
раз уже туда полезли, можно и с помощью CSS сделать и уголок тот(или как его назвать), зачем картинки?
« Последнее редактирование: 15.07.2015, 16:01:54 от vipiusss » Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #8 : 15.07.2015, 16:08:09 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #9 : 16.07.2015, 08:01:37 »

#имя {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 50px solid #цвет;
}

будет треугольник, а потом по оси его поворачивать и сместить по диагонали, искривлением.
Вы же CSS хотели, дополняйте.
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #10 : 16.07.2015, 08:30:09 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #11 : 16.07.2015, 14:16:10 »

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

и тему в свалку или ком раздел!
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #12 : 19.07.2015, 13:48:38 »

vipiusss - сможешь сделать такой уголок на стилях? С поворотом, градиентом и бордером?
Хочу увидеть рабочий пример )
Хотя правильно говорят, гемор, не стоит потраченного времени
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #13 : 19.07.2015, 14:10:44 »

смогу, но гемор!
на спор могу, тогда с тебя пиво, а так леньки!
ещё и тултипы добавлю, чтоб не скучно было)))
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #14 : 19.07.2015, 14:28:09 »

на спор могу, тогда с тебя пиво, а так леньки!
не вопрос, приезжай в гости в Севастополь )
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #15 : 19.07.2015, 14:35:51 »

не вопрос, приезжай в гости в Севастополь )
я в Киеве, хотя ваш город красивый!
приезжай ко мне, натравлю кота)))) он как маленькая рысь, хищный ппц!
заодно посмотришь мой сервак, может чо и подскажешь в линуксе.
***
я кандидата на велике защитил, с Николаевки,4 дня, до вас доехал, в апреле было.Через арабатку и казантип.
вёл 10 человек,3 ночовки.
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #16 : 19.07.2015, 14:37:48 »

заодно посмотришь мой сервак, может чо и подскажешь в линуксе.
если я тебе буду подсказывать в линуксе - твой сервак больше в жизни никогда мяу не скажет
по поводу стилей забей, можно конечно же сделать, но смысла большого не вижу, когда 30 секунд вырезать картинку
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #17 : 19.07.2015, 14:40:15 »

я и забил, смысл выделываться, ТС на пиво даст, если не надоело тему читать и его картинки устроили, тогда сделаю и покажу!
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #18 : 20.07.2015, 10:54:01 »

http://jsfiddle.net/Shustry/vdkoauky/1/

У ТС на скрине уголок без градиента. Сделать градиентный на CSS не получится. Тут проще и рациональнее svg юзать.
Записан
Леон
Давно я тут
****

Репутация: +4/-0
Offline Offline

Пол: Мужской
Сообщений: 266



« Ответ #19 : 30.07.2015, 00:24:41 »

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



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

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #20 : 30.07.2015, 01:14:29 »

нет, волнистый нельзя
Записан
Леон
Давно я тут
****

Репутация: +4/-0
Offline Offline

Пол: Мужской
Сообщений: 266



« Ответ #21 : 30.07.2015, 11:41:17 »

Ладно, забил, сделал картинками. Cool
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #22 : 31.07.2015, 14:54:55 »

нет, волнистый нельзя
Ну вот есть такой велосипед http://habrahabr.ru/sandbox/52113/ Azn
Записан
Леон
Давно я тут
****

Репутация: +4/-0
Offline Offline

Пол: Мужской
Сообщений: 266



« Ответ #23 : 31.07.2015, 15:09:46 »

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

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #24 : 31.07.2015, 15:22:24 »

Меня эти php вставки пугают.
там ничего страшного, просто повторяется подряд много раз дивы типа waves1 и других, каждый из которых представляет собой квадратик 10*10 с круглым бордером. В итоге в верхней строке будет много много дивов, ширина_блока/10пкс, вот сколько ))
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #25 : 31.07.2015, 15:51:02 »

Что ещё никак не родили?  Roll Eyes
Да сделал бы как я картинкой бы уже и не парился......
Я бы давно на это забил бы.Может не грамотно, но на мобилках норм, ну и PC тем более.
Не понимаю, что вы преследуете этим разговором?: грамотность решения или итог?

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

ТС, да делай картинкой, норм вариант!
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #26 : 31.07.2015, 16:08:12 »

Ну вот есть такой велосипед http://habrahabr.ru/sandbox/52113/ Azn
Хреналион мусорных тэгов в теле тебя н смущает?
Если без графики, то можно волну запихнуть в шрифт и вставить псевдоэлементом.
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #27 : 31.07.2015, 16:10:00 »

Хреналион мусорных тэгов в теле тебя н смущает?
смущает конечно Azn я ж не предлагаю это в продакшн пускать. просто разные варианты
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #28 : 31.07.2015, 16:12:16 »

Там же, на хабре, был вариант с вставкой • — этого символа. Но так немного не то получится.
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #29 : 31.07.2015, 16:14:04 »

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

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

Не сдержался)))
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet