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

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

Отличный вариант, miksoft ! Спасибо большое! Наверное так и сделаю.
А вот все таки интересно, как решить задачу с предыдущего моего поста (прозрачный фон). На будущее может пригодиться. Подскажите?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 15:50
    #38181534
MaximuS_G
MaximuS_G
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
Я вот подумал о следующем... Картинка ведь у меня не форму квадрата имеет, то есть за ней должен быть виден фон, на котором она расположена. Такое получиться реализовать с помощью описанной miksoft технологии?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 16:15
    #38181588
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
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:29
    #38181625
MaximuS_G
MaximuS_G
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
user89 ,
Спасибо, но да, это немножко не то. Нужно что бы при смене фона section, он отображался бы внутри галочки.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 16:29
    #38181627
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
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:30
    #38181630
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
А еще можно вывести букву v и трансформировать ее.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 16:32
    #38181637
miksoft
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
MaximuS_GЯ вот подумал о следующем... Картинка ведь у меня не форму квадрата имеет, то есть за ней должен быть виден фон, на котором она расположена.Много ли вариантов этого фона? Если один или мало, то отрисовать все варианты. Если много, то png с прозрачностью.

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

AntonariyРазметка избыточна, все можно сделать в рамках одного дива. Правда сложнее.
Спасибо, я пока только учусь, и делаю все максимально проще, что бы проще было понимать :).
AntonariyНужно использовать не бордюры, а градиенты.
А Вы могли бы хотя бы простой пример привести?
Я так понимаю еще хорошей поддержки градиентов нет, поэтому вариант с base64 более реальный?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 17:30
    #38181764
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
MaximuS_GAntonariyНужно использовать не бордюры, а градиенты.
А Вы могли бы хотя бы простой пример привести?Я приводил. Картинки помните? Походите по сайтам, где они лежат.
MaximuS_GЯ так понимаю еще хорошей поддержки градиентов нет, поэтому вариант с base64 более реальный?css3 градиенты не поддерживает ie9 и ниже, base64 кажется ie8 и ниже.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 17:32
    #38181768
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
Я бы на самом деле посоветовал рассмотреть вариант с буквой v, приплюснуть ее и снабдить тенью проще, чем остальные варианты.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 18:16
    #38181861
miksoft
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
Antonariyвариант с буквой vИмхо, неудачный вариант. Шрифты везде разные (даже если названия одинаковые). А некоторые браузеры даже на одной системе умудряются по-разному буквы рисовать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 18:46
    #38181906
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
В принципе да, но при таких размерах разница по-моему не такая уж принципиальная. Просто назначить группу шрифтов без засечек, чтобы совсем уж непотребщина не вылезла.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2013, 23:38
    #38182191
MaximuS_G
MaximuS_G
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
Всем спасибо большое! Удачи! :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2013, 00:43
    #38182251
MaximuS_G
MaximuS_G
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
Добавил картинку, но появилась какая то неясная белая рамка вокруг моей галочки. В стилях ее не вижу. Подскажите, пожалуйста, что это за явление такое. Причем, меняю размеры 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, 01:07
    #38182272
miksoft
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
нарисовать элемент вместо картинки - CSS3
data:image/png;base64 можно было в пару раз короче сделать, думаю.

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

Вы имеете ввиду в посте в форуме? :)Нет, в вашем коде. Если PNG оптимизировать, то по моим прикидкам он вполне может быть в пару раз меньше, чем показанный.
А как это можно сделать? Ведь я использую онлайн конвертер, который не предоставляет возможности оптимизации.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / нарисовать элемент вместо картинки - CSS3 / 25 сообщений из 31, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 579ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1448595]:
 0ms
get settings:
 10ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 205ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 76ms
get tp. blocked users:
 1ms
others: 245ms
total:  579ms
x
x
Закрыть


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