ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / нарисовать элемент вместо картинки - CSS3
25 сообщений из 31, страница 1 из 2
  1  все
нарисовать элемент вместо картинки - CSS3
    #38181236
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
Всем привет!
У меня есть вот такой элемент на странице (см. вложенную картинку)
Я думаю, что вместо загрузки такой картинки я лучше воспользуюсь новыми возможностями CSS3 и нарисую эти 2 пересикающиеся линии. Подскажите, пожалуйста, как это сделать (код)?
Заранее спасибо!
...
Рейтинг: 0 / 0
12.03.2013, 13:49
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181242
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
Картинка очень маленькая. Вот еще раз ее прикрепил больше элементов и выделил нужный элемент
...
Рейтинг: 0 / 0
12.03.2013, 13:51
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181260
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
тынц
...
Рейтинг: 0 / 0
12.03.2013, 13:58
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181313
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
Спасибо, но я не понял, что мне делать со всеми этими картинками? :)
...
Рейтинг: 0 / 0
12.03.2013, 14:14
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181318
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
MaximuS_G,

???
Геометрические фигуры на CSS
...
Рейтинг: 0 / 0
12.03.2013, 14:18
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181358
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
user89 ,
спасибо большое за ссылку. Используя пример, приведенный на указанном Вами сайте, у меня получилось что-то похожее сделать используя следующий код:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
#triangle-down-red {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid white;
    position:relative;
    top:70px;
}

#triangle-down-blue {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
}

.triangles {
    background:aqua;
}


Код: html
1.
2.
3.
4.
<section class="triangles">
	<div id="triangle-down-red"></div>
	<div id="triangle-down-blue"></div>
</section>


Но мне нужно, что бы во фон за моей фигурой был таким же, как и фон section. Подскажите, пожалуйста, как этого добиться?
Заранее спасибо!
...
Рейтинг: 0 / 0
12.03.2013, 14:36
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181372
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
MaximuS_GЯ думаю, что вместо загрузки такой картинки я лучше воспользуюсь новыми возможностями CSS3Вместо загрузки картинки, имхо, лучше бы привести картинку к минимуму цветов и хранить прямо в CSS. Сильно подозреваю, что и объем будет меньше, и результат кроссбраузернее. Первая попавшаяся статья - habrahabr.ru/post/116538/
...
Рейтинг: 0 / 0
12.03.2013, 14:43
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181401
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
miksoftMaximuS_GЯ думаю, что вместо загрузки такой картинки я лучше воспользуюсь новыми возможностями CSS3Вместо загрузки картинки, имхо, лучше бы привести картинку к минимуму цветов и хранить прямо в CSS. Сильно подозреваю, что и объем будет меньше, и результат кроссбраузернее. Первая попавшаяся статья - habrahabr.ru/post/116538/

Отличный вариант, miksoft ! Спасибо большое! Наверное так и сделаю.
А вот все таки интересно, как решить задачу с предыдущего моего поста (прозрачный фон). На будущее может пригодиться. Подскажите?
...
Рейтинг: 0 / 0
12.03.2013, 14:51
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181534
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
Я вот подумал о следующем... Картинка ведь у меня не форму квадрата имеет, то есть за ней должен быть виден фон, на котором она расположена. Такое получиться реализовать с помощью описанной miksoft технологии?
...
Рейтинг: 0 / 0
12.03.2013, 15:50
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181588
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
MaximuS_G,
 
не уверен, но на всякий случай...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>  
<html>  
<head>  
<style>
#triangle-down-red {
    width: 0;
    height: 0;
	margin-left: 25px;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid aqua;
    position:relative;
    top:50px;
}

#triangle-down-blue {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
}

.triangles {
    background:aqua;
}
#sp {
  margin-top:-55px;
  margin-left:-35px;
  width:120px;
  color: red;
  display:block;
}
</style>
<body>
</body>
<section class="triangles">
  <div id="triangle-down-red"><span id="sp">Текст внутри галочки<span></div>
  <div id="triangle-down-blue">Текст 2</div>
</section>
	
</html>

...
Рейтинг: 0 / 0
12.03.2013, 16:15
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181625
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
user89 ,
Спасибо, но да, это немножко не то. Нужно что бы при смене фона section, он отображался бы внутри галочки.
...
Рейтинг: 0 / 0
12.03.2013, 16:29
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181627
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
MaximuS_G
Код: html
1.
2.
3.
4.
<section class="triangles">
	<div id="triangle-down-red"></div>
	<div id="triangle-down-blue"></div>
</section>

Разметка избыточна, все можно сделать в рамках одного дива. Правда сложнее.
MaximuS_GНо мне нужно, что бы во фон за моей фигурой был таким же, как и фон section.Нужно использовать не бордюры, а градиенты.
...
Рейтинг: 0 / 0
12.03.2013, 16:29
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181630
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
А еще можно вывести букву v и трансформировать ее.
...
Рейтинг: 0 / 0
12.03.2013, 16:30
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181637
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
MaximuS_GЯ вот подумал о следующем... Картинка ведь у меня не форму квадрата имеет, то есть за ней должен быть виден фон, на котором она расположена.Много ли вариантов этого фона? Если один или мало, то отрисовать все варианты. Если много, то png с прозрачностью.

