Ответить Создать тему

Задача #2 , Сложные шейпы, обтравки и как его там еще...

Работаете ли вы с HTML5/CSS3?
 
1. Учусь [ 3 ] ** [37,50%]
2. Владею [ 1 ] ** [12,50%]
3. Творю [ 1 ] ** [12,50%]
4. Что это такое? [ 3 ] ** [37,50%]
Всего голосов: 8
Гости не могут голосовать 
kw.egorov
post Oct 6 2014, 14:23 
Отправлено #1


- -

Сообщений: 1 688
Из: Чебоксар



Цитата(bombi @ Oct 6 2014, 13:35)
Автор, есть интересные задачки?)
*


Есть блок с текстом и изображение.
Цитата
опубликованное пользователем изображение


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

Одно из популярных, а часто и единственный вариант - это один малоизвестный скрипт [позывной "Бекон"]. Однако, если вы знаете о CSS3 и HTML5 больше, чем то что можно использовать header и footer, nav и прочие "новые" объекты, вы предложите еще минимум одно простое и задокументированное решение (со значениями polygon, circle и другими).

PS: У W3C выходной, до валидности кода нет дела, цель - найти решение.
Profile CardPM
  0/0  
bombi
post Oct 6 2014, 17:05 
Отправлено #2


Постоялец

Сообщений: 278



Без скриптов вот решение, считаю плохим т.к. поддерживается только в Chrome, Safari, и по-моему в новой опере. За то не мучаешься с координатами. happy.gif

Понравился скрипт "Bacon!", думаю единственное кроссбраузерное решение.
Profile CardPM
  0/+1  
kw.egorov
post Oct 6 2014, 19:05 
Отправлено #3


- -

Сообщений: 1 688
Из: Чебоксар



Цитата(bombi @ Oct 6 2014, 18:05)
..Chrome, Safari, и по-моему в новой опере..

+ Яндекс/Майл/Рамблер и прочие браузеры, включая малоизвестные на движке webkit (а может и chromium, тогда браузеров еще больше).

По условию для FF и IE можно запускать бекон и не париться. В Битриксе есть определение браузера на уровне ядра, что в результате прописывается в класс html-тега (основной контейнер).

Не суть, if-else спасет ситуацию.

Сообщение отредактировал kw.egorov - Oct 6 2014, 19:08
Profile CardPM
  0/0  
Daily
post Oct 6 2014, 21:15 
Отправлено #4


Продвинутый

Сообщений: 143



Как вариант можно каждую строку засунуть в DIV и сделать отступы, но есть минусы, тут в зависимости от поставленной задачи.
Profile CardPM
  0/0  
kw.egorov
post Oct 6 2014, 21:42 
Отправлено #5


- -

Сообщений: 1 688
Из: Чебоксар



Цитата(Daily @ Oct 6 2014, 22:15)
Как вариант можно каждую строку засунуть в DIV и сделать отступы, но есть минусы, тут в зависимости от поставленной задачи.
*

Это гемор тот еще, да и выравнивать их придется по краю, потому как адаптивный - вариант не подходит. Значит в сторону.
Profile CardPM
  0/+1  
Daily
post Oct 6 2014, 22:10 
Отправлено #6


Продвинутый

Сообщений: 143



Цитата(kw.egorov @ Oct 6 2014, 22:42)
Это гемор тот еще, да и выравнивать их придется по краю, потому как адаптивный - вариант не подходит. Значит в сторону.
*


а если надо применить лишь в одном месте и текст не будет растягиваться, подключать ради этого библиотеку? Для некоторых задач проще дивом, но само собой это менее гибкий вариант

Сообщение отредактировал Daily - Oct 6 2014, 22:11
Profile CardPM
  0/0  
kw.egorov
post Oct 6 2014, 23:13 
Отправлено #7


- -

Сообщений: 1 688
Из: Чебоксар



Цитата(Daily @ Oct 6 2014, 23:10)
а если надо применить лишь в одном месте и текст не будет растягиваться, подключать ради этого библиотеку? Для некоторых задач проще дивом, но само собой это менее гибкий вариант
*

Если в одном месте и статика, то это тупо визитка. Ну да ладно, любите сложные пути - пожалуйста.
Profile CardPM
  0/0  
bombi
post Oct 7 2014, 07:21 
Отправлено #8


Постоялец

Сообщений: 278



Цитата(kw.egorov @ Oct 7 2014, 00:13)
Если в одном месте и статика, то это тупо визитка. Ну да ладно, любите сложные пути - пожалуйста.
*


Мое мнение, что такие манипуляции с выравниванием как раз и происходят именно в творческих визитках и в landing page smile3.gif
Profile CardPM
  0/+1  
dima_mih
post Oct 7 2014, 10:35 
Отправлено #9


Эксперт

Сообщений: 746



css shapes
Profile CardPM
  0/0  
MPA3b
post Oct 7 2014, 10:55 
Отправлено #10


мимимишки-мимими.

Сообщений: 2 956
Из: Чебоксары



дизайнер — неумный человек.
правая выключка? зачем?

а по теме — бекон, да.
ну или CSS3 shapes.
правда, придётся эту фигуру рисовать.



--------------------
Делаю сайты.
Profile CardPM
  0/+1  
kw.egorov
post Oct 7 2014, 11:01 
Отправлено #11


- -

Сообщений: 1 688
Из: Чебоксар



Цитата(MPA3b @ Oct 7 2014, 11:55)
дизайнер — неумный человек..
..приходится рисовать..

Порой дизайн такой пришлют, что без курева, которое употреблял указанный субъект, не разберешься. Есть два пути - делать или не делать. Если не делать - опять есть два пути - отправлять на исправление или бросить.

Рисовать приходится не мало, но с различными сниппетами и заготовками из предыдущих проектов работы становится меньше, а денег больше. На том и стоим.

Всем успехов.
Profile CardPM
  0/0  
kw.egorov
post Oct 7 2014, 13:27 
Отправлено #12


- -

Сообщений: 1 688
Из: Чебоксар



Первый признался что в совершенстве владеет и творит на HTML5 / CSS3.
Покажись, мил человек! Родина должна знать в лицо лучших специалстов.
Profile CardPM
  0/0  
bombi
post Oct 8 2014, 07:13 
Отправлено #13


Постоялец

Сообщений: 278



Думаю задачку решили), автор жги еще ph34r.gif
Profile CardPM
  0/+1  

ОтветитьTopic Options
1 чел. читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
Быстрый ответ
Кнопки кодов
 Расширенный режим
 Нормальный режим
    Закрыть все тэги


Открытых тэгов: 
Введите сообщение
Смайлики
smilie  smilie  smilie  smilie  smilie 
smilie  smilie  smilie  smilie  smilie 
smilie  smilie  smilie  smilie  smilie 
smilie  smilie  smilie  smilie  smilie 
smilie  smilie  smilie  smilie  smilie 
smilie  smilie  smilie  smilie  smilie 
         
Показать все

Опции сообщения