А еще есть CSS Sprites, это когда используются фрагменты одной картинки (вместо десятков-сотен картинок).
...
Рейтинг: 0 / 0
12.03.2013, 16:32
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181729
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
miksoftМного ли вариантов этого фона? Если один или мало, то отрисовать все варианты. Если много, то png с прозрачностью.
Да вроде не много, но вдруг потом поменяются, проще сделать png с прозрачность. Только что попробовал c прозрачностью, вроде получилось :). Спасибо!
miksoftА еще есть CSS Sprites, это когда используются фрагменты одной картинки (вместо десятков-сотен картинок).
Спасибо, про спрайты читал и видел их использование. Там на habrahabr пишут что для очень маленьких картинок, конвертация в base64 подходит больше.

AntonariyРазметка избыточна, все можно сделать в рамках одного дива. Правда сложнее.
Спасибо, я пока только учусь, и делаю все максимально проще, что бы проще было понимать :).
AntonariyНужно использовать не бордюры, а градиенты.
А Вы могли бы хотя бы простой пример привести?
Я так понимаю еще хорошей поддержки градиентов нет, поэтому вариант с base64 более реальный?
...
Рейтинг: 0 / 0
12.03.2013, 17:09
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181764
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
MaximuS_GAntonariyНужно использовать не бордюры, а градиенты.
А Вы могли бы хотя бы простой пример привести?Я приводил. Картинки помните? Походите по сайтам, где они лежат.
MaximuS_GЯ так понимаю еще хорошей поддержки градиентов нет, поэтому вариант с base64 более реальный?css3 градиенты не поддерживает ie9 и ниже, base64 кажется ie8 и ниже.
...
Рейтинг: 0 / 0
12.03.2013, 17:30
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181768
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Я бы на самом деле посоветовал рассмотреть вариант с буквой v, приплюснуть ее и снабдить тенью проще, чем остальные варианты.
...
Рейтинг: 0 / 0
12.03.2013, 17:32
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181861
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
Antonariyвариант с буквой vИмхо, неудачный вариант. Шрифты везде разные (даже если названия одинаковые). А некоторые браузеры даже на одной системе умудряются по-разному буквы рисовать.
...
Рейтинг: 0 / 0
12.03.2013, 18:16
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38181906
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
В принципе да, но при таких размерах разница по-моему не такая уж принципиальная. Просто назначить группу шрифтов без засечек, чтобы совсем уж непотребщина не вылезла.
...
Рейтинг: 0 / 0
12.03.2013, 18:46
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38182191
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
Всем спасибо большое! Удачи! :)
...
Рейтинг: 0 / 0
12.03.2013, 23:38
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38182251
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
Добавил картинку, но появилась какая то неясная белая рамка вокруг моей галочки. В стилях ее не вижу. Подскажите, пожалуйста, что это за явление такое. Причем, меняю размеры width/height - рамка меняется в размере тоже.
Код: css
1.
2.
3.
4.
5.
6.
.drop_down_pic {
    width:20px;
    height: 20px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3QMMFBw1xOny6wAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAApElEQVQYlY2NsQkCURBEZ38gB4cWYBcGgoGZDQg2oJndmNqFoRrYhi0Y/oP7KNzenzHwKwYGDmyw+2ZmTRL+UQCwBHAAUP3gFYAjgDUk3fTSThK+ppJ0LCxC0kzSQ5JIbnLOoe/7muTpbSI5eae35fhw90XO+Vz2xt2nXdcNPq9I7gu8l/YmpTRv23aUUhpaMRrJ2swuAMZmNooxrtz9GkKQJDwBaQOlvys/ywIAAAAASUVORK5CYII=");
    background-repeat:no-repeat;
}



Код: html
1.
2.
3.
4.
5.
<section class="user_info">
	<img src="head_avatarka.jpg" alt="">
	<a href="#" title="Personal cabinet">Maximus</a>
	<img src="" class="drop_down_pic">
</section>
...
Рейтинг: 0 / 0
13.03.2013, 00:43
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38182272
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
data:image/png;base64 можно было в пару раз короче сделать, думаю.

насчет рамочки - мысль с потолка - а не может это быть из-за <img src="" ?
...
Рейтинг: 0 / 0
13.03.2013, 01:07
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38182276
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
miksoftdata:image/png;base64 можно было в пару раз короче сделать, думаю.
Вы имеете ввиду в посте в форуме? :)
miksoftнасчет рамочки - мысль с потолка - а не может это быть из-за <img src="" ?
Да, так и есть :). Спасибо! Поменял на DIV, все заработало. Интересно почему так?
...
Рейтинг: 0 / 0
13.03.2013, 01:14
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38182281
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
MaximuS_Gmiksoftdata:image/png;base64 можно было в пару раз короче сделать, думаю.
Вы имеете ввиду в посте в форуме? :)Нет, в вашем коде. Если PNG оптимизировать, то по моим прикидкам он вполне может быть в пару раз меньше, чем показанный.
...
Рейтинг: 0 / 0
13.03.2013, 01:21
| Ответить | Цитировать | Написать  
нарисовать элемент вместо картинки - CSS3
    #38182985
MaximuS_G
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaximuS_G
Участник
miksoftMaximuS_Gпропущено...

Вы имеете ввиду в посте в форуме? :)Нет, в вашем коде. Если PNG оптимизировать, то по моим прикидкам он вполне может быть в пару раз меньше, чем показанный.
А как это можно сделать? Ведь я использую онлайн конвертер, который не предоставляет возможности оптимизации.
...
Рейтинг: 0 / 0
13.03.2013, 23:05
| Ответить | Цитировать | Написать  
25 сообщений из 31, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / нарисовать элемент вместо картинки - CSS3
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38181318&tid=1448595]:
 0ms
get settings:
 9ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 170ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 51ms
get tp. blocked users:
 1ms
others: 229ms
total:  485ms
созд. / загр.: 485ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]